jQueryでクリック表示・非表示の動作がならない。

Question

<ul class="photo_title">は最初は非表示にする。 例えば「練習風景」をクリックしたら<ul class="photo_title">部分の練習風景を表示したいのですが、上手くできません。 わかられる方ご回答をお願い致します。 また、例えば<ul class="tab">の練習風景を2回クリックすると最初の画面に戻ってします。 2回クリック後も維持したい場合はどのように記述すればいいでしょうか。

$(function(){

	$("#photo_gallery .tab li").click(function() {
        var tags = $(this).attr('class');
        $("#photo_gallery .tab li").removeClass('select');
        $(this).removeClass('select');

        $("ul.photo li").hide();
        if(tags == 'practice_scenery_') {
            $("ul.photo li.practice_scenery").fadeIn(300);
        
		} else if(tags == '20180620_') {
            $("ul.photo li.20180620").fadeIn(300);
        
		} else if(tags == 'off-shot_') {
            $("ul.photo li.off-shot").fadeIn(300);
        
		} else if(tags == 'match_scenery_') {
            $("ul.photo li.match_scenery").fadeIn(300);
        
		} else {
            $("ul.photo li").fadeIn(300);
        }
    });
	/*タブ切替*/
	$("#photo_gallery .tab li").addClass('active').show();
	$("#photo_gallery .tab li").click(function() {
	  $("#photo_gallery .tab li").removeClass('active');
	 $(this).addClass('active');
	  var activeTab = $(this).find('a').attr('href');
	 $(activeTab).fadeIn();
	  return false;
	});
	
});
</script>

div#photo_gallery {
    clear: both;
    overflow: hidden;
}
div#photo_gallery .btn_detail {
    background: #fff;
    padding: 20px;
    margin: 30px 0;
    text-align: center;
    border: 1px solid #fff;
    color: #e79c37;
}
div#photo_gallery ul.tab {
	padding: 15px;
	text-align:center;
	overflow: hidden;
　　background: #fdb95e;
}
div#photo_gallery ul.tab li {
    color: #000;
    margin: 0;
    float: left;
    letter-spacing: 1;
    padding: 5px 45px;
    cursor: pointer;
}
div#photo_gallery ul.tab li.active {
	background: #cc7500;
	color: #fff;
}
div#photo_gallerys {
}
div#photo_gallerys ul.photo_s {
    margin: 10px 0 0px;
    overflow: hidden;
}
div#photo_gallerys ul.photo_s li {
	float: left;
	width: 24%;
	margin: 0 4px 12px;
}
div#photo_gallerys ul.photo_s li img {
	width: 100%;
}

<div id="photo_gallery" class="clearfix">
<ul class="tab">
<li class="practice_scenery_ select">＃練習風景</li>
<li class="20180620_">＃20180620</li>
<li class="off-shot_">＃オフショット</li>
<li class="match_scenery_">＃試合風景</li>
</ul>
<div id="photo_gallerys" class="clearfix">
<ul class="photo_title">
<li class="practice_scenery">＃練習風景</li>
<li class="20180620">＃20180620</li>
<li class="off-shot">＃オフショット</li>
<li class="match_scenery">＃試合風景</li>
</ul>
<!-- フォト抜き出し-->
<ul class="photo photo_s">
<li class="practice_scenery">2018.06.18</li>
<li class="20180620">2018.06.18</li>
<li class="off-shot">2018.06.18</li>
<li class="off-shot">2018.06.18</li>
</ul>
</div>
</div>

Comments

[m.ts10806]

プログラムコード(およびエラーメッセージ)は質問内容としては最も重要な部分であるため、見やすくしていただけると助かります。<code>ボタン押下→「コード」部分にコードを貼り付け→「ここに言語を入力」に対象言語名記入（エラーメッセージの場合は不要）の手順で「コードハイライト化」してください。（質問編集画面ではリアルタイムでプレビューが表示されるので見ながら調整してください）

[m.ts10806]

photo_galleryおよびphoto_gallerysの閉じ</div>がないように見受けられます。転記漏れでしょうか

[m.ts10806]

「practice_scenery_」に「select」クラスがあるので確認したいのですが、タブ切り替えのような機能なのでしょうか？再現確認や回答のために必要となるのでCSSも提示された方が良いかもしれません。

[kitikiti]

ご回答ありがとうございます。CSS追加します。

[m.ts10806]

少し先走りで回答してみます。齟齬がありましたらご指摘ください。寄せていきますので。

[kitikiti]

タブ機能で切り替えるようにしています。

[kitikiti]

CSSを追記しました。

[kitikiti]

CSSを追記しました。

[m.ts10806]

追記ありがとうございます。ただ、コードブロック対応（私の最初のコメント）もお願いしますね。このままだとコードハイライトがないので読みづらいですし、再現確認のためのコピーがかなり面倒です。（回答がつきにくい原因となります）

[kitikiti]

すみません。修正が完了しました。

[m.ts10806]

```js ```css ```html など冒頭に言語名つけると言語にそくしたハイライトがつくのでお手数でなければご対応ください。（私の回答参照 あとコードブロックで使える言語一覧→ https://teratail.com/questions/7119）

[kitikiti]

修正完了しました。

[m.ts10806]

調整ありがとうございます。

Answer 1

勝手に解釈して再構成してみました。
勘違い等ありましたら指摘してください。

※「<ul class="tab">の練習風景を2回クリックすると最初の画面に戻ってします。」
のところが良く分かっておりません。提示コードにはaタグが入っていないような？

1. photo_galleryのtabのliをそれぞれクリックする
2. ↑をクリックしたら紐づくphoto_titleとphotoが表示される
3. 同じtabがクリックされたら閉じる
4. 違うtabがクリックされたら2.へ

※photo_galleryの閉じはphoto_gallerysの手前で。photo_gallerysの閉じは最後にしました。

<div id="photo_gallery" class="clearfix">
  <ul class="tab">
    <li data-title="practice_scenery" class="select">＃練習風景</li>
    <li data-title="20180620">＃20180620</li>
    <li data-title="off-shot">＃オフショット</li>
    <li data-title="match_scenery">＃試合風景</li>
  </ul>
</div>
<div id="photo_gallerys" class="clearfix" style="display:none;">
  <ul class="photo_title">
    <li id="practice_scenery_title">＃練習風景</li>
    <li id="20180620_title">＃20180620</li>
    <li id="off-shot_title">＃オフショット</li>
    <li id="match_scenery_title">＃試合風景</li>
  </ul>
  <!-- フォト抜き出し-->
  <ul class="photo photo_s">
    <li class="practice_scenery_photo">2018.06.18</li>
    <li class="20180620_photo">2018.06.18</li>
    <li class="off-shot_photo">2018.06.18</li>
    <li class="off-shot_photo">2018.06.18</li>
  </ul>
</div>

※/タブ切替/以下は仕様がよく分からないのでごっそり削ってあります。必要であれば入れてください。

     $(function() {
        var preTags = "";
     	$("#photo_gallery .tab li").on("click",function() {
     	    var tags = $(this).data('title');
            if(preTags == tags){
                $("#photo_gallerys").hide();
                preTags = "";
                return;
            }else{
                preTags = tags;
                $("#photo_gallerys").show();
            }
     		$("#photo_gallery .tab li").removeClass('select');
     		$(this).removeClass('select');
            
     		$("#photo_gallerys .photo_title li").hide();
            $("#"+tags+"_title").fadeIn(300);
     		$("#photo_gallerys .photo li").hide();
            $("."+tags+"_photo").fadeIn(300);

     	});
     });