数が決まっていないアコーディオン

CMSなどで、その都度表示される数が変わる場合のアコーディオンです。
自分用の備忘記録です。

## 仕様

### 複数の場合

* タイトル：表示
* 内容：非表示
* トグルボタン：表示

### ひとつだけの場合

* タイトル：表示
* 内容：表示
* トグルボタン：非表示


## 複数の場合

![複数close.png](https://qiita-image-store.s3.amazonaws.com/0/34634/0e159ba9-05c7-170e-6270-14d11f6347fc.png)

![複数open1.png](https://qiita-image-store.s3.amazonaws.com/0/34634/a2410e85-2b76-7dfd-8e1d-74ed32277174.png)



```html
<table>
    <tbody>
        <tr>
            <th>
                やさい
                <span class="toggleBtn show"><img src="down.png" width="20" heigh="13" alt="open"></span>
                <span class="toggleBtn"><img src="up.png" width="20" heigh="13" alt="close"></span>
            </th>
        </tr>
        <tr class="detail">
            <td>
                <div>キャベツ</div>
                <div>キュウリ</div>
                <div>ニンジン</div>
            </td>
        </tr>
        <tr>
            <th>
                くだもの
                <span class="toggleBtn show"><img src="down.png" width="20" heigh="13" alt="open"></span>
                <span class="toggleBtn"><img src="up.png" width="20" heigh="13" alt="close"></span>
            </th>
        </tr>
        <tr class="detail">
            <td>
                <div>イチゴ</div>
                <div>バナナ</div>
                <div>オレンジ</div>
            </td>
        </tr>
        <tr>
            <th>
                にく
                <span class="toggleBtn show"><img src="down.png" width="20" heigh="13" alt="open"></span>
                <span class="toggleBtn"><img src="up.png" width="20" heigh="13" alt="close"></span>
            </th>
        </tr>
        <tr class="detail">
            <td>
                <div>ギュウ</div>
                <div>ブタ</div>
                <div>トリ</div>
            </td>
        </tr>
    </tbody>
</table>

```

```css
table{
    table-layout: fixed;
    background-color: #2b2b2b;
    color: #d2d2d2;
}
th,td{
    width: 130px;
    padding: 8px 10px;
    text-align: left;
    line-height: 1.5;
}
th{
    position: relative;
    border: 1px solid #121212;
    background-color: #1f1f1f;
}
.toggleBtn{
    position: absolute;
    top: 10px;
    right: 10px;
    display: none;
}
.toggleBtn.show{
    display: inline;
}
.detail{
    display: none;
}
.detail.show{
    display: table-row;
}
```

```js
$(function(){
    var detail = $('tr.detail');
    var detailCnt = detail.length;
    var toggleBtn = $('span.toggleBtn');
    //ひとつだけの場合、内容を表示、トグルボタン非表示
    if(detailCnt == 1){
        detail.addClass('show');
        toggleBtn.removeClass('show');
    }
    //トグルボタンを押したとき、ボタンと内容のトグル
    toggleBtn.click(function(){
        var index = toggleBtn.index(this);
        var showdetail = Math.floor(index/2);
        var showBtnIndex;
        if(index%2 == 0){
            showBtnIndex = index+1;
            detail.eq(showdetail).addClass('show');
        }else{
            showBtnIndex = index-1;
            detail.eq(showdetail).removeClass('show');
        }
        $(this).removeClass('show');
        toggleBtn.eq(showBtnIndex).addClass('show');            
    });
});
```


## ひとつだけの場合

![ひとつだけ.png](https://qiita-image-store.s3.amazonaws.com/0/34634/5d6e0748-33b8-2e9e-90a6-51b98f793251.png)


```html
<table>
    <tbody>
        <tr>
            <th>
                やさい
                <span class="toggleBtn show"><img src="down.png" width="20" heigh="13" alt="open"></span>
                <span class="toggleBtn"><img src="up.png" width="20" heigh="13" alt="close"></span>
            </th>
        </tr>
        <tr class="detail">
            <td>
                <div>キャベツ</div>
                <div>キュウリ</div>
                <div>ニンジン</div>
            </td>
        </tr>
        <!--tr>
            <th>
                くだもの
                <span class="toggleBtn show"><img src="down.png" width="20" heigh="13" alt="open"></span>
                <span class="toggleBtn"><img src="up.png" width="20" heigh="13" alt="close"></span>
            </th>
        </tr>
        <tr class="detail">
            <td>
                <div>イチゴ</div>
                <div>バナナ</div>
                <div>オレンジ</div>
            </td>
        </tr>
        <tr>
            <th>
                にく
                <span class="toggleBtn show"><img src="down.png" width="20" heigh="13" alt="open"></span>
                <span class="toggleBtn"><img src="up.png" width="20" heigh="13" alt="close"></span>
            </th>
        </tr>
        <tr class="detail">
            <td>
                <div>ギュウ</div>
                <div>ブタ</div>
                <div>トリ</div>
            </td>
        </tr-->
    </tbody>
</table>```