jQueryでページ先頭にスクロールし、上に開くアコーディオン

###前提・実現したいこと

下記のヤフー動画のような、ページ先頭にスクロールしてアコーディオンを上側に開く動きを実現したいのですが、実現方法が分からず困っております。
http://video.search.yahoo.co.jp/search;_ylt=A2RCD0.0N2ZYaF4AnTiHrPN7;_ylu=X3oDMTBhOWNlbW1mBHZ0aWQDVlMwMDE-?p=%E7%8C%AB&aq=-1&oq=&ei=UTF-8

###発生している問題・エラーメッセージ

下記のサイトを参考に、jQueryでページ先頭にスクロールするアコーディオンは実現できたのですが、アコーディオンが下に開いてしまい、上に開かない状態です。
http://pops-web.com/main/pops/archives/363

「.slideToggle()」の前に「.prev()」をつければ上に開くとの情報があり試しましたが、実現できませんでした。

###試したこと
下記のようなコードで、ページ先頭にスクロールするアコーディオンまでは出来ております。

<script type="text/javascript">
(function($){

$(function(){

  //速度
  var slide_speed=400;
  //active要素を指定して開く
  var no=0;
  var keep_Item;
  //----------------------------------
  var accordionItem=$('#accordion-42x');//Item
  //MENUブロック一旦非表示
  accordionItem.find('.accordion-block').hide();
  //active要素を指定して開く
  accordionItem.find('h3').eq(no).addClass('active').next('div').show(100,function(){
    //指定要素位置にスクロール
    scroll_top(accordionItem.find('h3').eq(no));
  });
  //click-action
  accordionItem.find('h3').click(function() {
    //hit判定クラス
    $(this).toggleClass("active");
    var slideItem=$(this).next('div');
    keep_Item=$(this);
    //hit分岐処理
    if ($(this).hasClass('active')) {
      //hitクラス切り替、開いている要素を閉じる
      var siblingsItem=$(this).siblings('div:visible');
      if(siblingsItem.length){
        siblingsItem.slideUp(slide_speed,function() {
          siblingsItem.prev('h3').toggleClass("active");
          slideItem.slideToggle(slide_speed,function() {
            //scroll
            scroll_top(keep_Item);
          });
        });
      }else{
        //開いている要素がない
        slideItem.slideToggle(slide_speed,function() {
          //scroll
          scroll_top(keep_Item);
        });
      }
    }
    if (!$(this).hasClass('active')) {
      //hitクラスを閉じる
      slideItem.slideToggle(slide_speed,function() {
        //scroll
        scroll_top(keep_Item);
      });
    }
  });
  //hover-toggle
  accordionItem.find('h3').hover(function () {
    //toggle hoveredクラス
    $(this).toggleClass('hovered');
  });
  //scroll-accordion-top
  function scroll_top(scrollitem){
    var position=scrollitem.offset().top;
    $('body,html').animate({scrollTop:position-10},400);
  }
});
})(jQuery);
</script>

<div id="contents-wrap">

<div id="accordion-42x" class="accordion-box">
	<h3><img src="http://placehold.it/350x150" /></h3>
	<div class="accordion-block">
	<p>アコーディオンで開くコンテンツ</p>
	</div>

	<h3><img src="http://placehold.it/350x150" /></h3>
	<div class="accordion-block">
	<p>アコーディオンで開くコンテンツ</p>
	</div>

</div>
</div>

###補足

下記のコードでアコーディオンが上に開く動きは実現できましたが、上記コードの様にページ先頭にスクロールする動きが実現できませんでした。

<script type="text/javascript">
  $(function(){
       $(".acordion").hide();
       $(".triger").click(function(){
            $(".content").prev().slideToggle();
       });
       $(".acordion .close").click(function(){
            $(".acordion").slideToggle();
            $(".triger").parent().css("display","block");
       });
  });
  </script>

  <div class="acordion">
      <p class="close">close</p>
      <p><img src="http://placehold.it/650x150" /></p>
  </div>
  <div class="content">
      <p class="triger"><img src="http://placehold.it/350x150" /></p>
  </div>

年末のお忙しい時期に大変恐縮ではございますが、ご教示いただけましたら幸いでございます。

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

