CODEWITHSUNDEEP
jqueryhtml
user0129e021939232
user0129e021939232

Reputation: 6355

jQuery hide children in table

Hi I'm making a navigation structure which is has the parent visible on the page load and the children hidden. I'm not entirely sure how I should go about this as I'm not fluent in jQuery.

I tried to using the below line but this was not successful:

findChildren.hide();

Anyone have any ideas how I could keep the children hidden until I click the collapse button?

My code is below or click to view a jsFiddle:

index.html

<table id="mytable">
<th>Pages</th>
<th>Add</th>
<th>Edit</th>
<th>Remove</th>
    <tr data-depth="0" class="collapse level0">
        <td><span class="toggle collapse"></span>Header Links</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td>Media Library</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>    
        </tr>
    <tr data-depth="1" class="collapse level1">
        <td>SJP TV</td>
         <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
    <tr data-depth="1" class="collapse level1">
        <td>Funds</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
        <tr data-depth="1" class="collapse level1">
        <td>Calculators</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
        <tr data-depth="1" class="collapse level1">
        <td>Events</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
        <tr data-depth="1" class="collapse level1">
        <td>Links</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>


    <!--Home-->
    <tr data-depth="0" class="collapse level0">
        <td>Home</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>

    <!--About -->
    <tr data-depth="0" class="collapse collapsable level0">
        <td><span class="toggle collapse"></span>About</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
        <!-- Level 2 -->
        <tr data-depth="1" class="collapse level1">
        <td>About Andy Edwards</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>

     <tr data-depth="1" class="collapse level1">
        <td>Testimonials</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
     <tr data-depth="1" class="collapse level1">
        <td>Galleries</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>

    <!--Working with you-->
    <tr data-depth="0" class="collapse collapsable level0">
        <td><!--Span needed for collapse icons--><span class="toggle collapse"></span>Working with You</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>    </tr>
        <!--Level 2-->
        <tr data-depth="1" class="collapse level1">
        <td>Working with other specialists</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
    </tr>
    <!--Our services-->
    <tr data-depth="0" class="collapse collapsable level0">
        <td><!--Span needed for collapse icons--><span class="toggle collapse"></span>Our Services</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td></tr>
        <tr data-depth="1" class="collapse level1">
        <td>Investments</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
        <tr data-depth="1" class="collapse level1">
        <td>Retirement Planning</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>
        <tr data-depth="1" class="collapse level1">
        <td>Protecting you and your estate</td>
        <td>Add</td>
        <td>Edit</td>
        <td>Remove</td>



</table>

js/js.js

// JavaScript Document

$(function() {
    $('#mytable').on('click', '.toggle', function () {
        //Gets all <tr>'s  of greater depth
        //below element in the table
        var findChildren = function (tr) {
            findChildren.hide();
            var depth = tr.data('depth');
            return tr.nextUntil($('tr').filter(function () {
                return $(this).data('depth') <= depth;
            }));
        };

        var el = $(this);
        var tr = el.closest('tr'); //Get <tr> parent of toggle button
        var children = findChildren(tr);

        //Remove already collapsed nodes from children so that we don't
        //make them visible. 
        //(Confused? Remove this code and close Item 2, close Item 1 
        //then open Item 1 again, then you will understand)
        var subnodes = children.filter('.expand');
        subnodes.each(function () {
            var subnode = $(this);
            var subnodeChildren = findChildren(subnode);
            children = children.not(subnodeChildren);
        });

        //Change icon and hide/show children
        if (tr.hasClass('collapse')) {
            tr.removeClass('collapse').addClass('expand');
            children.hide();
        } else {
            tr.removeClass('expand').addClass('collapse');
            children.show();
        }
        return children;
    });
});

Upvotes: 1

Views: 2811

Answers (2)

Rory McCrossan
Rory McCrossan

Reputation: 337560

You don't need your findChildren function. You can use nextUntil() between parent rows:

var children = tr.nextUntil('.level0');

Example fiddle

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

You cannot call findChildren.hide(); because findChildren is a function, what you can do is to trigger the toggle click manually using .trigger() on page load

$(function() {
    $('#mytable').on('click', '.toggle', function () {
        //Gets all <tr>'s  of greater depth
        //below element in the table
        var findChildren = function (tr) {
            var depth = tr.data('depth');
            return tr.nextUntil($('tr').filter(function () {
                return $(this).data('depth') <= depth;
            }));
        };

        var el = $(this);
        var tr = el.closest('tr'); //Get <tr> parent of toggle button
        var children = findChildren(tr);

        //Remove already collapsed nodes from children so that we don't
        //make them visible. 
        //(Confused? Remove this code and close Item 2, close Item 1 
        //then open Item 1 again, then you will understand)
        var subnodes = children.filter('.expand');
        subnodes.each(function () {
            var subnode = $(this);
            var subnodeChildren = findChildren(subnode);
            children = children.not(subnodeChildren);
        });

        //Change icon and hide/show children
        if (tr.hasClass('collapse')) {
            tr.removeClass('collapse').addClass('expand');
            children.hide();
        } else {
            tr.removeClass('expand').addClass('collapse');
            children.show();
        }
        return children;
    }).find('.toggle').trigger('click');
});

Demo: Fiddle

Upvotes: 2

Related Questions