slideToggleに合わせてテキストを変更させる

今回は以前作った既存サイト（キリン）の二ユースリリース部分に「もっと見る」ボタンを作り、さらにそのボタンのテキストをslideToggleの動きに合わせて「もっと見る」と「閉じる」に切り替えます。

slideToggleの動きに合わせたスイッチの作成

以前はtoggleイベントを利用する事で簡単にスイッチが作成できたのですが、v1.9で廃止されてしまったため、今回はフラグを使って、slideToggleの動きに合わせたスイッチを作ります。

フラグが「close」であれば、テキストを「閉じる」、フラグが「open」であれば、テキストを「もっと見る」に差し替える、というスイッチを作ります。
slideToggleの場合であれば、「display:block」と「display:none」の状態を取得してテキストを切り替える事が可能です

$(function(){
$('p.more').on('click', function() {
 $(this).siblings('dl').children('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').slideToggle(0);
   if($(this).siblings('dl').children('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display') == 'block'){
            $(this).text('閉じる');
        }else{
            $(this).text('もっと見る');
            };
 });

});

さらに余裕があれば、「load」「 resize」メソッドを使って、可変に対応させて見ましょう。

$(window).on('load resize',function(){
  if($(window).innerWidth() <= 640){
  $('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display','none');
$('.more').on('click', function() {
 $(this).siblings('dl').children('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').slideToggle(0);
 if($('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display') == 'block'){
            $(this).text('閉じる');
        }else{
            $(this).text('もっと見る');
            };
   });
   }else {
   $('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display','block');
   };
});

作例

http://yachin29.webcrow.jp/kirin_dl/dl.html