jquery toggle one div at time

Question

In my html page I have 2 divs with toggle function. I need to modify this js to let it close other div when one is open

my js

jQuery( "div.bk-toggle-header" ).click(function(){
jQuery(this).siblings('div.bk-toggle-content-outer-wrap').animate({
height: 'toggle'
}, 'slow', function() {                 
});
jQuery(this).parents('div.bk-toggle').toggleClass('bk-toggle-closed');
});

My html

    <div class="bk-toggle bk-toggle-closed">
    <div class="bk-toggle-header content-separator">
     <span class="title">First Tab</span>
    <span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap"> content
    </div></div>

    <div class="bk-toggle bk-toggle-closed">
    <div class="bk-toggle-header content-separator">
     <span class="title">Second Tab</span>
    <span class="bk-header-button"></span>
</div>
<div class="bk-toggle-content-outer-wrap" > content
    </div></div>

I would appreciate some help to toggle divs one at a time.

Answer 1

I can offer you an accordion class I've written for a previous project. It's fairly flexible and should accomplish what you're asking and more. Documentation is... non-existent, but I'm happy to answer any implementation questions if you choose to use it.

Here it is in a fiddle: http://jsfiddle.net/YjAgb/1/

UPDATE: Here is another fiddle working with your html structure: http://jsfiddle.net/WfWEP/

And, for the sake of being thorough, here's the demo code.

HTML

<div id='accordion'>
    <div class='accHead'>Head 1</div>
    <div class='accBody'>Body 1</div>
    <div class='accHead'>Head 2</div>
    <div class='accBody'>Body 2</div>
    <div class='accHead'>Head 3</div>
    <div class='accBody'>Body 3</div>
</div>

JavaScript

function accordion(options){

        this.index = options.index;
        var openChild = false;

        var self = this;
        var cEvent = {};
        var slideSpeed = 200;

        var headClass = '.accHead';
        var bodyClass = '.accBody';

        var $parent = options.parent;
        var $heads = $parent.find(headClass);
        var $bodies = $parent.find(bodyClass)

        $heads.on('click', function(e){

            var headClicked = $heads.index($(this)) + 1;
            var wasTriggered = (!e.clientX);

            var previousOpen = (headClicked == openChild) ? headClicked : openChild;
            var newOpen = (headClicked == openChild) ? false : headClicked;

            $heads.add($bodies).removeClass('on');

            if (!openChild) {
                var type = 'open';
            } else if(headClicked == openChild) {
                var type = 'close';
            } else {
                var type = 'swap';
            }

            cEvent = {  clicked: headClicked,
                        triggered: wasTriggered,
                        previousOpen: previousOpen,
                        openChild: newOpen,
                        headElement: $(this),
                        bodyElement: $bodies.index(headClicked - 1),
                        type: type,
                        accordion: self
                    };

            options.click_callback(cEvent);

            if (openChild) closeLevel((headClicked == openChild) ? headClicked : openChild);
            if ((!openChild) || (headClicked != openChild)) openLevel(headClicked);

            openChild = newOpen;

        });

        var openLevel = function(levelId)
        {
            var $bodyEl = $bodies.eq(levelId - 1);
            var $headEl = $heads.eq(levelId - 1);
            cEvent.bodyElement = $bodyEl;
            cEvent.headElement = $headEl;

            $headEl.addClass('on');
            $bodyEl.addClass('on').slideDown(slideSpeed, function(){
                options.open_callback(cEvent);
            })
        }

        var closeLevel = function(levelId)
        {
            var $bodyEl = $bodies.eq(levelId - 1);
            var $headEl = $heads.eq(levelId - 1);
            cEvent.bodyElement = $bodyEl;
            cEvent.headElement = $headEl;

            $bodyEl.slideUp(slideSpeed, function(){
                options.close_callback(cEvent);
            });
        }

        this.closeAll = function()
        {
            $heads.add($bodies).removeClass('on');
            $bodies.slideUp(0);
            return this;
        }

        this.click = function(levelId, caller)
        {
            if(caller.index != this.index) $heads.eq(levelId - 1).trigger('click');
        }

        this.getHead = function(levelId)
        {
            return $heads.eq(levelId - 1);
        }

        this.getBody = function(levelId)
        {
            return $bodies.eq(levelId - 1);
        }

        this.getParentAcc = function()
        {
            return $parent;
        }

    }

newAcc = new accordion({
    parent: $('#accordion'),
    click_callback: function(){},
    open_callback: function(){},
    close_callback: function(){},
    })
    .closeAll();

Answer 2

Working demo http://jsfiddle.net/f492H/

Solution below will toggle div one at a time. you could play around with other Jquery ways as well !like is(':visible')

API used:

• .slideToggle: http://api.jquery.com/slideToggle/
• .parents : http://api.jquery.com/parents/

Hope it fits your needs :)

Code

$('.bk-toggle-content-outer-wrap').hide();
$('.title').on('click', function (e) {
    $('.bk-toggle-content-outer-wrap').hide();
    $(this).parents('.bk-toggle').find('.bk-toggle-content-outer-wrap').slideToggle();
});