单击按钮切换div标签

Question

I have many buttons with id b1 , b2 ... and each has a div tag after it with id q1 , q2 ... I want to toggle the div tag when the corresponding button is clicked. Example: When b1 is clicked q1 should toggle. It is given here. http://upscfever.com/upsc-fever/en/topper/en-toppers.html

 $(document).ready(function(){ $(".info").hide(); $("#b1").click(function(){ $("#q1").toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="b1" type="button" class="btn btn-primary btn-block"></button> <div id="q1" class="info"></div> 

But as i might have 100 of buttons, how can i do the same thing without adding click on each button?

Answer 1

Using attribute startswith selector ^ , get the id of button and get the index value from it first.

$("[id^='b']").click(function(){
    var index = this.id.match(/\d+$/)[0];
    $("#q" + index ).toggle();
});

Demo

 $(document).ready(function() { $(".info").hide(); $("[id^='b']").click(function() { var index = this.id.match(/\\d+$/)[0]; $("#q" + index).toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="b1" type="button" class="btn btn-primary btn-block">Button1</button> <div id="q1" class="info">Info1</div> <button id="b2" type="button" class="btn btn-primary btn-block">Button2</button> <div id="q2" class="info">Info2</div> <button id="b3" type="button" class="btn btn-primary btn-block">Button3</button> <div id="q3" class="info">Info3</div> <button id="b4" type="button" class="btn btn-primary btn-block">Button4</button> <div id="q4" class="info">Info4</div> 

Answer 2

Here you go with a solution

 $(".info").hide(); $("button").click(function(){ $(this).next('div.info').toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button type="button" class="btn btn-primary btn-block">Button 1</button> <div class="info">Div 1</div> <button type="button" class="btn btn-primary btn-block">Button 2</button> <div class="info">Div 2</div> 

No need to targeting using id, you can do it using jQuery .next()

Hope this will help you.

Answer 3

You could change your selector from $("#b1") to something like $(".btn") , and then use the id to determine which q you want to open, like this:

$(".button").click(function(){
  if(this.id){
    $("#q"+this.id.substring(1)).toggle();
  }
});

This way, it doesn't matter how you arrange your HTML, as long as the ids match

 $(document).ready(function(){ $(".info").hide(); $(".btn").click(function(){ if(this.id){ $("#q"+this.id.substring(1)).toggle(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="b1" type="button" class="btn btn-primary btn-block">b1</button> <button id="b2" type="button" class="btn btn-primary btn-block">b2</button> <div id="q1" class="info">q1</div> <div id="q2" class="info">q2</div> 

Here you have it on JSFiddle: https://jsfiddle.net/py8q340p/

Answer 4

Use an extra variable state to check your state and for first time only your first div is toggled later on both the divs are toggled.

 $(document).ready(function(){ var state = 0; $(".info").hide(); $("#b1").click(function(){ if(state ==0 ) { $('#q1').toggle(); state = 1; } else { $("#q1").toggle(); $('#q2').toggle(); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="b1" type="button" class="btn btn-primary btn-block">Toggle Divs</button> <div id="q1" class="info">Hello div 1</div> <div id="q2" class="info">Hello div 2</div>