javascript,HTML,CSSでアコーディオンメニュー作成（jQueryなし）

シンプルなアコーディオンメニューをjavascriptで作成しました。

今回もJQueryなしで作ってみたいと思います。

デモ↓。

resultでデモが見れます。

See the Pen toggle by nishi (@nishi-094) on CodePen.

では行ってみましょう！

1. 1.HTMLでリストメニューを作る
2. 2.CSSで形を整える＆サブメニュー（クリックして開くところ）を隠しておく。別に表示するクラスも作っておく
3. 3.JSでクリックしたときに、サブメニューにCSSで表示の指定をしていたクラスを付与して表示する

1.HTMLでリストメニューを作る


<div class="accordion">
  <div class ="conteiner">
    <ul class="menu">menu</ul>
      <li class="contents">contents</li>
    <ul class="menu">menu2</ul>
      <li class="contents">contents2</li>
    <ul class="menu">menu3</ul>
      <li class="contents">contents3</li>
  </div>
</div>

<li class="contents">contents</li>

<li class="contents">contents2</li>

<li class="contents">contents3</li>

</div>

divの中に、<ul>と<li>を作成します。

今回の作成では<ul>はメニュー名、<li>はその下のコンテンツ名を表示しています。

この<li>は、初期表示で隠しておき、<ul>をクリックしたら表示させるように作ります。

2.CSSで形を整える＆サブメニュー（クリックして開くところ）を隠しておく。別に表示するクラスも作っておく

cssを見てみます。


.accordion{
    width: 100%;
    margin-left:20px;
    text-align: left;
}
.conteiner{
    width:250px;
}
.menu,.contents{
    max-width:100%;
    background-color: #000;
    color: #ffffff;
    margin: 0px;
    list-style: none;
}
.menu{
    font-weight: 900;
    border-bottom:solid 2px #aaaaaa;
    padding: 20px;
}
.contents{
    height: 0px;
    opacity: 0;
    transition-duration: 0.4s;
}
.open{
    height: 20px;
    opacity: 1;
    background-color: rgb(106, 107, 107);
    padding: 20px;
}

.accordion{

width: 100%;

margin-left:20px;

text-align: left;

}

.conteiner{

width:250px;

}

.menu,.contents{

max-width:100%;

background-color: #000;

color: #ffffff;

margin: 0px;

list-style: none;

}

.menu{

font-weight: 900;

border-bottom:solid 2px #aaaaaa;

padding: 20px;

}

.contents{

height: 0px;

opacity: 0;

transition-duration: 0.4s;

}

.open{

height: 20px;

opacity: 1;

background-color: rgb(106, 107, 107);

padding: 20px;

}

ここで注目するのは下の方にある、.contents{、.open{　のCSSです。

.contents{ は height:0px; 、opacity:0;としていて、高さ0、透明度0（完全に透明）としています。

.open{　はheight:20px; 、opacity:1;　としていて、高さ20px、透明度1（完全に不透明）としています。

.openクラスは、HTMLを見てみるとどこにも付与されていません。

この.openクラスを.contentクラスに追加付与することによって、表示させるようにします。

3.JSでクリックしたときに、サブメニューにCSSで表示の指定をしていたクラスを付与して表示する


//menuの値をすべて取得
    var menu = document.querySelectorAll(".menu");
    
    function toggle(){
          //menu配下を取得
        var contents = this.nextElementSibling;
        contents.classList.toggle("open");
    }
  
    for (var i = 0; i < menu.length; i++) {
        menu[i].addEventListener("click", toggle);
      }

//menuの値をすべて取得

var menu = document.querySelectorAll(".menu");

function toggle(){

//menu配下を取得

var contents = this.nextElementSibling;

contents.classList.toggle("open");

}

for (var i = 0; i < menu.length; i++) {

menu[i].addEventListener("click", toggle);

}

document.querySelectorAll(“.menu”);で.menuのクラスがついている要素ををすべて取得します。

ちなみにquerySelectorAllを使用すると、返す値がNodeListという形になります。（arrayじゃないのね・・・）

※NodeListについてはここを参照しました。

次に　function toggle() の中身を見ていきます。

this.nextElementSibling;ですが、ここではthis( = menu)の次の要素を取得するものになります。

つまり、menuの下の.contentsを取得してくれます。（これを変数に格納しています）

contents.classList.toggle(“open”);　は　

contents(作成した変数）にopenクラスがなければ付与、あれば削除するという形です。

下記のように使います。


　
//説明サンプル　
Element.classList.toggle( className)

//説明サンプル　

Element.classList.toggle( className)

ElementにclassNameがあれば削除、なければ追加ということらしいです。

それを、forでmenuをクリックしたら、toggle関数を実行する、を繰り返します。

※addEventListenerの記事はこちらにも↓

javascriptでボタン付きスライドを作成する（jQueryなし）

今回はJQueryなしで、画像のスライドを作った備忘録です。考え方としては、HTMLで画像（背景）の部分を作成する（CSSで整える） Javascriptのクリックイベントで1の画像URLを切り替えて表示させるという考え方で作成しています。

すると、クリックしたらopenクラスが付与されて、そのCSSが反映し、表示される、という形になります。

※おすすめのHTMLとCSSの学習本。実際のコードと、とにかく中身がオシャレなレイアウトが多いです。

リンク

<あわせて読みたい>

HTML/CSSで背景画像をフルスクリーンに設定する（スマホでの表示方法も！）

HTML/CSSで背景画像をフルスクリーンに設定する、グラデーションをかけるやり方の記録です

初心者向けでわかりやすい、JavaScript勉強におすすめの学習本

プログラミング初心者だったときに、JavaScriptの学習に読んでいた本のご紹介です。初心者向けの記事です。