CODEWITHSUNDEEP
javascriptjquerycss
medina
medina

Reputation: 776

Accordion to go vertical instead of horizontal

I'm not that experienced with Jquery so pardon the basic question. I am using this simple jquery accordian http://www.switchroyale.com/vallenato/

Is it possible to change the jquery or css to make it go vertical instead of the horizontal. There doesn't seem to be much documentation on the matter. Any help would be appreciated.

This is the javascript

$(document).ready(function()
{
    //Add Inactive Class To All Accordion Headers
    $('.accordion-header').toggleClass('inactive-header');

    //Set The Accordion Content Width
    var contentwidth = $('.accordion-header').width();
    $('.accordion-content').css({'width' : contentwidth });

    //Open The First Accordion Section When Page Loads
    $('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
    $('.accordion-content').first().slideDown().toggleClass('open-content');

    // The Accordion Effect
    $('.accordion-header').click(function () {
        if($(this).is('.inactive-header')) {
            $('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }

        else {
            $(this).toggleClass('active-header').toggleClass('inactive-header');
            $(this).next().slideToggle().toggleClass('open-content');
        }
    });

    return false;
});

and this is this CSS

#accordion-container {
    font-size: 13px;
    background: #ffffff;
    padding: 5px 10px 10px 10px;
    border: 1px solid #cccccc;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-box-shadow: 0 5px 15px #cccccc;
    -webkit-box-shadow: 0 5px 15px #cccccc;
    box-shadow: 0 5px 15px #cccccc;
}

.accordion-header {
    font-size: 16px;
    background: #ebebeb;
    margin: 5px 0 0 0;
    padding: 5px 20px;
    border: 1px solid #cccccc;
    cursor: pointer;
    color: #666666;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.active-header {
    -moz-border-radius: 5px 5px 0 0;
    -webkit-border-radius: 5px 5px 0 0;
    border-radius: 5px 5px 0 0;
    background: url(images/active-header.gif) #cef98d;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.active-header:hover {
    background: url(images/active-header.gif) #c6f089;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.inactive-header {
    background: url(images/inactive-header.gif) #ebebeb;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.inactive-header:hover {
    background: url(images/inactive-header.gif) #f5f5f5;
    background-repeat: no-repeat;
    background-position: right 50%;
}

.accordion-content {
    display: none;
    padding: 20px;
    background: #ffffff;
    border: 1px solid #cccccc;
    border-top: 0;
    -moz-border-radius: 0 0 5px 5px;
    -webkit-border-radius: 0 0 5px 5px;
    border-radius: 0 0 5px 5px;
}

Upvotes: 0

Views: 575

Answers (1)

Matt Burland
Matt Burland

Reputation: 45135

At the very least, you'd have to float the accordion-content left and then replace slideToggle with a custom .animate(). The slide in jQuery only does up and down not left or right. I guess you'd also have to rotate the headers and float them too.

Upvotes: 1

Related Questions