jQuery：タブ機能の中で、readmore.jsを実装する方法について

前提・実現したいこと

HTML内にタブ機能のjQueryを実装し、さらにその各タブの中に、
readmore.jsでもっと見るボタンを実装しましたが、
最初のタブのみreadmore.jsが実行されますが、
他のタブをクリックすると、もっと見るのreadmore.jsが
効いていません。

該当のソースコード

//TAB
$(function() {
    //クリックしたときのファンクションをまとめて指定
    $('ul.tab_area li').click(function() {
        //.index()を使いクリックされたタブが何番目かを調べ、
        //indexという変数に代入します。
        var index = $('ul.tab_area li').index(this);
 
        //コンテンツを一度すべて非表示にし、
        $('.content_area').css('display','none');
 
        //クリックされたタブと同じ順番のコンテンツを表示します。
        $('.content_area').eq(index).fadeIn();
 
        //タブについているクラスselectを消し、
        $('.tab_area li').removeClass('select');
 
        //クリックされたタブのみにクラスselectをつけます。
		$(this).addClass('select');
	});
});

試したこと

以下の質問と回答を拝見して、上記ソースをアレンジしてみたのですがうまくいきません。
https://teratail.com/questions/28271

//TAB
$(function() {
    //クリックしたときのファンクションをまとめて指定
    $('ul.tab_area li').click(function() {
        //.index()を使いクリックされたタブが何番目かを調べ、
        //indexという変数に代入します。
        var index = $('ul.tab_area li').index(this);
 
        //コンテンツを一度すべて非表示にし、
        $('.content_area').css('display','none');
 
        //クリックされたタブと同じ順番のコンテンツを表示します。
        $('.content_area').eq(index).fadeIn();
 
        //タブについているクラスselectを消し、
        $('.tab_area li').removeClass('select');
 
        //クリックされたタブのみにクラスselectをつけます。
		$(this).addClass('select');
	});
       readmore();
});

補足情報

タブ機能は問題なく動いております。
何卒宜しくお願いいたします。

8/27追加情報（タブ部分のCSSを追記いたしました）

/* ---------------------------------------------------------------------------------------------
   TAB (for index.html)
--------------------------------------------------------------------------------------------- */
.tab_menu{
  width: 100%;
  margin: 0 auto;
}

.all_area .site-category-links {
  width:950px;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .all_area .site-category-links {
    width:100%;
    margin:0;
    padding:0;
  }
}

.tab_menu div.content_area{
  /*Tabの内容を表示するエリアの装飾*/
  width:100%;
  margin: 0;
  padding: 0;
  background:#ffffff;
}

.site-category-links .tab_area{
  padding: 0;
  margin: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between
}

.site-category-links .tab_area li{
  /*Tabの装飾*/
  width: 12.5%;
  padding: 0;
  margin: 0;
  font-size:14px;
  box-sizing:border-box;
  cursor: pointer;
  line-height: 40px;
  display:inline-block;
  text-align: center;
  text-decoration: none;
  font-weight: 500;
}

.site-category-links .tab_area li img{
  width:90%;
  border-radius:50%;
  opacity:0.6;
  display:inline-block;
}

.site-category-links .tab_area li span{
  display:block;
  color:#333333;
}

.site-category-links .tab_area li.select{
  /*アクティブタブの装飾*/
  font-weight: 900;
  background: #ffffff;
}

.site-category-links .tab_area li.select img{
  width:90%;
  border-radius:50%;
  border:3px solid #333333;
  display:inline-block;
}

.site-category-links .tab_area li.select span{
  display:block;
  color: #333333;
}

.hide{display:none;}

@media screen and (max-width: 767px) {

  .tab_menu{
    width: 100%;
    margin:0 auto;
  }

  .all_area{
    overflow-x:scroll;
  }

  .tab_menu div.content_area{
    /*Tabの内容を表示するエリアの装飾*/
    width:100%;
    margin: 0;
    padding: 0;
  }
  
  .site-category-links .tab_area{
    width:800px;
    justify-content: left;
    flex-wrap: nowrap;
  }

  .site-category-links .tab_area li{
    /*Tabの装飾*/
    width:100px;
    font-size: 10px;
    line-height: 24px;
  }
  
  .site-category-links .tab_area li.select img{
    border:2px solid #333333;
  }
}

jinba

2020/08/26 07:23

htmlのソースもないと回答が難しそうです

na818

2020/08/26 08:08

