Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 129
  • Last Modified:

Optimize my jQuery div toggle

Hi,

I'm using the following to toggle a lot of div's, but it's not optimal with all that JS.
Is it possible to automatically match... matching id/class?

<button class="div1">Toggle 'em</button>
<div class="toggle1">
	p>Hiya</p>
	<p>Such interesting text, eh?</p>
</div>

<button class="div2">Toggle 'em</button>
<div class="toggle2">
	<p>Hiya</p>
	<p>Such interesting text, eh?</p>
</div>

<button class="div3">Toggle 'em</button>
<div class="toggle3">
	<p>Hiya</p>
	<p>Such interesting text, eh?</p>
</div>

$( ".div1" ).click(function() {	
	if ( $( ".toggle1" ).is( ":hidden" ) ) {
		$( ".toggle1" ).slideDown( "normal" );
	} else {
		$( ".toggle1" ).slideUp( "normal" );
	}
});

$( ".div2" ).click(function() {	
	if ( $( ".toggle2" ).is( ":hidden" ) ) {
		$( ".toggle2" ).slideDown( "normal" );
	} else {
		$( ".toggle2" ).slideUp( "normal" );
	}
});

$( ".div3" ).click(function() {	
	if ( $( ".toggle3" ).is( ":hidden" ) ) {
		$( ".toggle3" ).slideDown( "normal" );
	} else {
		$( ".toggle3" ).slideUp( "normal" );
	}
});

Open in new window

0
kgp43
Asked:
kgp43
  • 2
1 Solution
 
Tom BeckCommented:
Yes. Just give your sliding divs a common class and use slideToggle();
<button class="div1">Toggle 'em</button>
<div class="toggle1 toggle">
	p>Hiya</p>
	<p>Such interesting text, eh?</p>
</div>

<button class="div2">Toggle 'em</button>
<div class="toggle2 toggle">
	<p>Hiya</p>
	<p>Such interesting text, eh?</p>
</div>

<button class="div3">Toggle 'em</button>
<div class="toggle3 toggle">
	<p>Hiya</p>
	<p>Such interesting text, eh?</p>
</div>
<script>
$('button').click(function(){
	$(this).next('.toggle').slideToggle('normal');
});
</script>

Open in new window

0
 
kgp43Author Commented:
Does that work with 3 (or more) buttons? Each opening a different/matching div?
0
 
Tom BeckCommented:
That script will work for any number of buttons arranged in the markup with the sliding div directly following the button. Other arrangements of markup can be made to work as well.

$('button').click attaches a handler to every <button> element on the page. The $(this) inside the handler will always refer to the specific <button> element clicked.

In a real world scenario the buttons would have a class as well so you can distinguish the ones that activate the sliding divs, example, <button class="slideButton">, then you could isolate them in the script:

$('button.slideButton').click(function(){
      $(this).next('.toggle').slideToggle('normal');
});
0

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now