Semantic UIのAccordionを使い方(テーブルの展開に応用)

web開発をしている中で，semanticを良く使っています． しかし，semanticのmoduleの導入の仕方・使い方が分からなかったので，メモです！！

実現したいこと

semantic-ui.com のようなアコーディオンやモーダルウィンドウを実装した この中で，今回はアコーディオンを実装します

semantic UIの導入

moduleを使うには，以下を読み込みます（CDN）

  • semantic UI のcssの読み込み
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  • semantic ui のjsの読み込み
<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

bodyの下の部分は以下のようにします

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Semantic UI を読み込む -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui-css@2.4.1/semantic.min.css">
    <!-- jqueryの読み込み -->
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>
    <title>Document</title>
</head>

初めから展開

f:id:ka1357amnbpdr:20200105171443g:plain

    <div class="ui main continer">
        <div class="ui styled accordion">
            <div class="title active"><i class="dropdown icon"></i> レベル1 </div>
            <div class="content active">Welcome to level 1 </div>
        </div>
    </div>

$(".ui.accordion").accordion();

初めは閉じている

    <div class="ui main continer">
        <div class="ui styled accordion">
            <div class="title"><i class="dropdown icon"></i> レベル1 </div>
            <div class="content">Welcome to level 1 </div>
        </div>
    </div>

テーブルの展開

成果物(gif)

f:id:ka1357amnbpdr:20200105183342g:plain

実装内容

テーブルの行を選択し，その行の下に説明文などを展開するもの

コード

    <div class="ui main continer">
        <table class="ui selectable celled table">
            <thead>
                <tr>
                    <th>title</th>
                </tr>
            </thead>
            <tbody class="ui accordion">
                <tr class="active title">
                    <td >sample1</td>
                </tr>
                <div class="active content">
                    <td>detail1</td>
                </div>
                <tr class="active title">
                    <td >sample2</td>
                </tr>
                <div class="active content">
                    <td>detail2</td>
                </div>
                <tr class="active title">
                    <td >sample3</td>
                </tr>
                <div class="active content">
                    <td>detail3</td>
                </div>
            </td>
            </tbody>
        </table>
    </div>

$(".ui.accordion").accordion('close others',1);

参考サイト

qiita.com

webkaru.net