選択した要素のみ表示→もう一度選択すると選択した要素が一番下になり→上に残りの項目をプルアップで表示→はじめに戻る

前提・実現したいこと

要素をクリックするとプルアップで残りの要素が出現して、要素を選択すると選択した要素のみが表示されるようにする（残りの要素が出現した時現在表示中の要素が一番下になるようにしたい）

ページ読み込み時

「全ジャンル」クリック時

ジャンル２クリック時

再度ジャンル２クリック時
### 発生している問題・エラーメッセージ

エラーメッセージ

HTML

html
1<ul class="keywordTab">
2          <li class="tabLabel show clicked ">全てのジャンル</li>
3          <li class="tabLabel">ジャンル１</li>
4          <li class="tabLabel">ジャンル２</li>
5          <li class="tabLabel">ジャンル３</li>
6          <li class="tabLabel">ジャンル４</li>
7          <li class="tabLabel">ジャンル５</li>
8        </ul>

css
1.keywordTab{
2    display: flex;
3    flex-direction: column-reverse;
4    justify-content: space-around;
5    align-items: center;
6    margin-bottom: 6rem;
7}
8.tabLabel{
9  opacity: 0.6;
10  text-align: center;
11  width: calc(300 * (100vw / 375));
12  height: 5.3rem;
13  font-size: 1.5rem;
14  display: flex;
15  justify-content: center;
16  align-items: center;
17  cursor: pointer;
18  border-bottom: 0.1rem solid #967F4F;
19  color: #000;
20  display: none;
21}
22.tabLabel.show{
23  display: block;
24}
25.clicked{
26  opacity: 1;
27}

javascript
1$(".tabLabel").on("click",function(){
2    var $th = $(this).index();
3    $(".tabLabel").slideToggle("show");
4    $(".tabLabel").removeClass("clicked");
5    // $(".tabContents").removeClass("active");
6
7    $(this).toggle("show");
8    $(this).addClass("clicked");
9    // $(".tabContents").eq($th).addClass("active");
10   });

試したこと

slideToggleやslidedown等調べて書いてみたがおもいどおりにはいかず。
JavaScriptに関しては調べてなんとなく理解できてるかな程度です。。。
webサイトの例なども見つからず大変お手数ですが、どうかご教授よろしくお願いいたします。

※tabLabelのインデックス順に連動したtabContentsを出現させるコードもありますがこちらはおそらく、選択した要素を一番下に表示するという事を実現するとうまく動作しなくなると思うのでまた別の方法でタブを切り替えれば問題無いかと思います。。。

補足情報（FW/ツールのバージョンなど）

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

回答1件

ベストアンサー

こんにちは

リストアイテムの表示順を css の order で制御する案です。下記のように修正します。

1. keywordTab のスタイルflex-directionを修正

表示順は css の order で設定するので、reverseせずにcolumn にします。

