jquery アコーディオン表示の高さ変更について

【解決したいこと】
半分表示しているテキストについて、「もっと見る」ボタンをクリックすると、全てのテキストを
アコーディオンで表示したいのですが、テキストエリアの高さを100%にするタイミングと、ボタンのテキスト変更（もっと見る→閉じる）のタイミングがうまく行っておりません。
テキストエリアの高さは、cssのtransitonで設定しておりますが、こちらを削除するとアニメーションが効かなくなるため、修正対応箇所についてご教授いただけないでしょうか。

HTML
1<div class="wrap">
2<div class="txt_inr">
3テキストテキストテキストテキストテキストテキスト
4テキストテキストテキストテキストテキストテキスト
5テキストテキストテキストテキストテキストテキスト
6テキストテキストテキストテキストテキストテキスト
7テキストテキストテキストテキストテキストテキスト
8</div>
9<div class="link">もっと見る</div>
10</div>
11
12<div class="wrap">
13<div class="txt_inr">
14テキストテキストテキストテキストテキストテキスト
15テキストテキストテキストテキストテキストテキスト
16テキストテキストテキストテキストテキストテキスト
17テキストテキストテキストテキストテキストテキスト
18テキストテキストテキストテキストテキストテキスト
19</div>
20<div class="link">もっと見る</div>
21</div>

javascript
1$(function () {
2    $('.link').click(function () {
3        if ($(this).prev().hasClass('active')) {								　　　　　　$(this).prev().removeClass('active');
4          $(this).text('もっと見る');
5        } else {
6          $(this).prev().addClass('active');
7	　$(this).text('閉じる');
8        }
9    });
10});

css
1.wrap{
2   width: 50%;
3}
4	
5.txt_inr {
6    height: 50px;
7    overflow: hidden;
8　　transition: height 0.8s;
9}
10	
11.active.txt_inr{
12   height: 100%;
13}
14	
15.link{
16    background-color: red;
17}

Lhankor_Mhy

2020/03/19 03:45

「タイミングがうまく行っておりません」とのことですが、具体的には何が起きていて、本当はどうしたいと思っているのですか？ 3-3. 質問詳細の最初に実現したいことを書きましょう https://teratail.com/help/question-tips#questionTips3-3 結果（実際に起きたこと）を書きましょう https://teratail.com/help/question-tips#questionTips3-4-1 期待した処理結果を書きましょう https://teratail.com/help/question-tips#questionTips3-4-3

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

回答1件

ベストアンサー

~~cssのtransitonは 100% というような相対値には効きません。~~
要素の高さを中身のテキスト内容に合わせるには100%ではなくautoですね。
autoも固定値でないのでtransitonは効きません。
pxで固定値で指定すれば有効になりますがそれではだめですよね。

方法としては、スクリプトで一度heightにautoを設定して、オリジナルの高さの絶対値を取得しておいて、それをもとにアニメーショさせることになります。

下記が参考になるでしょう。

[jQuery] アニメーションしながら開く「続きを読む」をjQueryで実装する | metrograph.jp

あと、手前味噌になりますか、下記でもう少し凝ったものを紹介してます。

jQueryで文章をグラデーションで隠してアニメーションで開閉するボックスを作った | hatena chips

質問のコードを修正するなら下記のような感じでご希望に沿いますでしょうか。

css
1.wrap{
2  width: 50%;
3}
4
5.txt_inr {
6  height: 50px;
7  overflow: hidden;
8}
9
10.link{
11  background-color: red;
12}

js
1$(function () {
2  const min_height = 50; //initial height 50px
3  const ani_duration = 800; //アニメーション時間 0.8s
4  $('.link').click(function () {
5    let athis = $(this);
6    let show_text = athis.prev();
7    let original_height = show_text.css({height : 'auto'}).height();
8    if (show_text.hasClass('active')) {
9      show_text.stop()
10        .animate({height:min_height}, ani_duration,
11                 function(){athis.text('もっと見る')});
12      show_text.removeClass('active');
13    } else {
14      show_text.height(min_height).stop()
15        .animate({height:original_height},ani_duration, 
16                 function(){athis.text('閉じる')});
17      show_text.addClass('active');
18    }
19  });
20});

投稿2020/03/19 03:48

総合スコア33699

2020/03/19 07:43

早急にご回答くださり誠にありがとうございます。また、完璧なものを作ってくださり感謝いたします。理想の形です。頂いた参考サイトも参考にさせていただきます！頂いた内容を参考に、実際のサイトでは、アコーディオンの中身のテキスト量が多いため、閉じるボタンをクリックした際、トップ位置に戻るような設定を追加しようと思います。

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