スライドで表示するコンテンツが1つの場合は単純ですが、複数ある場合と閉じるボタンがある場合という条件があるスライドコンテンツの実装方法です。
デモ
HTML
index.html
<ul class="slideContent">
<li>
<h2>見出しテキスト1</h2>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, quis, repudiandae neque incidunt quasi cumque quia id laudantium aspernatur impedit accusantium amet atque soluta tempore ex sequi pariatur blanditiis magnam.</p>
<p class="close">閉じる</p>
</div>
</li>
<li>
<h2>見出しテキスト2</h2>
<div class="inner">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, quis, repudiandae neque incidunt quasi cumque quia id laudantium aspernatur impedit accusantium amet atque soluta tempore ex sequi pariatur blanditiis magnam.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam, quis, repudiandae neque incidunt quasi cumque quia id laudantium aspernatur impedit accusantium amet atque soluta tempore ex sequi pariatur blanditiis magnam.</p>
<p class="close">閉じる</p>
</div>
</li>
～～中略～～
</ul>
CSS
CSSは見た目の調整以外では、最初にコンテンツを非表示にしておくために以下の指定をします。
style.css
.inner {
display: none;
}
JavaScript
script.js
$(function(){
if($('.slideContent').size() > 0){
//コンテンツの数
var slideContentNum = $('.slideContent li').length;
//コンテンツ分のフラグ
var navFlag = new Array();
for( i = 0 ; i < slideContentNum ; i++ ){
navFlag[i] = true;
};
//クリックした時の処理
$('.slideContent h2').click(function(){
//何個目のものがクリックされたかを確認
var clickNum = $(this).parent().index();
//フラグがtrueだったら
if(navFlag[clickNum]){
$(this).next('.inner').slideDown();
$(this).addClass('current');
navFlag[clickNum] = false;
}
else{
$(this).next('.inner').slideUp();
$(this).removeClass('current');
navFlag[clickNum] = true;
}
});
//閉じるをクリックした時の処理
$('.slideContent .close').click(function(){
var closeNum = ($(this).parents('li').index());
$(this).parents('.inner').slideUp('fast');
$(this).parents('.inner').prev('h2').removeClass('current');
navFlag[closeNum] = true;
});
}
});
親のliが何番目のものかでフラグの番号をつけて開け締めをしています。
よく忘れるのがコンテンツ分のフラグを作るところで、これが一個だけだと1番目押して開いた後に続けて2番目が開かないとか 2回クリックしないと動かないなどの現象が起きます。