開閉可能なread more

by Natsu

HTML

<p id="open">すべて開く</p>
<p id="close">すべて閉じる</p>

<ul>
<li>
<h3>タイトル</h3>
<div class="switch">more</div>
<div class="box_more">
ここにコンテンツを入れます
</div>
</li>
<li>
<h3>タイトル</h3>
<div class="switch">more</div>
<div class="box_more">
ここにコンテンツを入れます<br />コンテンツを入れます
</div>
</li>
<li>
<h3>タイトル</h3>
<div class="switch">more</div>
<div class="box_more">
ここにコンテンツを入れます
</div>
</li>
<li>
<h3>タイトル</h3>
<div class="switch">more</div>
<div class="box_more">
ここにコンテンツを入れます<br />コンテンツを入れます<br />コンテンツを入れます
</div>
</li>
<li>
<h3>タイトル</h3>
<div class="switch">more</div>
<div class="box_more">
ここにコンテンツを入れます
</div>
</li>
</ul>

CSS

p , li {
    font-size:85%;
}

#close , #open , .switch {
	cursor:pointer;
	display:inline-block;
	padding:0 5px; 
	text-align:right;
	color:#1155DD;
	text-decoration:underline;
	line-height:1.4;
}


.box_more {
	display:none;
}



h3 {
	display:inline-block;
}

li {
	list-style:none;
	padding:5px 15px;
	border:1px solid  #ccc;
	border-top:none;
}

li:first-child {
	border-top:1px solid  #ccc;
}

JavaScript

$( function() {
	
	$( ".switch" ). click( function() {

		$(this).next( ".box_more" ) . animate( { height: "toggle" }, "slow" )

		if ($(this).text() == "more" ) {

			$(this).text( "close" );
			$(this).css( "color","#fff" );
			$(this).css( "background","#999" );
}
		else{
			$(this).text( "more" );
			$(this).css( "color","#1155DD" );
			$(this).css( "background","none" );
};
} );



$( "#close" ). click( function() {

		$( ".box_more" ) . animate( { height: "hide" }, "slow" )
		$( ".switch" ).text( "more" );
		$( ".switch" ).css( "color","#4c4c4c" );
		$( ".switch" ).css( "background","none" );

} );


$( "#open" ). click( function() {

		$( ".box_more" ) . animate( { height: "show" }, "slow" )
		$( ".switch" ).text( "close" );
		$( ".switch" ).css( "color","#fff" );
		$( ".switch" ).css( "background","#999" );

} );



} );