Multiple Div Open And Close On A Click With Div Divided Into Left And Right

I have two divs (left and right). If a link is clicked in the left div, it should open data in the right div where there are multiple questions. Each question is clickable and disp

Solution 1:

UPDATE: WORKING DEMO

Maybe this is what you are looking for:

$(this).parent().siblings().find('div[id*=innerdiv]').hide();

This selects all the other #innerdivs* and hide it.

Like:

  $('.targetDiv').hide();
  $('.show').click(function () {
        $('#div' + $(this).attr('target')).toggle();
    });
  $('.innerdiv').hide();
  $('.answer').click(function(){
  $(this).parent().siblings().find('div').hide();
  $('#innerdiv' + $(this).attr('target')).toggle();   
  });

WORKING DEMO

Solution 2:

Why not just select all the innerdivs beforehand and hide them, before toggling the one that belongs to your target? http://jsfiddle.net/C59bE/9/

So that becomes:

$('.targetDiv').hide();
    $('.show').click(function () {
       $('#div' + $(this).attr('target')).toggle();
    });
$('.innerdiv').hide();
$('.answer').click(function(){
    $('.innerdiv').hide();
 $('#innerdiv' + $(this).attr('target')).toggle();   
});

Solution 3:

You can try to hide all the innerdivs before displaying the one clicked on:

$('.answer').click(function(){
    $(".innerdiv").hide();
    $('#innerdiv' + $(this).attr('target')).toggle();  
});

Solution 4:

Thanx I got the answer using this very easily.

 $('.answer').click(function(){
    var $target = $('#innerdiv' + $(this).attr('target')).toggle();   
    $('.targetDiv .innerdiv').not($target).hide()
});