CODEWITHSUNDEEP
jqueryaccordion
jlanza
jlanza

Reputation: 1258

Accordion different widths jquery

I want to set accordion in this setup using jquery:

 |      Header 1      |
 |Header 2 | Header 3 |
 |      Header 4      |

Each one is an accordion item. Is it possible and how? I want also if header 2 is open to get header 3 opened.

TA

Upvotes: 0

Views: 1019

Answers (2)

ngen
ngen

Reputation: 8966

Like this? http://jsfiddle.net/CppLB/1/

HTML:

 <div id="wrapper">
        <div class="accordionButton">Header1</div>
    <div class="accordionContent">Content 1 goes here</div>
        <div class="accordionButton" class="buttonHalf">
            <div class="buttonHalf" id="borderRight">Header 2</div>
            <div class="buttonHalf">Header 3</div>
        </div>
        <div class="accordionContent" class="buttonHalf">
            <div class="buttonHalf">Content 2 goes here</div>
            <div class="buttonHalf">Content 3 goes here</div>
        </div>
        <div class="accordionButton">Header 4</div>
        <div class="accordionContent">Content 4 goes here</div>
</div>

CSS:

 #wrapper {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    }

.accordionButton {    
    width: 100%;
    float: left;
    background: #003366;
    border-bottom: 1px solid #FFFFFF;
    cursor: pointer;
    text-align: center;
    }

.accordionContent {    
    width: 100%;
    float: left;
    background: #95B1CE;
    display: none;
}

.buttonHalf {
    width: 49%;
    float: left;
}

#borderRight {
    border-right: 1px solid black;
}

JS:

$(document).ready(function() {

    //ACCORDION BUTTON ACTION    
    $('div.accordionButton').click(function() {
        $('div.accordionContent').slideUp('normal');    
        $(this).next().slideDown('normal');
    });

    //HIDE THE DIVS ON PAGE LOAD    
    $("div.accordionContent").hide();

});

Upvotes: 2

diracdeltafunk
diracdeltafunk

Reputation: 1184

Use this sort of format:

|       Header 1       |
|   Header 2 Header 3  |
|       Header 4       |

where the header 2 header 3 part is just two bits of text in one header tag (or you can use tables in the header tag) and the div for that part of the accordion contains a table or css formatting to make the effect you described happen... if you want each headiing to look individual (with rounded corners) use css3.

Upvotes: 1

Related Questions