> On Aug 6, 5:23 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
> >http://www.learningjquery.com/2007/02/more-showing-more-hiding

To follow up, here's how trivial it is (with jQuery) to write a very
basic accordion-like widget which does not support Highlander
behaviour ("there can be only one").

HTML (same structure as the official Accordion plugin):

        <div id="SlinkyMain">
        <div>
                <div class="SlinkyHeader">About</div>
                <div class='SlinkyContent'>This is an application skeleton. 
Edit to
suit.</div>
        </div>
        <div>
                <div class="SlinkyHeader">Dice</div>
                <div class='SlinkyContent'>
                                <span id='DiceResultsTarget'>Click a die 
button</span><br/>
                                <button id='Button1d6'></button><br/>
                                <button id='Button2d6'></button><br/>
                                <button id='Button3d6'></button><br/>
                </div>
        </div>
        </div><!-- #SlinkyMain -->

(The classes are not significant - use whatever you like.)

JS:

jQuery.fn.initSlinky = function( props ) {
        props = jQuery.extend({
                speed:'fast'
                },
                props ? props : {});
        var wrappers = $('> div',this);
        var contents = $('div:last',wrappers);
        contents.hide();
        var heads = $('div:first',wrappers);
        heads.click( function() {
                $(this).next().slideToggle(props.speed);
        });
        return this;
};

(It could of course be written in less code, but i'm about to add a
bunch of stuff where the local vars will come in handy.)

Thanks again, Karl :).

Reply via email to