アコーディオンメニューをつくる

CSSだけでつくる
JQを利用してつくる

CSSだけでつくる

inputとlabelを使って、HTMLとCSSだけでアコーディオンメニューをつくります。

できあがり

<br /> See the Pen <a href="https://codepen.io/ryo0613/pen/GRqzPYq"><br /> </a> by shiramizu (<a href="https://codepen.io/ryo0613">@ryo0613</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

HTML

<input id="check1" class="check" type="checkbox">
<label class="label" for="check1">ラベル</label>
<div class="content">
    <p>テキストテキストテキストテキストテキストテキスト</p>
</div>
<input id="check2" class="check" type="checkbox">
<label class="label" for="check2">ラベル</label>
<div class="content">
    <p>テキストテキストテキストテキストテキストテキスト</p>
</div>

<p>テキストテキストテキストテキストテキストテキスト</p>

</div>

<p>テキストテキストテキストテキストテキストテキスト</p>

</div>

CSS

.check{
    display: none;
}
.label{
    background: #666;
    color: #fff;
    display: block;
    margin-bottom: 1px;
    padding: 10px;
    position:relative;
    width:300px;
}
.content{
    border: 1px solid #eee;
    height: 0;
    opacity: 0;
    padding: 0 10px;
    transition: .5s; 
    width:300px;
}
.content p{
    margin:0;
}
.check:checked + .label + .content{
    height: 50px;
    opacity: 1;
    padding: 10px;
}
/* 三角形 */
.label:after{
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 13px 7px 0 7px;
    border-color: #fff transparent transparent transparent;
    position: absolute;
    right: 1em;
    top: 15px;
}
.check:checked + .label:after{
    content:"";
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 7px 13px 7px;
    border-color: transparent transparent #fff transparent;
}

.check{

display: none;

}

.label{

background: #666;

color: #fff;

display: block;

margin-bottom: 1px;

padding: 10px;

position:relative;

width:300px;

}

.content{

border: 1px solid #eee;

height: 0;

opacity: 0;

padding: 0 10px;

transition: .5s;

width:300px;

}

.content p{

margin:0;

}

.check:checked + .label + .content{

height: 50px;

opacity: 1;

padding: 10px;

}

/* 三角形 */

.label:after{

content:"";

width: 0;

height: 0;

border-style: solid;

border-width: 13px 7px 0 7px;

border-color: #fff transparent transparent transparent;

position: absolute;

right: 1em;

top: 15px;

}

.check:checked + .label:after{

content:"";

width: 0;

height: 0;

border-style: solid;

border-width: 0 7px 13px 7px;

border-color: transparent transparent #fff transparent;

}

ただ、こちらの方法だと、アコーディオンの中身（content）の高さを指定する必要があります。
そのため、コンテンツ内のテキストの長さが変わるときは使いにくいです。
高さを気にせずアコーディオンメニューを使う場合には、次のJSを利用した方法がおすすめです。

JQを利用してつくる

slideToggleを使って、アコーディオンメニューを動かします。JQを利用しますので、読み込みをお忘れなく。

できあがり

<br /> See the Pen <a href="https://codepen.io/ryo0613/pen/eYYxvmg"><br /> </a> by shiramizu (<a href="https://codepen.io/ryo0613">@ryo0613</a>)<br /> on <a href="https://codepen.io">CodePen</a>.<br />

HTML

<dl class="qanda-box">
                  <dt class="q-tt" data-target="qanda-01">テキストテキストテキストテキストテキストテキストテキスト</dt>
                  <dd id="qanda-01" class="a-tt">テキストテキストテキストテキスト</dd>
                </dl>
                <dl class="qanda-box">
                  <dt class="q-tt" data-target="qanda-02">テキストテキストテキストテキストテキストテキストテキスト</dt>
                  <dd id="qanda-02" class="a-tt">テキストテキストテキストテキストテキストテキストテキストテキスト</dd>
                </dl>
                <dl class="qanda-box">
                  <dt class="q-tt" data-target="qanda-03">テキストテキストテキストテキストテキストテキスト</dt>
                  <dd id="qanda-03" class="a-tt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>
                </dl>

<dt class="q-tt" data-target="qanda-01">テキストテキストテキストテキストテキストテキストテキスト</dt>

<dd id="qanda-01" class="a-tt">テキストテキストテキストテキスト</dd>

</dl>

<dt class="q-tt" data-target="qanda-02">テキストテキストテキストテキストテキストテキストテキスト</dt>

<dd id="qanda-02" class="a-tt">テキストテキストテキストテキストテキストテキストテキストテキスト</dd>

</dl>

<dt class="q-tt" data-target="qanda-03">テキストテキストテキストテキストテキストテキスト</dt>

<dd id="qanda-03" class="a-tt">テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</dd>

</dl>

CSS

.qanda-box{
  margin-bottom: 20px;
  width:300px;
}
.qanda-box:last-child{
  margin-bottom:0px;
}
.q-tt{
  padding:10px 30px 10px 10px;
  background: rgba(136, 193, 25, 0.2);
  position: relative;
  cursor : pointer;
}
.q-tt:after{
  content:"▼";
  position: absolute;
  right: 10px;
  color:#666;
  top:50%;
  transform: translateY(-50%);
  
}
.q-tt.open:after {
  transform:translateY(-50%) rotate(180deg) ;

}
.a-tt{
  display: none;
  padding:10px 5px 0;
  margin:0;
}

.qanda-box{

margin-bottom: 20px;

width:300px;

}

.qanda-box:last-child{

margin-bottom:0px;

}

.q-tt{

padding:10px 30px 10px 10px;

background: rgba(136, 193, 25, 0.2);

position: relative;

cursor : pointer;

}

.q-tt:after{

content:"▼";

position: absolute;

right: 10px;

color:#666;

top:50%;

transform: translateY(-50%);

}

.q-tt.open:after {

transform:translateY(-50%) rotate(180deg) ;

}

.a-tt{

display: none;

padding:10px 5px 0;

margin:0;

}

JS

$(function()
{
	$( '.q-tt' ).click( function()
	{
    // [data-target]の属性値を代入する
		var target = $( this ).data( 'target' ) ;
    // [target]と同じ名前のIDを持つ要素に[slideToggle()]を実行する
		$( '#' + target ).slideToggle() ;
    //クリックした時にopenというクラスを付与、矢印動かすため
    $(this).toggleClass('open');

		// 終了
		return false ;
	} ) ;
}) ;

$(function()

{

$( '.q-tt' ).click( function()

{

// [data-target]の属性値を代入する

var target = $( this ).data( 'target' ) ;

// [target]と同じ名前のIDを持つ要素に[slideToggle()]を実行する

$( '#' + target ).slideToggle() ;

//クリックした時にopenというクラスを付与、矢印動かすため

$(this).toggleClass('open');

// 終了

return false ;

} ) ;

}) ;