How To Display All The Divs Inside A Parent Div

I have the following code which is my Default.aspx:

Copy

Hides the following:

<divid="content"><div><!-- will be hidden --><div><!-- will also be hidden --><div><!-- will also also be hidden -->
         ... and so on
         </div></div></div></div>

You may want to assign a common class to all of your tab-level <asp:Panel> elements, and do something closer to

$('.myTabClass').hide();

Edit: alternatively, find out what is rendering a <div> around the gridview. Does it come by default with the gridview?

Solution 2:

You only want the children hidden , not all descendent <div>

Try:

$("#content").children().hide();

And you can chain your show() to it also

$("#content").children().hide().first().show();

Solution 3:

The reason is because you are hiding all of the child divs and then fading in the only the first child div.

<scripttype="text/javascript">
    $(document).ready(function () {

        // HIDES ALL CHILD DIVS!!  EVEN GRANDCHILD DIVS
        $("#content div").hide(); // Initially hide all content
        $("#tabs li:first").attr("id", "current"); // Activate first tab// ONLY FIRST CHILD IS UNHIDDEN
        $("#content div:first").fadeIn(); // Show first tab content

        $('#tabs a').click(function (e) {
            e.preventDefault();
            $("#content div").hide(); //Hide all content
            $("#tabs li").attr("id", ""); //Reset id's
            $(this).parent().attr("id", "current"); // Activate this//$('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
            $($(this).attr('href')).fadeIn();
        });
    });
</script>

a fix could be:

<scripttype="text/javascript">
    $(document).ready(function () {
        $("#content div[id^='tab']").hide(); // Initially hide all content
        $("#tabs li:first").attr("id", "current"); // Activate first tab
        $("#content div[id^='tab']:first").fadeIn(); // Show first tab content

        $('#tabs a').click(function (e) {
            e.preventDefault();
            $("#content div").hide(); //Hide all content
            $("#tabs li").attr("id", ""); //Reset id's
            $(this).parent().attr("id", "current"); // Activate this//$('#' + $(this).attr('title')).fadeIn(); // Show content for current tab
            $($(this).attr('href')).fadeIn();
        });
    });
</script>

Share