webサイト制作の勉強|1月ブログ

webサイト制作の勉強に関する解説ブログです。

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

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

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

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

$(function(){
	
//アコーディオンパネル
$(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 a").on('touchstart',function() {
$(this).parent('p').siblings('dl').children('dt:nth-of-type(n+4),dd:nth-of-type(n+4)').slideToggle(0);
 if($(this).parent('p').siblings('dl').children('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display') == 'block'){
            $(this).text('閉じる');
        }else{
            $(this).text('もっと見る');
            };
    return false;
  });
	}else {
   $('dt:nth-of-type(n+4), dd:nth-of-type(n+4)').css('display','block');
   };
});
});