お世話になっております。ご確認いただきありがとうございます。以下、文字数制限により、一部、抜粋した、該当タブのHTMLとなります。１．<div class="all_area">がタブボタンの部分です。２．<div class="content_area">が初期表示のコンテンツ部分となります。３．<div class="content_area hide">が初期非表示コンテンツ部分となります。 ※実際には、切り替えるコンテンツが8つあります。ご確認いただけますと幸いです。何卒よろしくお願いいたします。 ====================== <!doctype html> <html lang="ja"> <head> <meta charset="shift_jis"> <meta content="width=device-width" name="viewport"> <meta content="telephone=no" name="format-detection"> <title>xxxxxxxxxxxxxxxxxxxxxx</title> <meta content="xxxxxxxxxxxxxxxxxxxxxx" name="description"> <meta content="xxxxxxxxxxxxxxxxxxxxxx" name="keywords"> <meta content="xxxxxxxxxxxxxxxxxxxxxx" property="og:description"> <meta content="website" property="og:type"> <meta content="xxxxxxxxxxxxxxxxxxxxxx" property="og:url"> <meta content="xxxxxxxxxxxxxxxxxxxxxx" property="og:image"> <link rel="canonical" href="xxxxxxxxxxxxxxxxxxxxxx"> <link rel="stylesheet" href="test/common/css/sanitize.css"> <link rel="stylesheet" href="test/common/css/main.css"> <link rel="stylesheet" href="test/common/css/meanmenu.css"> <link rel="stylesheet" href="test/common/css/swiper.css"> <link rel="stylesheet" href="//fonts.googleapis.com/css?family=M+PLUS+Rounded+1c:400,500,700&subset=japanese"> <link rel='stylesheet' href="//fonts.googleapis.com/css?family=Mallanna:300&text=12314567890abcdefghijklmnopqrstuvwyzABCDEFGHIJKLMNOPQRSTUVWXYZ"> <link rel="stylesheet" href="//fonts.googleapis.com/css2?family=Spinnaker&display=swap"> <link crossorigin="anonymous" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" rel="stylesheet" href="//use.fontawesome.com/releases/v5.7.1/css/all.css"> </head> <body> <div id="pagetop" class="site-wrapper"> <div class="site-main"> <section class="tab_menu"> <div class="all_area"> <nav class="site-category-links"> <ul class="tab_area"> <li id="tab1" class="select fade"><img class="resize" src="test/common/img/common/menu_dummy.jpg"><span>レディース</span></li> <li id="tab2" class="fade"><img class="resize" src="test/common/img/common/menu_dummy.jpg"><span>メンズ</span></li> <li id="tab3" class="fade"><img class="resize" src="test/common/img/common/menu_dummy.jpg"><span>キッズ</span></li> <li id="tab4" class="fade"><img class="resize" src="test/common/img/common/menu_dummy.jpg"><span>コスメ</span></li> <li id="tab5" class="fade"><img class="resize" src="test/common/img/common/menu_dummy.jpg"><span>スポーツ</span></li> <li id="tab6" class="fade"><img class="resize" src="test/common/img/common/menu_dummy.jpg"><span>アウトドア</span></li> <li id="tab7" class="fade"><img class="resize" src="test/common/img/common/menu_dummy.jpg"><span>生活雑貨</span></li> <li id="tab8" class="fade"><img class="resize" src="test/common/img/common/menu_dummy.jpg"><span>アニメ</span></li> </ul> </nav> </div> <div class="content_area"> <section class="sec-wrap"> <header class="sec-header"> <p class="sec-label">RANKING</p> <h2 class="sec-title">ランキング</h2> </header> <h3 class="sub-title">レディースファッション</h3> <div class="readmore"> <ul class="ranking-banner-link short"> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy_01.jpg"></div><p class="ft12">カットソー</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">ワンピース</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">シューズ</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">バッグ</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">シャツ<br>ブラウス</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">パンツ</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">スカート</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">インナー<br>ナイトウェア</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">アクセサリー</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">リビング<br>雑貨</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">財布</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_ladies/ranking/short_ranking_dummy.jpg"></div><p class="ft12">ファッション<br>グッズ</p></a></li> <li></li> <li></li> <li></li> </ul> </div> </section> </div> <div class="content_area hide"> <section class="sec-wrap"> <header class="sec-header"> <p class="sec-label">RANKING</p> <h2 class="sec-title">ランキング</h2> </header> <h3 class="sub-title">メンズファッション</h3> <div class="readmore"> <ul class="ranking-banner-link short"> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy_01.jpg"></div><p class="ft12">カットソー</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">ワンピース</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">シューズ</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">バッグ</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">シャツ<br>ブラウス</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">パンツ</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">スカート</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">インナー<br>ナイトウェア</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">アクセサリー</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">リビング<br>雑貨</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">財布</p></a></li> <li><a class="fade shadow" href="#"><div class="link-btn"><img alt="" class="resize" src="test/tab_mens/ranking/short_ranking_dummy.jpg"></div><p class="ft12">ファッション<br>グッズ</p></a></li> <li></li> <li></li> <li></li> </ul> </div> </section> </div> </section> </div> </div> <p id="page-top"><a href="#wrap"><img src="xxx/common/yaji_dummy.jpg" border="0"></a></p> <script src="test/common/js/jquery-3.3.1.min.js"></script> <script src="test/common/js/swiper.min.js"></script> <script src="test/common/js/smooth-scroll.polyfills.min.js"></script> <script src="test/common/js/cssua.min.js"></script> <script src="test/common/js/common.js"></script> <script src="test/common/js/view_timer.js"></script> <script src="test/common/js/jquery.meanmenu.min.js"></script> <script src="test/common/js/pagetop.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script src="test/common/js/readmore.js"></script> <script> //READ MORE $('.readmore').readmore({ speed: 500, collapsedHeight: 200, moreLink: '<a class="display" href="#"><span class="fa fa-chevron-down"></span>もっと見る</a>', lessLink: '<a class="close" href="#"><span class="fa fa-chevron-up"></span>閉じる</a>' }); </script> </body> </html> ======================

