簡単なアコーディオン

開くよ(開いてたら閉じるよ)
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
閉じるよ
OPEN/CLOSE
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
CLOSE

<div class="slideOpen">開くよ(開いてたら閉じるよ)</div>
<div class="slideBox">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  <div class="slideClose">閉じるよ</div>
</div>

 /*お好みで*/
.slideOpen,.slideClose {
	cursor:pointer;
	font-weight:bold;
	}
.slideClose {
	font-size:.8em;
	color: #f60;
	margin-bottom: 1em;
	}

    $(function(){
        $(".slideBox").after().hide();
        $(".slideOpen").click(function(){
            //$(".slideBox").slideToggle("slow"); //閉じる項目が1つのときはこっち
            $(this).next(".slideBox").slideToggle("slow"); //閉じる項目が2つ以上あるときはこっち
        });
        $(".slideClose").click(function(){
            $(this).parent().slideToggle();
        });
    });
OPEN
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
OPEN
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
OPEN
Lorem ipsum dolor sit amet, consectetur adipisicing elit...

<div class="toggleOpen">OPEN</div>
<div class="toggleBox">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
</div>

    $(function(){
        $(".toggleBox").hide();
        $(".toggleOpen").click(function(){
          $(this).next().slideToggle("slow").siblings(".toggleBox").slideUp();
        });
    });

TOP