CODEWITHSUNDEEP
jquery
flyersun
flyersun

Reputation: 917

jquery content hide/show panels

I didn't write this code myself but a colleges has asked me to help resolve an issue. I'm not having much look with google so thought I'd give it a shot here.

function($) {
 var accordion = $('dl > dd').hide().slice(0, 1).show();

 $('dl > dt > a').click(function() {
 accordion.slideUp();
 if($(this).parent().next().is(':hidden'))
 { 
   $(this).parent().next().slideDown();
 }
 return false;
});
})(jQuery);

This code is supposed to open and close panels on the page.

If we change this line 

 var accordion = $('dl > dd').hide().slice(0, 1).show();

to this line

 var accordion = $('dl > dd').hide();

Everything works as should but we would like the first panel to show when the page loads.

With the code as is when you open a panel the open ones don't close.

Upvotes: 1

Views: 99

Answers (3)

Colin Bacon
Colin Bacon

Reputation: 15619

This would be my implementation of an accordion.

CSS

<style type="text/css">
    dd {
        display: none;
    }
</style>

HTML

<dl>
    <dt><a href="#">Slide1</a></dt>
    <dd>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </dd>
    <dt><a href="#">Slide2</a></dt>
    <dd>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </dd>
    <dt><a href="#">Slide3</a></dt>
    <dd>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
    exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </dd>
</dl>

JQuery

(function ($)
    {
        var accordionTitle = $('dl > dt > a'),
            accordionSlide = $('dl > dd');

        accordionTitle
            .first()
            .addClass('active')
            .parent()
            .next()
            .slideDown();

        accordionTitle.click(function (e)
        {
            e.preventDefault();

            if (!$(this).hasClass('active'))
            {
                accordionSlide.slideUp();

                $(this).parent().next().stop().slideToggle();

                accordionTitle.removeClass('active');
                $(this).addClass('active');
            }
        });
    })(jQuery);

Upvotes: 1

philipobenito
philipobenito

Reputation: 692

It's to do with what is being stored in the accordion var after you filter and hide/show. What you're trying to achieve can actually be achieved without calling .show

var accordion = $('dl > dd');
accordion.not(':first').hide();

Upvotes: 1

Ram
Ram

Reputation: 144739

The issue is you are filtering the elements using slice method and finally accordion is a jQuery object which has only 1 selected element, not all the accordion elements, you can use end method:

var accordion = $('dl > dd').hide().first().show().end();

or:

var accordion = $('dl > dd').hide(); 
accordion.first().show();

Upvotes: 1

Related Questions