CODEWITHSUNDEEP
javascriptjqueryaccordionslidetoggle
user3817083
user3817083

Reputation: 79

Accordion Functionality

I've put together an accordion script that works quite nicely (haven't cross-browser tested) and allows for lots of content inside each drawer to be accessed and visible on screen. A lot of times accordions open and cause issues with positioning after opening. Anyway, the code I'm using has a toggle active function and a scroll function being called on click. 

function toggleActive(link){ // Set anchor to active
    if ( $(link).hasClass("active") ) {
        $(link).removeClass("active");
    } else {
        $(link).addClass("active");
    };
};

function scrollToElement(selector, time, verticalOffset) { // param 1 = id, param 2 = speed
    time = typeof(time) != 'undefined' ? time : 1000;
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $(selector);
    offset = element.offset();
    offsetTop = offset.top + verticalOffset;
    $('html, body').animate({scrollTop: offsetTop }, time);
}

$('#accordion a').click(function(e) {
    var link = '#' + event.target.id
    $(".tab-content").slideUp();
    $(".tab").removeClass("active");
    toggleActive(link);
    $(link).next().slideToggle("fast");
    setTimeout(function() {
         scrollToElement($(link), 500); 
    }, 500);

    e.preventDefault();

});

So when clicked, all of the tabs are closed and made inactive, then the targeted "drawer" is opened and made active. If for any reason you click an already "active" drawer, it runs through the script again. What I'd like to do is place an IF statement that determines if what you just clicked is already open, and then simply close that drawer. Thanks in advance. I don't know why this is causing me headaches.

JSFiddle

Upvotes: 0

Views: 65

Answers (1)

Ali insan Soyaslan
Ali insan Soyaslan

Reputation: 846

As I understand you need another function as below:

function isAlreadyActive(link)
{
   if ( $(link).hasClass("active") ) {
        $(link).removeClass("active");
        return true;
    } else {
        return false;
    };
}

And you should call that function in your click event. This function will check if the link already active, if so just deactivates it and changes as you want.

$('#accordion a').click(function(e) {
    var link = '#' + event.target.id


    /* if it is already active, just deactivate it and exit*/
    if(isAlreadyActive(link)){ 
       return false;
    }



    $(".tab-content").slideUp();
    $(".tab").removeClass("active");
    toggleActive(link);
    $(link).next().slideToggle("fast");
    setTimeout(function() {
         scrollToElement($(link), 500); 
    }, 500);

    e.preventDefault();

});

I hope this helps.

Upvotes: 1

Related Questions