Аккордеон разной ширины - PullRequest
Новая
       6

Аккордеон разной ширины

0 голосов
/ 17 июня 2011

Я хочу установить аккордеон в этой настройке, используя jquery: 

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

Каждый из них является элементом аккордеона.Возможно ли это и как?Я хочу также, если заголовок 2 открыт, чтобы открыть заголовок 3.

TA

Ответы [ 2 ]

2 голосов
/ 17 июня 2011

Как это? 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();

});
1 голос
/ 17 июня 2011

Используйте этот формат: 

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

где часть заголовка 3 заголовка 3 - это просто два бита текста в одном теге заголовка (или вы можете использовать таблицы в теге заголовка), а div для этой части аккордеона содержит форматирование таблицы или css для создания эффекта вы описали случай ... если вы хотите, чтобы каждый заголовок выглядел индивидуально (с закругленными углами), используйте css3.

...