jQuery Accordion plugin

by Trisox

HTML

<h1>Frågor och svar</h1>
<ul class="questionsAndAnswers">
    <li style="height: auto; ">
        
        <h3 class="question" id="faq-question17766"><span id="12345" class="doNotLog questionClicked">Kan jag få Spotify hos Telia?</span></h3>
        <div class="answer">
            <h3 id="faq-question17766"><span id="12345" class="doNotLog">Kan jag få Spotify hos Telia?</span></h3>
            
            <p>Med Spotify kan du lyssna till all världens musik. Du kan använda Spotify i datorn, mobilen och i tv:n. 
            </p><p>
            All information om hur du kommer igång med Spotify hittar du på vår supportsida för Spotify. </p>
            
            <ul class="linkList">
                <li><a href="/redirect.jsp?id=18815&amp;devicetype=WEB&amp;type=CategoryReactionLink" target="_top">Läs mer och beställ&nbsp;</a></li>
            </ul>   
            
            <ul class="linkList">
                <li><a href="/redirect.jsp?id=18816&amp;devicetype=WEB&amp;type=CategoryReactionLink" target="_top">Support Spotify&nbsp;</a></li>
            </ul>   
            
        </div>
        
    </li>
    <li class="" style="height: auto; ">
        
        <h3 class="question" id="faq-question14626"><span id="12345" class="doNotLog questionClicked">Vad är Telia Smart?</span></h3>
        <div class="answer">
            <h3 id="faq-question14626"><span id="12345" class="doNotLog">Vad är Telia Smart?</span></h3>
            
            <p>Telia Smart är en tjänst som med hjälp av en gateway gör att du kan få ett trådlöst, säkert hemmanätverk. Surfa trådlöst med flera datorer, koppla in skrivare, spelkonsoler. Allt trådlöst!
            </p><p>
            Telia Smart har en egen supportsida, där vi har kom igång-guider och installationshandböcker för Telia Smart och dess utrustning. <br>
            </p>
            
            <ul class="linkList">
                <li><a...

CSS

body {
    font-family: Helvetica, Arial, sans-serif;
}
ul.questionsAndAnswers {
    margin-bottom:20px;
    margin-top:10px;
}

ul.questionsAndAnswers li {
    list-style-type:none;
    margin:0 0;
}

ul.questionsAndAnswers li ul {
    margin-bottom:0;
    padding-bottom:10px;
}
ul.questionsAndAnswers li ul li {
    border:none;
    list-style-type:disc;
    margin:0 0 4px 40px;
}

ul.questionsAndAnswers li h3 {
    color:#652d86;
    font-size:13px;
    margin:0;
}

ul.questionsAndAnswers li h3:hover {
    color:#b887d4;
    background-color:#F1F0EE;
    cursor:pointer;
}

ul.questionsAndAnswers li h3 span {
    display:block;
    padding:10px 25px 5px 10px;
}

ul.questionsAndAnswers li div.answer {
    display:none;
}

ul.questionsAndAnswers li.active {
    border-bottom:none;
    margin-bottom:0;
    margin-top:10;
    padding:0;
    overflow:auto;
}

ul.questionsAndAnswers li.active h3 { /*utklickad fråga i stora listan*/
    color:#652d86;
    font-size:13px;
    font-weight:bold;
    margin:0 0 0 -10px;
    cursor:default;
    padding:0;
}

ul.questionsAndAnswers li.active h3:hover { /*utklickad fråga i stora listan*/
    background-color:transparent;
}

ul.questionsAndAnswers li.active h3 span.questionClicked {
    display:none;
}

ul.questionsAndAnswers li.active div.answer { /*answer-section*/
    display:block;
    font-size:13px;
    line-height:20px;
    padding:0 10px 0 9px;
    background-color:#fafafa;
    
    list-style-type:none;
    -webkit-border-radius:5px;
    -moz-border-radius:5px;
    border-radius:5px;
    border: 1px solid #e0e0e0;
    border-radius:5px;
}

ul.questionsAndAnswers li div.answer p {
    margin:0;
    padding-bottom:9px;
}

ul.questionsAndAnswers li ul.linkList {
}

ul.questionsAndAnswers li ul.linkList li {
    list-style-type:none;
    margin:0 0 0 0;
    padding-top:0;
    padding-left:0;
    padding-bottom:5px;
}

p.showAll {
    font-size:13px;
    margin-bottom:20px;
    text-align:right;
   ...

JavaScript

(function($) {
    $.fn.accordionize = function(options) {
        var defaults = {
            trigger: '.question',
            speed: 600
        };

        options = $.extend({}, options, defaults);

        return this.each(function() {
            var $this = $(this);
            if (!$this.data('accordionize')) {
                $this.data('accordionize', new $.fn.accordionize.instance(this, options)._init(arguments));
            }
        }).data('accordionize');
    };

    $.extend($.fn.accordionize, {
        instance: function(element, options) {
            this.list = $(element);
            this.options = options;
            this.trigger = $(options.trigger, this.list);
            this.active = $('li.active', this.list);
        }
    });

    $.extend($.fn.accordionize.instance.prototype, {
        _init: function() {
            this.trigger.click($.proxy(this._toggle, this));
        },
        _toggle: function(e) {
            var self = this,
                p = $(e.currentTarget).parents('li'),
                speed1 = this.options.speed/4,
                speed2 = speed1*3;
            if (this.active.length) {
                this.active.slideUp(speed2, function() {
                    $(this).removeClass('active').slideDown(speed1);
                });
            }
            p.slideUp(speed1, function() {
                $(this).addClass('active').slideDown(speed2);
                self.active = p;
            });
            self.active = p;
        }
    });
    $(function() {
        $('.questionsAndAnswers').accordionize();
    });
}(jQuery));