CODEWITHSUNDEEP
htmlcss
heart hacker
heart hacker

Reputation: 431

How to display and hide a div when particular button is clicked?

I have the following HTML code:

<button>good</button><br>   
<button>bad</button><br> 
<div class="new" style = "display: none;">booknow</div>
<div class="old">
    <a href="www.success.html">welcome.</a>
</div>

and the following JavaScript code:

<script>
    $(document).ready(function() {
        $("button").click(function() {   /*button click event*/   
            $(".new").toggle();          /*new class calling */
        });       
    });
</script>

How can I toggle the visibility of the div(s) with class new whenever a button is clicked?

Upvotes: 1

Views: 60

Answers (1)

Dhaarani
Dhaarani

Reputation: 1360

Try below

$(document).ready(function(){ 
   $("button.good").click(function(){ 
      $(".new").toggle();
   });
   $("button.bad").click(function(){ 
      $(".old").toggle();
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="good">Good</button><br> 
<button class="bad">Bad</button><br> 
 <div class="new">booknow</div>
<div class="old"><a href="www.success.html">welcome.</a></div>

Upvotes: 2

Related Questions