when i click the open button a text box should appear in the page

Question

when i click the active button a box should appear in the page , and when i click closed it should hide from page

<div class="btn-group btn-group-toggle" data-toggle="buttons">
    <label class="btn btn-secondary ">
        <input type="radio" name="options" id="option1" autocomplete="off" checked> Open
    </label>
    <label class="btn btn-secondary">
        <input type="radio" name="options" id="option2" autocomplete="off"> Closed
    </label>
</div>

Answer 1

Use change event of radio button

 $("input[name='options']").on('change',function(){ if($(this).attr('id') == 'option1'){ $('#myDiv').show(); }else{ $('#myDiv').hide(); } })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div style="height:100px" id="myDiv">MY DIV WILL BE HERE</div> <body> <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary "> <input type="radio" name="options" id="option1" autocomplete="off" checked> Open </label> <label class="btn btn-secondary"> <input type="radio" name="options" id="option2" autocomplete="off"> Closed </label> </div>

Answer 2

You can use a bootstrap modal and modal button to open a box on a button click. if you want to make a custom button then here is the code for in jquery.

$(document).ready(function()
{
$("button.active").on("click",function()
{
$(".page-box").toggle();
//page-box is the box container which you want to open 
})


});

Answer 3

is that what you want ?

 $(document).ready(function() { $('input[name=options]').change(function(e) { var isOpen = $(this).val() == "Open"; $('#box').toggle(isOpen); }); });

 #box { padding-top: 15px; }

 <div class="btn-group btn-group-toggle" data-toggle="buttons"> <label class="btn btn-secondary "> <input type="radio" name="options" value="Open" id="option1" autocomplete="off" checked> Open </label> <label class="btn btn-secondary"> <input type="radio" name="options" value="Closed" id="option2" autocomplete="off"> Closed </label> </div> <div id="box">More Info</div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

when i click the open button a text box should appear in the page

Question

3 answers

solution1
2 2020-02-01 08:06:22

solution2
1 2020-02-01 07:57:13

solution3
1 ACCPTED 2020-02-01 07:57:25

when i click the open button a text box should appear in the page

Question

3 answers

solution1 2 2020-02-01 08:06:22

solution2 1 2020-02-01 07:57:13

solution3 1 ACCPTED 2020-02-01 07:57:25

solution1
2 2020-02-01 08:06:22

solution2
1 2020-02-01 07:57:13

solution3
1 ACCPTED 2020-02-01 07:57:25