Jquery accordion wont stay collasped

Question

Maybe someone having the same problem - Im having a small issue with collapse. I have read this article already along with a couple of others How do I keep jQuery UI Accordion collapsed by default? , but i can't seem to get it to collapse by default - ive managed to do it to stay open, but can't get my head around the collapsible true and active false. I am aiming to have it so when you click the next accordion the previous one automatically shuts.

this is the accordion js fiddle link:

https://jsfiddle.net/limtu/gnhgdxrm/

                $(document).ready(function(){
                $('#original .head').click(function(e){
                    e.preventDefault();
                    $(this).closest('li').find('.content').slideToggle();
                });

                $('#improved .head').click(function(e){
                    e.preventDefault();
                    $(this).closest('li').find('.content').not(':animated').slideToggle();
                });
            });

Any suggestions or links to similar problems would be really kind!

Happy Friday!

I updated your [fiddle](https://jsfiddle.net/gnhgdxrm/1/) to move the CSS and JavaScript to the right design quadrants. Typically, you don't want to copy and paste the entire code right into jsfiddle's HTML section. — War10ck, Sep 11 '15 at 14:24
Don't use inline CSS, otherwise if you want to change only a single image style you need to do it in 10 places instead in ONE (inside your stylesheet) — Roko C. Buljan, Sep 11 '15 at 14:27
Thanks for your comments and corrections, i didnt know about the semi colon after — Limtu, Sep 11 '15 at 14:30

score 1 · Accepted Answer · edited Feb 28 '16 at 10:40

1

jsFiddle

$(document).ready(function(){

    var $contents = $("#improved").find(".content"); // Cache your slideable elements

    $('#improved .head').click(function(e){
        e.preventDefault();
        $contents.stop().slideUp(); // Slide up all
        $(this).closest('li').find('.content').stop().slideToggle(); // Toggle one
    });
});

and fix all those things in HTML and move your inline styles to stylesheet

edited Feb 28 '16 at 10:40

Sevle

3,109
2
19
31

answered Sep 11 '15 at 14:46

Roko C. Buljan

196,159
39
305
313

Thankyou very much Roko, im studying your corrections now to understand your steps. Thats really kind of you thank you very very much. its look very different to the original, so i am trying to get my head around it. – Limtu Sep 11 '15 at 14:52
@Limtu you're welcome. It's not *that* different... just improved. Still, more that IMG inline styles away please. It's for your own good :) – Roko C. Buljan Sep 11 '15 at 14:54
Will do, taking down your comments now. Thanks again Roko – Limtu Sep 11 '15 at 14:56
and thanks for suggesting the » ! way way better than the awkard > and than – Limtu Sep 11 '15 at 14:59

Jquery accordion wont stay collasped

1 Answers1