アコーディオンメニューの作り方【 jQuery 】

この記事では,アコーディオンメニューの作り方について紹介します.

アコーディオンメニューとは,クリックしたら中身が表示されて,もう一度,クリックすると,中身が隠れるアコーディオンのような動きをするメニューのことです.

こんにちは1

と〜げ

ちなみに,これは,このブログのテーマ(Sango)のショートコードを使っています.

今回は,jQueryでのアコーディオンメニューの作り方を紹介していきます.

と〜げ

ただし,詳しい作り方を説明せず,ここでは,私が作成したサンプルコードと,私が実際に使った作り方の学び方ついて紹介します.

アコーディオンメニューの作り方

サンプルコード

こちらが,jQueryで作ったアコーディオンメニューです.

See the Pen
AccordionbyjQuery
by Yoshitaka (@YOSHITAKA3)
on CodePen.

htmlファイル:index.html
<!doctype html>
    
    
    

    
    

 

    • クリックして表示1

      +

       

      こんにちは1

       

       

 

    • クリックして表示2

      +

       

      こんにちは2

       

       

 

    • クリックして表示3

      +

       

      こんにちは3

       

       

 

 


cssファイル:style.css
.wrapper {
  background-color: #fff;
  text-align: center;
  padding-top:20px;
  padding-bottom: 20px;
  color: #5f5d60;
}

#list {
  width: 180px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.list-item {
  margin:10px;
  border-bottom:1px solid #ccc;
  position:relative;
  cursor:pointer;
  text-align: left;
}

.list-item h3 {
  font-size: 14px;
}

.list-item span {
  position:absolute;
  top:-3px;
  right:5px;
  color:#ccc;
  font-size:18px;
}

.answer {
  font-size: 12px;
  padding: 5px 0px;
  margin-bottom: 15px;
  display:none;
}

jsファイル:script.js
$(function(){
  $('.list-item').click(function() {
      var $answer = $(this).find('.answer')
      if($answer.hasClass('open')) {
        $answer.removeClass('open');
        $answer.slideUp();
        $(this).find('span').text('+') ;
      } else {
        $answer.addClass('open');
        $answer.slideDown();
        $(this).find('span').text('-') ;
      }
    });
});

学び方

私は,progateのjQueryの中級編で学びました.意外にも数時間で作れるようになりました.

 

他にも,cssでのみで作る方法や,Bootstrapを使って作る方法があります.

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です