「もっと見る」を作成
scriptを作成
$(".closeBox").hide(); var flg = "close"; $("#newsBloc .btnBloc").click(function(){ $("#newsBloc .closeBox").slideToggle(); if(flg == "close"){ $("#newsBloc .btnBloc span").text("閉じる"); $("#newsBloc .btnBloc span").toggleClass("closeBtn"); flg = "open"; }else{ $("#newsBloc .btnBloc span").text("もっと見る"); $("#newsBloc .btnBloc span").toggleClass("closeBtn"); flg = "close"; } });
htmlの作成
最初から表示させるリストと、「もっと見る」ボタンとボタンを押してから表示するリストを作成
<div id="newsBloc"> <ul> <li>aaa</li> <li>aaa</li> </ul> <ul class="closeBox"> <li>bbb</li> <li>bbb</li> </ul> <div class="btnBloc"><span class="btn1">もっと見る</span></div> </div>
参考サイト
jquery クリックで内容の表示・非表示の切り替え(ボタンのテキストも入れ替え)
http://jump-up.info/jquery/jquery_toggle.html
この投稿へのトラックバック
トラックバックはありません。