Dont know why, my jquery code is working for hiding a div which is shown initially and show another div with a 'data-value' for first time.
after that it just shows only the displayed div (the another div of the first time) even when other radio buttons are selected.
included jquery : <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
my css
.stbr{
display: none;
}
my html
<input name='stb' type='radio' data-value='1' value='value'>
<input name='stb' type='radio' data-value='2' value='value'>
<input name='stb' type='radio' data-value='3' value='value'>
<div class="stbr" style="display: block;">
initial div
<div>
<div id="stb1" class="stbr">
first shown another div
<div>
<div id="stb2" class="stbr">
second div
<div>
<div id="stb3" class="stbr">
third div
<div>`
my jquery code
<script src="./lib/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('input[type="radio"]').click(function(){
var stb = document.querySelector("input");
var demovalue = stb.getAttribute("data-value");
$("div.stbr").hide();
$("#stb"+demovalue).show();
});
});
</script>
i need to get first div on clicking radio input with data-value=1
second div on clicking radio input with data-value=2
and so on....
Please help...anyone