クリックで開閉するアコーディオンパネル

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

[main.js]JavaScript

  //tab
  $(function(){
  $(".mod_panel").each(function() {
    var id = "tab--" + $(this).index();
    var panelbtn=$(this).find(".panelTitle");
		var closebtn=$(this).find(".mod_panel_inner_btn .closebtn");
    var panelinner=$(this).find(".mod_panel_inner");
    $(panelbtn).wrapInner('<a href="javascript:void(0)" aria-expanded="false" aria-controls="'+ id +'">');
    $(panelinner).attr({"aria-hidden":"true","id":id});
    var panelbtnlink=$(this).find(".panelTitle a");
		
  //命令
    $(function(){
      $(panelinner).addClass("close");
      $(panelbtnlink).addClass("close").attr({title:"ここをクリックしてパネルを開きます。"});
      $(panelbtnlink).click(function(){
        if($(panelinner).css("display")=="none"){
          $(panelinner).slideDown("fast").removeClass("close").attr("aria-hidden","false");
          $(this).removeClass("close").addClass("open").attr("aria-expanded","true");}else{
          $(panelinner).slideUp("fast").removeClass("open").addClass("close").attr("aria-hidden","true");
          $(this).removeClass("open").addClass("close").attr("aria-expanded","false");
        }
      });
  //close
      $(closebtn).click(function(){
          $(panelinner).slideUp("fast").removeClass("open").addClass("close").attr("aria-hidden","true");
					$(panelbtnlink).removeClass("open").addClass("close").attr("aria-expanded","false");
      });
    });
  });
  });

HTMl

<div class="mod_panel">
<h3 class="panelTitle">パネルタイトル</h3>
<div class="mod_panel_inner">
<p>ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。</p>
<p>ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。</p>
<p>ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。</p>
<p>ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。ここに中身が入りますよ。</p>
<div class="mod_panel_inner_btn">
<p class="closebtn"><a href="javascript:void(0)">閉じる</a></p>
<!-- /.mod_panel_inner_btn --></div>
<!-- /.mod_panel_inner --></div>
<!-- /.mod_panel --></div>

CSS

/* mod_panel
-----------------------------------------*/
.mod_panel {
 margin: 0 0 3px 0;
}
.mod_panel .panelTitle a{
 display: block;
 background-color: #d7d7d7;
 padding: 15px 10px 15px 10px;
 position: relative;
 color: #666;
 border: 1px solid #c1c1c1;
 text-decoration: none;
}
.mod_panel .panelTitle a:after {
 position: absolute;
 top: 30%;
 right: 10px;
 color: #666;
 content: " \f078";
 font-family: FontAwesome;
}
.mod_panel .panelTitle.open a:after {
 content: " \f077";
 font-family: FontAwesome;
}
.mod_panel_inner {
 padding: 10px 0 0 0;
}
.mod_panel_inner.close {
 display: none;
}
.mod_panel_inner_btn p.closebtn {
 display: block;
 cursor: pointer;
 padding: 15px 20px;
 text-align: center;
}
.mod_panel_inner_btn p.closebtn a {
 background-color: #CCC;
 color: #666;
 text-decoration: none;
 border-radius: 4px;
 display: inline-block;
 padding: 5px 10px 7px 10px;
}
.mod_panel_inner_btn p.closebtn a::before {
 content: " ";
 display: inline-block;
 font-family: FontAwesome;
 font-size: 120%;
 margin: 0 10px 0 0;
}