行動規範の内容に同意します

回答1件

ベストアンサー

html
1<script>
2//READ MORE
3$('.readmore').readmore({
4speed: 500,
5collapsedHeight: 200,
6moreLink: '<a class="display" href="#"><span class="fa fa-chevron-down"></span>もっと見る</a>',
7lessLink: '<a class="close" href="#"><span class="fa fa-chevron-up"></span>閉じる</a>'
8});
9</script>
10

HTMLに書かれている↑のjavascriptを↓へ変更

html
1<script>
2//READ MORE
3readmore_exe();//readmore_exeファンクションを実行
4
5function readmore_exe(){//タブ変更時に再度実行しやすいようにファンクションに
6$('.readmore').readmore({
7speed: 500,
8collapsedHeight: 200,
9moreLink: '<a class="display" href="#"><span class="fa fa-chevron-down"></span>もっと見る</a>',
10lessLink: '<a class="close" href="#"><span class="fa fa-chevron-up"></span>閉じる</a>'
11});
12}
13</script>

↓試行錯誤されていたjavascriptを下記のように

javascript
1$(function() {
2    //クリックしたときのファンクションをまとめて指定
3    $('ul.tab_area li').click(function() {
4        //.index()を使いクリックされたタブが何番目かを調べ、
5        //indexという変数に代入します。
6        var index = $('ul.tab_area li').index(this);
7
8        //コンテンツを一度すべて非表示にし、
9        $('.content_area').css('display','none');
10
11        //クリックされたタブと同じ順番のコンテンツを表示します。
12        $('.content_area').eq(index).fadeIn();
13
14        //タブについているクラスselectを消し、
15        $('.tab_area li').removeClass('select');
16
17        //クリックされたタブのみにクラスselectをつけます。
18        $(this).addClass('select');
19
20　　　　//READ MORE
21　　　　readmore_exe();//←クリックしたときの最終処理でreadme.jpを再度実行
22    });
23       //readmore();
24　　　　//↑ここに付け足してもクリックしたときに反応しないしreadmoreはfanctionでもない
25});

これで行けるのではないでしょうか

投稿2020/08/27 10:56

jinba

総合スコア310

na818

2020/08/28 07:43

お世話になっております。ご教授いただき、ありがとうございます。ご回答いただいた内容を一旦、ローカル上で、実装してみましたが、 readmore.jsが効いていない状況でございます。コメント送付後に、対応前と対応後のソースを「質問」部分に「8/28追加情報」として、追記させていただきます。

jinba

2020/08/28 08:07

na818

2020/08/28 08:24

お世話になっております。今、もう一度、ソースを見直してみまして、表示したところ、無事、readmore.jsがすべてのタブで有効になっていることが確認できました。ご指摘の「jqueryのバージョン違いを２回呼び出してますね」の部分、あまり、よくないと思うのですが、readmore.jsが1.x.x系のバージョンしか対応していないため、あえて、最後に読み込んでいます。 jquery-3.3.1.min.jsで動く、他の「続きを見る」のスクリプトも試してみます。まだまだ、自身の知見が少ないので、jinbaさんのように、色々な状況に対応できるスキルを身に付けられるよう、研鑽を積んでいきたいと思います。

jinba

2020/08/28 08:33

https://jedfoster.com/Readmore.js/ Readmore.js is tested with—and supported on—all versions of jQuery greater than 1.9.1. All the "good" browsers are supported, as well as IE10+; IE8 & 9 should work, but are not supported and the experience will not be ideal. 翻訳すると Readmore.jsは、1.9.1以降のすべてのバージョンのjQueryでテストされ、サポートされています。IE10 +だけでなく、すべての「優れた」ブラウザがサポートされています。IE8および9 は動作するはずですが、サポートされておらず、エクスペリエンスは理想的ではありません。と書かれていますよ

na818

2020/08/28 10:05

お世話になっております。 Readmore.jsの件、ご教授いただき、ありがとうございます。本家のサイトの提示いただいた箇所を確認しておりませんでした。「jquery-3.3.1.min.js」のみでも、「readmore.js」が動作することを確認いたしました。大変失礼いたしました。今後の制作過程では、留意していくよう努めます。

行動規範の内容に同意します