CODEWITHSUNDEEP
javascriptjqueryhtml
user0129e021939232
user0129e021939232

Reputation: 6355

jQuery not hiding elements by default

Hi I'm using quite a few jQuery elements in a web application of mine. I am using jQuery UI Tabs and I am trying to put in some show hide elements within this tab, however if I put in some custom jQuery this tab fails and all other jQuery on the page fails to do what I want on default.

For example i have one div hidden by default <div class="partnersiteinfo"> however this is shown on default instead and have to click to toggle hide.

Not sure what is going wrong here, not got a lot of experience with jquery, so would appreciate some help, personally I think the error is in the JS, so I've made a jsFiddle or view my js below:

js/js.js

$(document).ready(function () {
    $('.partnersiteinfo').hide();
    $('.toggle').on('click', function () {
        $('.partnersiteinfo').slideToggle();

        return false;
    });
    $(function () {
        $('#sortsitemap').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');

    });
    $(function () {
        $("#tabs").tabs();
    });
});

Upvotes: 0

Views: 137

Answers (2)

Poornima
Poornima

Reputation: 928

You are triggering the click event in your fiddle and that's the reason its visible. Remove this part and it will work.

find('.toggle').trigger('click');

Your Fiddle Updated.

Upvotes: 1

Poetro
Poetro

Reputation: 572

Don't hide elements with JavaScript. Use CSS instead. Also you do trigger the click on the .toggle which shows the .partnersiteinfo, this is why it becomes visible by default.

Upvotes: 1

Related Questions