CODEWITHSUNDEEP
javascriptjqueryhtmldomtoggle
Mojtaba Reyhani
Mojtaba Reyhani

Reputation: 457

How can I use multiple toggle on one page JQuery?

How can use multiple toggle on one page?
I have two div in my HTML file and I want to hide or remove the child-1 div and then replace with another div child-2 when every time that clicking on parent title.
my HTML structure as below:

$(document).ready(function(){ 
  $('.child_1').show();
  $('.child_2').hide();

  $('.parent').click( function() {
	$(this).each( function() {
	  $('.child_1, .child_2').toggle();
	});
  });
});
.child_1, .child_2 {
  background-color: red;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"> 
 <h2>Title One</h2>
 <div class='child_1'>paragraph 1</div>
 <div class='child_2'>paragraph 2</div>
</div>
			
<div class="parent"> 
 <h2>Title Two</h2>
 <div class='child_1'>paragraph 1</div>
 <div class='child_2'>paragraph 2</div>
</div>

This work perfectly but when I click in one element other element also change.

Please see here: JSFiddle.

Upvotes: 0

Views: 1267

Answers (3)

mnewelski
mnewelski

Reputation: 312

Bug in your code:

The following code calls .toggle() on every instance of $('parent') thus applying the .click() logic to all .parent elements rather than just the clicked one:

$('.parent').click( function() {
    $(this).each( function() {
      $('.child_1, .child_2').toggle();
    });
  });

In order to fix this problem one could rewrite it as follows:

  $('.parent').click( function() {
    $(this).children('div').toggle('.child_1, .child_2');
  });

Suggested approach:

The best way to approach this is by using .toggleClass() on the .parent element when clicked.

The class when present will dictate the state of specified children - when class show is active on .parent show .child_2 and when not show child_1. This way you set one state as the initial view avoiding the need to .hide() it on load.

It's best practice to control visual states with when possible (i.e. class with display: none and/or display: block) and dictating the styles of contained elements based on the parent element's state/class.

$(document).ready(function(){ 
  $('.parent').click( function() {
			$(this).toggleClass('show');    
    });
});
.child_1, .show .child_2 {
  display: block;
}
.child_2, .show .child_1 {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"> 
  <h2>Title</h2>
  <div class='child_1'>paragraph 1</div>
  <div class='child_2'>paragraph 2</div>
</div>
		
<div class="parent"> 
  <h2>Title</h2>
  <div class='child_1'>paragraph 1</div>
  <div class='child_2'>paragraph 2</div>
</div>

Upvotes: 1

JakeCigar
JakeCigar

Reputation: 603

Just toggle the div children.

$(function(){ 
  $('.parent').click( function() {
    $(this).children("div").toggle();
  });
});

http://jsfiddle.net/jakecigar/cc3bmxx8/18/ <--

Upvotes: 1

DCR
DCR

Reputation: 15657

just change your js function slightly: 

$(document).ready(function(){ 
$('.child_1').show();
$('.child_2').hide();

$('.parent').click( function() {
$(this).each( function() {
  $('.child_1, .child_2',this).toggle();
  });
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent"> 
 <h2>Title One</h2>
 <div class='child_1'>paragraph 1</div>
 <div class='child_2'>paragraph 2</div>
</div>
    		
<div class="parent"> 
 <h2>Title Two</h2>
 <div class='child_1'>paragraph 1</div>
 <div class='child_2'>paragraph 2</div>
</div>

Upvotes: 1

Related Questions