アコーディオンメニューで閉じるボタンを押した時にスクロールトップして元の位置に戻したい。

現在サムネイルを押すとそのサムネイルに関する詳細情報がアコーディオンで表示されるものを製作中です。
詳細情報の最後に閉じるボタンを設置しているのですが、閉じるボタンを押すと詳細ページが長いので、思った動きになりません。

閉じるボタンを押すと、詳細情報が閉じ、元のサムネイル位置にスムーススクロールして戻って欲しいです。（例えば、ARTIST 1のサムネイルを押してその詳細情報の最後にある閉じるボタンを押すとARTIST 1のサムネイルのTOPに戻ると言ったような）

また、ARTIST 1を開いた状態で閉じるボタンを押さずにARTIST 2を押した時にもARTIST 01が閉じると言った仕様にできたらベストなのですが、どなたかアコーディオンメニューやjavascriptやjQueryに詳しい方ご教授いただけませんでしょうか。

テストサイトとソースコード一式を掲載させていただきますので、ご協力のほど何卒よろしくお願い致します。

アコーディオンメニューテストサイト
解決したので非表示にさせていただきました。ご協力ありがとうございました。


<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>アコーディオンデモ</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {

    $('.artistes_main_visual').click(function(){
        $(this).next('.tia_container').slideToggle(600);
    });

    // $('.close').click(function(){
    //     $(this).parent('.tia_container').slideUp(600);
    // });

    $('a[href^="#"]').click(function() {
     $(this).parent('.tia_container').slideUp(1000);

     var speed = 1000;
     var href= $(this).attr("href");
     var target = $(href == "#" || href == "" ? 'html' : href);
     var position = (target.offset().top);
     $('body,html').animate({scrollTop:position}, speed, '');
     return false;
  });

});
</script>
<style>
body {
 margin: 0;
 padding: 0;
 font-family: sans-serif;
 line-height: 1;
}
h2 {
 margin: 0;
 padding: 0;
 font-weight: normal;
}
img {
	width: 100%;
	height: auto;
	vertical-align: top;
}
a {
 display: block;
 color: #fff;
 text-decoration: none;
}
.artistes_main_visual {
	width: 100%;
	height: auto;
	position: relative;
	cursor: pointer;
}
.artistes_main_visual span {
	transition: all 0.3s;
}
.artistes_main_visual span:hover {
	opacity: 0;
}
.artistes_main_visual h2 {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
	height: 32px;
	font-size: 32px;
	line-height: 1;
	text-align: center;
	z-index: 3;
	color: #fff;
}
.tia_container {
	display: none;
	padding-bottom: 100px;
}
.tia_artistes_area {
	position: relative;
	margin: 0 auto;
}
.tia_content_area {
	clear: both;
}
.tia_artistes_area .tia_content_text_area {
	padding: 30px 0 60px;
}
.tia_content_text_area h2 {
	margin-bottom: 24px;
	text-align: center;
	font-size: 24px;
	font-weight: normal;
	line-height: 1;
}
.tia_content_area p {
	max-width: 640px;
	margin: 0 auto;
	padding: 0 20px;
	color: #010101;
	font-size: 16px;
	line-height: 1.7;
}
.close {
	width: 300px;
	margin: 0 auto;
	text-align: center;
	margin-top: 100PX;
	padding: 30px 0;
	background-color: blue;
	color: #fff;
	cursor: pointer;
}

.mask {
	display: inline-block;
	width: 100%;
	height: 100%;
	background-color: #000;
	opacity: 0.3;
	position: absolute;
	top: 0;
	left: 0;
}
</style>
</head>

<body>
<div class="article">

<!-- ARTISTE INDEX -->
<div id="artist1" class="artistes_main_visual">
 <span class="mask"></span>
 <img src="assets/images/mainvisual-01.jpg">
 <h2 class="txt">ARTIST 1</h2>
</div>
<div class="tia_container">
 <!-- content_area -->
 <div class="tia_content_area tia_artistes_area">
  <div class="tia_content_text_area">
   <h2>ARTIST 1</h2>
   <p>TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.</p>
  </div>
  <!-- ARTIST IMAGE -->
  <div id="1st" class="artist-image section"><img src="assets/images/BANNER-01.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-02.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-03.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-04.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-05.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-06.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-07.jpg"></div>
  <div class="artist-image tac under250 section"><img src="assets/images/BANNER-08.jpg"></div>
  <!-- ARTIST IMAGE -->
 </div>
 <!-- /content_area -->
 <a class="close" href='#artist1'>CLOSE</a>
