【初心者】JavaScriptでtoggleを使ってアコーディオンするプログラミングを解説【プログラミング初心者の入門講座】

2020年5月8日システムJavaScript,プログラミング初心者

【初心者】JavaScriptでtoggleを使ってアコーディオンするプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptでtoggleを使ってアコーディオンするプログラミングを解説【プログラミング初心者の入門講座】

どうも、UT(@ut_1029)です。

JavaScripttoggleアコーディオン(開閉)するプログラミングの解説です。

toggleとは

toggleは、JQueryのメソッドです。対象のHTML要素に対して表示/非表示を簡単に切り替ることが出来ます。

【勉強】JavaScriptのtoggleでアコーディオン【プログラミング初心者の入門講座】#StudyWithMe

JavaScriptのtoggleでアコーディオンのサンプルコード

JavaScripttoggleアコーディオンをプログラミングしたサンプルコードです。

<html>
<head>
    <meta charset="utf-8">
    <title>Toggle Sample</title>
    <style>
        body {
            text-align: center;
        }
        .nav dt {
            font-weight: bold;
        }
        .nav dl {
            display: none;
        }
    </style>
</head>
<body>
    <h1>Toggle Sample</h1>
    <dl class="nav">
        <dt class="menu">menu(1)</dt>
        <dl>title(1-1)</dl>
        <dl>title(1-2)</dl>
    </dl>
    <dl class="nav">
        <dt class="menu">menu(2)</dt>
        <dl>title(2-1)</dl>
        <dl>title(2-2)</dl>
    </dl>
    <button type="button" class="btnToggle">toggle</button>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.btnToggle').click(function () {
                $('.nav').find('dl').slideToggle();
            });

            $('.menu').click(function () {
                $(this).parent('dl').find('dl').slideToggle();
            });
        });
    </script>
</body>
</html>

JavaScriptのtoggleでアコーディオンを解説

JavaScripttoggleアコーディオンするサンプルコードを解説します。

HTML部分

文字コードを指定

HTMLheadタグ内にmetaタグcharset(文字コード)をUTF-8に指定します。

<meta charset="utf-8">

Webページ文字化けする原因は、大体がmetaタグ文字コードを指定出来ていない事が多いです。

<dl class="nav">
    <dt class="menu">menu(1)</dt>
    <dl>title(1-1)</dl>
    <dl>title(1-2)</dl>
</dl>
<dl class="nav">
    <dt class="menu">menu(2)</dt>
    <dl>title(2-1)</dl>
    <dl>title(2-2)</dl>
</dl>
<button type="button" class="btnToggle">toggle</button>

JQueryをCDNで読み込む

JQueryCDNで読み込むようにしました。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
CDNとは

Content Delivery Networkの略です。
簡単に言うと、リソース(CSSJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。
リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。

CSS部分

CSSでdlタグのリストを非表示となるようにスタイルします。
(JavaScripttoggleで表示/非表示が切り替わるようにする)

body {
    text-align: center;
}
.nav dt {
    font-weight: bold;
}
.nav dl {
    display: none;
}

JavaScript部分

JavaScript部分を解説します。

読み込み完了で実行させる

読み込み完了時に実行するように「$(document).ready();」と定義します。

$(document).ready(function () {

});

ボタンのクリックイベントを定義

class名が’btnToggle'のボタンにクリックイベントを定義します。

$('.btnToggle').click(function () {

});

dlタグをtoggle

HTMLのdlタグをtoggleしてメニューが開閉(アコーディオン)するようにします。

$('.nav').find('dl').slideToggle();

クリックイベントを定義

class名が’menu'のdtタグにクリックイベントを定義します。

$('.menu').click(function () {

});

dlタグをtoggle

HTMLのdlタグをtoggleしてメニューが開閉(アコーディオン)するようにします。

$(this).parent('dl').find('dl').slideToggle();

まとめ

今回はJavaScripttoggleでアコーディオンを実装したサンプルコードのプログラミング解説をしました。

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年5月8日システムJavaScript,プログラミング初心者

Posted by UT