回答2件

ベストアンサー

補足のコードでは複数要素に対応できないとは思います。

JavaScript
1$( function() {
2	var $_acordion = $( '.acordion' );
3	$_acordion.hide();
4	$( '.triger' ).click( function() {
5		var $_self = $( this ), $_target = $_self.parent( '.content' ).prev();
6		if ( $_target.css('display') != 'block' ) {
7			$_acordion.hide(); // どれかが開いている状態の場合のみ animate で閉じる、というのが挙動としてはいいとは思うが面倒なので。
8			$( 'html, body' ).stop().animate( { scrollTop:$_self.offset().top-10 }, 400, function() {
9				$_target.slideDown();
10			} );
11		} else {
12			$_target.slideUp();
13		}
14	} );
15	$( '.acordion .close' ).click( function() {
16		$( this ).parent( '.acordion' ).slideUp();
17	} );
18} );
19```**動くサンプル：**[https://jsfiddle.net/pnuswebo/](https://jsfiddle.net/pnuswebo/)

投稿2016/12/30 18:40

kei344

総合スコア69400

ikemon

2016/12/31 02:08

kei344様、ご回答ありがとうございます！ご教示いただきましたコードで、ヤフー動画のようなアコーディオンの動き（http://video.search.yahoo.co.jp/search?ei=UTF-8&fr=sfp_as&aq=0&oq=%E3%81%AD%E3%81%93&p=%E3%81%AD%E3%81%93&meta=vc%3D）になるか確認しました所、１点だけ不明点がございました。 http://codepen.io/ikm/pen/KaPdLM お手数ですが上記コードをご確認いただけますでしょうか。 jQueryでページ先頭にスクロールし、上に開くアコーディオンは実現できたのですが、カラムレイアウトにした場合、アコーディオンを開くとレイアウトが崩れてしまいます。 http://codepen.io/ikm/pen/KaPdjMのような（かなりツギハギだらけのコード実用性はかなり低いです）アコーディオンが横幅いっぱいに開く表示にしたいのですが、ご教示いただきましたコードを改良して実現は可能でしょうか？

kei344

2016/12/31 03:59

> 実現は可能でしょうか？コードそのままではどうかわかりませんが可能です。

ikemon

2016/12/31 06:45

ありがとうございます！色々と調べながら試してみます。

ikemon

2017/01/03 09:15

kei344様よりご教示いただきましたコードを少し変えさせていただきまして、なんとか思い通りの動きが実現できました！ http://codepen.io/ikm/pen/JEjXao 展開するアコーディオンがカラム内にあるとレイアウトが崩れてしまうので、カラム外に書き、jQueryを各アコーディオン毎に個別で設定いたしました。１点だけ実現可能でしたらヒントをいただきたいのですが、アコーディオンで開くのは常に1つにするために、1つ目をクリックしてから2つ目を開くときに、1つ目を閉じさせる動きにしたいと思っているのですが可能でしょうか？

kei344

2017/01/03 10:09

> 可能でしょうか？可能です。

ikemon

2017/01/03 12:51

アコーディオン展開を開始する前に「.hide」で一旦すべてのアコーディオンを閉じる処理をすれば、実現できました！ありがとうございます。

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

すいません。ソースはないですけど、原理的にはスムーススクロール
みたいなページ内リンクでその位置までカーソル移動で解決できると思います。（display：noneみたいな隠れている要素には使用できないのでリンク先を予め出しておくか、リンク先を表示してから実行）

投稿2016/12/30 17:40

minehan

総合スコア170

ikemon

2016/12/31 02:30

minehan様、ご回答ありがとうございます！ http://codepen.io/ikm/pen/KaPdjM スムーススクロールでページ先頭にスクロールし、display:block、noneのクラス名をクリックで付与するコードで実現できました。ただ、display:noneの要素を開く場所は行の１つ上にする必要がございまして、上記のようなコードではデバイスサイズが変わった時（PC：3カラム　スマホ：１カラム）に対応が難しく実用的ではございませんでした。あとはjQueryのアコーディオンなどで上記のような、行の１つ上に開くという動きが出来れば解決するのですが、実現方法をご存知でしたらお教えいただけましたら幸いでございます。

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

あなたの回答