diff
1.keywordTab {
2  display: flex;
3- flex-direction: column-reverse;
4+ flex-direction: column;

2. ドキュメントレディ冒頭でリストアイテムのcss order を設定

$() に与える関数の冒頭に、以下の4行を追加

diff
1  $(function() {
2+    const numItems = $('li').length;
3+    $(".tabLabel").each(function(i) {
4+      $(this).css({ order: numItems-i })
5+   });
6

3. tabLabelのクリックハンドラの修正

3.1 先頭で、タブが閉じているかどうかの判定フラグを取得

diff
1  $(".tabLabel").on("click",function(){
2+   const isClosed = $(".tabLabel").filter(function() {
3+                      return $(this).css('display') === 'none';
4+                    }).length > 0;

3.2 最後に、tabLabelのcss order のつけ替えを追加

タブが閉じた状態から開く状態に移行する際に、クリックされたリストアイテムが見た目上、一番下になるように css order を更新します。

diff
1  $(this).toggle("show");
2  $(this).addClass("clicked");
3  // $(".tabContents").eq($th).addClass("active");
4
5+ if (isClosed) {
6+   $(this).css({ order: numItems + 1 });
7+   $(".tabLabel")
8+     .sort((e1, e2) => e1.style.order - e2.style.order)
9+     .each(function(i) { 
10+       $(this).css({ order: i + 1 });
11+     });
12+  }
13});

動作確認用 codepen: https://codepen.io/jun68ykt/pen/RwaMGrQ

参考になれば幸いです。

追記

コメントから頂きました要件を満たせそうなものを試作してみました。こちらは css order は使わず、JQuery UI の toggle を使うことによって、最下行のみが表示されているときに、最下行をクリックすると、他のアイテムが上方向に展開されます。また、最下行のアイテムを囲むulを、スライド表示させる他のアイテム用のulと別にすることで、最下行はアニメーションの影響を受けないようにしています。

styles.css

css
1.keywordTab {
2  display: flex;
3  flex-direction: column;
4  justify-content: space-around;
5  align-items: center;
6  margin: 0 auto;
7  list-style: none;
8}
9
10.sliderWrapper { height: calc(52px * 5); }
11
12.tabLabel {
13  display: flex;
14  opacity: 0.6;
15  width: calc(300 * (100vw / 375));
16  height: 50px;
17  font-size: 1.5rem;
18  justify-content: center;
19  align-items: center;
20  cursor: pointer;
21  border-bottom: 0.1rem solid #967F4F;
22  color: #000;
23}
24

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <title>Q290782</title>
6  <link rel="stylesheet" href="styles.css">
7  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
8  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
9  <script>
10    $(function() {
11      $(".tabLabel").on("click", function() {
12        const bottomItem = $(".bottom-item .tabLabel").get(0);
13        if (this !== bottomItem) {
14          $(".bottom-item").append(this);
15          $(".slider").append(bottomItem);
16        }
17        $(".slider").toggle('slide', { direction: 'down' });
18      });
19    });
20  </script>
21</head>
22<body>
23<div class="sliderWrapper">
24  <ul class="keywordTab slider">
25    <li class="tabLabel">ジャンル５</li>
26    <li class="tabLabel">ジャンル４</li>
27    <li class="tabLabel">ジャンル３</li>
28    <li class="tabLabel">ジャンル２</li>
29    <li class="tabLabel">ジャンル１</li>
30  </ul>
31</div>
32<ul class="keywordTab bottom-item">
33  <li class="tabLabel">全てのジャンル</li>
34</ul>
35</body>
36</html>

動作確認用 codepen: https://codepen.io/jun68ykt/pen/xxVWaLg

投稿2020/09/09 20:35

編集2020/09/10 16:33

jun68ykt

総合スコア9058

J-516

2020/09/10 06:29

ありがとうございます！！非常に助かりました！たどり着けない方法でした。。。。ちなみになんですがこのクリックでのリストの表示非表示ですがボタンクリックでプルアップ？で表示させることは可能なのでしょうか？加えてクリックしてから一番下に表示されるときに他とタイミングが少し遅れている原因はどの部分なのでしょうか。。 $(this).toggle("show");の部分だと思うのですが改善できるのかどうか。。いろいろ調べてみたのですがプルダウンでしかも親要素のクリックやホバーで表示する方法しか見つからず。。恐縮ですが合わせてご教示いただけますと幸いです。。

jun68ykt

2020/09/10 16:34 編集

こんにちは以下の２点 > プルアップ？ > クリックしてから一番下に表示されるときに他とタイミングが少し遅れているを解消してみたコードを追記しました。ご質問にある元のコードとは、若干、考え方の違うものになっているとは思いますが、参考になれば幸いです。なお、追記したコードに対するさらなる課題、問題点については、別の質問として投稿いただければ幸いです。

J-516

2020/09/11 04:49

ありがとうございます！自分が目指しているものにかなり近づきました！一つだけ気になる部分があるので別に質問投稿いたします！

jun68ykt

2020/09/11 09:20

どういたしまして。 > 自分が目指しているものにかなり近づきました！とのことでよかったです???? > 別に質問投稿のほうも拝読させていただきますね。

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