CODEWITHSUNDEEP
jqueryhtmltoggle
NinoLopezWeb
NinoLopezWeb

Reputation: 151

jQuery toggle show/hide, how to show nested divs

I forked this script from jsfiddle for a contact page I'm making. Problem is: I can't figure out how to show nested divs, which is required for a shortcode I will be using.

In my example, I created an ID called 'I need to be seen!' that I would like to see popup when the user clicks a face -- JSFiddle

Here is the jQuery script I'm using:

$(document).ready(function(){
  $("#upload_page a").click(function(){
     var id =  $(this).attr('id');
     id = id.split('_');
     $(this).addClass('selected').siblings().removeClass('selected');
     $("#upload_container div").hide();
     $("#upload_container #upload_"+id[1]).show();
  });
});

Thanks!

Upvotes: 0

Views: 1060

Answers (3)

Arun P Johny
Arun P Johny

Reputation: 388436

The problem is the selector #upload_container div applies the style and actions to all divs inside upload_container instead you need to limit it to the children of upload_container

So

#upload_container > div {
    display:none;
}

then

$(document).ready(function () {
    $("#upload_page a").click(function () {
        var id = $(this).attr('id');
        id = id.split('_');
        $(this).addClass('selected').siblings().removeClass('selected');
        $("#upload_container > div").hide();
        $("#upload_container #upload_" + id[1]).show();
    });
});

Demo: Fiddle

Another solution is to add a class to target the the upload_* elements like

    <div id="upload_bob9" class="upload"> Some Text 9
        <div class="nested_div">I need to be seen!</div>
    </div>

then

#upload_container .upload {
    display:none;
}

and

$(document).ready(function () {
    $("#upload_page a").click(function () {
        var id = $(this).attr('id');
        id = id.split('_');
        $(this).addClass('selected').siblings().removeClass('selected');
        $("#upload_container .upload").hide();
        $("#upload_container #upload_" + id[1]).show();
    });
});

Demo: Fiddle

Note: ID of an element must be unique so use class attribute for nested_div

Upvotes: 2

Subash Selvaraj
Subash Selvaraj

Reputation: 3385

Add this line $("#upload_container #upload_"+id[1]).find('div').show(); in your code 

$(document).ready(function(){
   $("#upload_page a").click(function(){
      var id =  $(this).attr('id');
      id = id.split('_');
      $(this).addClass('selected').siblings().removeClass('selected');
      $("#upload_container div").hide(); 
      $("#upload_container #upload_"+id[1]).show();
      $("#upload_container #upload_"+id[1]).find('div').show();
   });
});

FIDDLE Hope it helps.

Upvotes: 0

codingrose
codingrose

Reputation: 15709

Write:

$("#upload_page a").click(function(){
    var id =  $(this).attr('id');
    id = id.split('_');
    $(this).addClass('selected').siblings().removeClass('selected');
    $("#upload_container div").hide(); 
    $("#upload_container #upload_"+id[1]+",#upload_container #upload_"+id[1]+" *").show();
});

DEMO

OR:

Add a class to all upload divs and hide them instead of hiding all div elements.

$("#upload_page a").click(function(){
    var id =  $(this).attr('id');
    id = id.split('_');
    $(this).addClass('selected').siblings().removeClass('selected');
    $("#upload_container .container").hide(); 
    $("#upload_container #upload_"+id[1]).show();
});

DEMO

Upvotes: 0

Related Questions