アコーディオン異なる幅はjqueryの

Question

私はjqueryのを使用して、このセットアップでアコーディオンを設定したい：

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

それぞれがアコーディオンのアイテムです。それは可能なのか？ヘッダー2を開いてヘッダー3を開く場合も必要です。

TA

Answer 1

このようにします。 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(); 

}); 

Answer 2

使用形式のこの種：

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

ヘッダ2ヘッダ3の部分は1つのヘッダタグ内のテキストのわずか2ビットである（または、ヘッダタグでテーブルを使用することができます）アコーディオンのその部分のdivには、記述したような効果を出すためのテーブルやCSSの書式設定が含まれています...各見出しに個々の（丸いコーナーで）見えるようにするにはcss3を使います。