How to make the same button hide and show the block?

Question

<button class="my_btn btn-success">Hide and Show</button></p>
<h1 id="hol">Hello World</h1>



$(".my_btn").on('click', function(event) {
    $("#hol").hide();
});

How to make the same button hide and show the hol block? plz help, i am beginning developer)

Answer 1

use toggle to switch between hide and show

Answer 2

You can use jQuery's .toggle() that will display or hide the matched elements:

$(".my_btn").on('click', function(event) {
    $("#hol").toggle();
    // you can set the specific text for the button as well
    $(this).text($(this).text() == 'Show' ? 'Hide' : 'Show');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="my_btn btn-success">Hide</button></p>
<h1 id="hol">Hello World</h1>