Question

I have a container that has several divs with content. i need to be able to click “switch” element and hide this parent div and at the same time show new div that is hidden below. I thought of doing it with click event but I am not sure how to target the two divs.

$('.change').click(function() {
      $(this).parent("div").hide().next("div").show();
});


<div id="container">
   <div>
      old content abc <span class="change">switch</span>
   </div>
   <div>
      new content abc  
   </div>

   <div>
      old content 123 <span>switch</span>
   </div>
   <div>
      new content 123  
   </div>

</div>

Answer 1

it works fine ^_^. look here: http://jsfiddle.net/maniator/VnSwk/

I would say make one change with the js:

$('.change').click(function() {
    $this = $(this)
    $(this).parent("div").hide().next("div").show().append($this);
});
$('#container').children().hide();
$($('#container').children()[0]).show();