</div>
<!-- /ARTISTE INDEX -->

<!-- ARTISTE INDEX -->
<div id="artist2" class="artistes_main_visual">
 <span class="mask"></span>
 <img src="assets/images/mainvisual-02.jpg">
 <h2 class="txt">ARTIST 2</h2>
</div>
<div class="tia_container">
 <!-- content_area -->
 <div class="tia_content_area tia_artistes_area">
  <div class="tia_content_text_area">
   <h2>ARTIST 2</h2>
   <p>TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.TEXT TEXT TEXT TEXT TEXT.</p>
  </div>
  <!-- ARTIST IMAGE -->
  <div id="1st" class="artist-image section"><img src="assets/images/BANNER-01.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-02.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-03.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-04.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-05.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-06.jpg"></div>
  <div class="artist-image section"><img src="assets/images/BANNER-07.jpg"></div>
  <div class="artist-image tac under250 section"><img src="assets/images/BANNER-08.jpg"></div>
  <!-- ARTIST IMAGE -->
 </div>
 <!-- /content_area -->
 <a class="close" href='#artist2'>CLOSE</a>
</div>
<!-- /ARTISTE INDEX -->

</body>
</html>

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

回答1件

ベストアンサー

サムネイルというか、凄く大きい画像に見えるのですが、
例えば開いたアコーディオンには必ず閉じるボタンがあるならば、その閉じるボタンがクリックされたら
ARTIST番号へアンカーリンクで飛ばしちゃえばいいんじゃないですか？　（閉じるボタンが見当たりません）

   $('a[href^="#"]').click(function() {

      var speed = 1000; 
      var href= $(this).attr("href");
      var target = $(href == "#" || href == "" ? 'html' : href);
      var position = (target.offset().top);
      $('body,html').animate({scrollTop:position}, speed, '');
      return false;
   });

アコーディオンを開く時に、既に開いているアコーディオンを閉じたい場合ですが、
コンテナが開かれたら、現在開かれているコンテナ情報を保持しておき
閉じられたら削除する。
閉じられること無く他のコンテナが開かれたら、保持してあるコンテナを閉じる。

これをスクリプトで書けば良いと思います。

投稿2017/10/04 06:57

編集2017/10/05 05:13

shaak

総合スコア607

退会済みユーザー

2017/10/05 05:07 編集

shaakさん shaakさんのヒントを元にJS直してみたらスクロールしながらARTISTのところに戻りながら閉じるようになりました！ありがとうございます！（こちらのソースコードも書き換えました！）アコーディオンを開く時に、既に開いているアコーディオンを閉じるのは書き方がわからないので、調べてやってみます。

shaak

2017/10/05 05:36

正しい処理ではないですが1番簡単な方法は $('.artistes_main_visual').click(function(){ $(this).next('.tia_container').slideToggle(600); }); ここの処理で、slideToggleするまえに一度全部閉じる処理いれちゃえば実現出来ると思います。 $('.artistes_main_visual').click(function(){ $('.tia_container').slideUp(1000); $(this).next('.tia_container').slideToggle(600); });

退会済みユーザー

2017/10/05 05:55

shaakさんコメントありがとうございます！教えてもらった方法でローカル環境でやってみたのですが、意図した動きになりませんでした。。ご教授いただいたのにすみません。。泣

shaak

2017/10/05 05:56

あら！それは失礼しました。codepenなどで上げてもらえれば直接試せるので楽なんですが

shaak

2017/10/05 06:10

正しい処理かは置いておいて、考え的にはこんな感じです $(function() { var current = 0; $('.artistes_main_visual').click(function(){ if(current != 0){ current.slideUp(600); } $(this).next('.tia_container').slideToggle(600); current = $(this).next('.tia_container'); flag = true; }); // $('.close').click(function(){ // $(this).parent('.tia_container').slideUp(600); // }); $('a[href^="#"]').click(function() { $(this).parent('.tia_container').slideUp(1000); var current = 0; var speed = 1000; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = (target.offset().top); $('body,html').animate({scrollTop:position}, speed, ''); return false; }); }); currentに開いた要素を格納しておいて、閉じられたら中身を0にします。どこかのボタンが押されたタイミングで、currentが０でなければその要素にslideupするこれで取り敢えずは動きます。（正しいかは知りません）

退会済みユーザー

2017/10/08 02:47

shaakさんありがとうございます！正しい動きではなかったのですが、考え方など教えていただいたので、こちらを元に工夫してみたいと思います！本当にありがとうございました！ベストアンサーとさせていただきます！

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