How to show a div when a particular button is clicked,

Question

This my js code:

• i want to click first button to call a new class,it works but, every button doing same work. when i click second button this also calling a new class.please help me to solve this.

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

  this my html code:

   <button>first</button><br> <button>second</button><br> <button>third</button><br> <div class="new" style = "display: none;">hi.</div> <!--i need to call only this class--> <div class="old"><a href="www.google.com">hello.</a></div> 

Answer 1

You have to set an id to that particular button and then attach click event handler to that particular button using id. Here is the code.

<button id ='myBtn' >first</button><br> 

 $("#myBtn").click(function(){      /*button click event*/
$(".new").toggle();                /*new class calling */
});

Answer 2

You can use contains('first') .

The thing is that your using button as selector, that will not understand which button is clicked actually.

I would recommend, To make jQuery understand you should provide any specific id to that element.

But if you want to do it based on the text inside a DIV, you can use contains('first') .

 $(document).ready(function(){ $("button:contains('first')").click(function(){ /*button click event*/ $(".new").toggle(); /*new class calling */ }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button>first</button><br> <button>second</button><br> <button>third</button><br> <div class="new" style = "display: none;">hi.</div> <!--i need to call only this class--> <div class="old"><a href="www.google.com">hello.</a></div> 

Answer 3

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> <button>first</button> <br> <button>second</button> <br> <button>third</button> <br> <div class="new" style="display: none;">hi.</div> <!--i need to call only this class--> <div class="old"><a href="www.google.com">hello.</a> </div> 

use .eq() to select which button you need the click

Note: eq() is index based which starts with 0

Answer 4

If you want to click first button to call a new class , you can do by many ways .Here is checking with clicked text to get first button click

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

set id is the better

<button id="first">first</button><br>  
<button>second</button><br> 
<button>third</button><br>
<script>
    $(document).ready(function(){
    $("#first").click(function(){      /*specific button click event*/
        $(".new").toggle();                /*new class calling */
    });
  });
</script>

Answer 5

With $("Button") you are referring to the Button element and not a certain Button so every button will do the same action. You should give your Buttons an id and then call them based on their Id.
Like:

<button id="firstBtn">first</button><br>  
<button id="secondBtn">second</button><br> 
<button id="thirdbtn">third</button><br>

And then call them with the id selector # like so: $("#firstBtn").click()..

Answer 6

Remove the inline style and use a separate css class

$(document).ready(function() {
  $("button").click(function() { /*button click event*/
    $(".new").toggleClass('hide'); /*new class calling */
  });
});

CSS

.hide {
  display:none;
}

JSFIDDLE

Answer 7

give id's to the buttons, n call those accordingly like

$("#first").click(function(){      
     $(".new").toggle();              
});