고정 수량이 없는 아코디언

규격

여러 상황

오직 한 자리

여러 상황

<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>

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;
}

$(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');            
    });
});

오직 한 자리

<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>```