How can I use multiple toggle on one page JQuery?

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: 
<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>

and my jquery also is like below:

  1. $(document).ready(function(){ $('.child_1').show(); $('.child_2').hide(); $('.parent').click( function() { $(this).each( function() { $('.child_1, .child_2').toggle(); }); }); });

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

Please see here: JSFiddleJSFiddle.