質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.80%

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

解決済

回答 2

投稿

  • 評価
  • クリップ 2
  • VIEW 4,547

score 39

前提・実現したいこと

下記のヤフー動画のような、ページ先頭にスクロールしてアコーディオンを上側に開く動きを実現したいのですが、実現方法が分からず困っております。
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>

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+2

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

$( function() {
    var $_acordion = $( '.acordion' );
    $_acordion.hide();
    $( '.triger' ).click( function() {
        var $_self = $( this ), $_target = $_self.parent( '.content' ).prev();
        if ( $_target.css('display') != 'block' ) {
            $_acordion.hide(); // どれかが開いている状態の場合のみ animate で閉じる、というのが挙動としてはいいとは思うが面倒なので。
            $( 'html, body' ).stop().animate( { scrollTop:$_self.offset().top-10 }, 400, function() {
                $_target.slideDown();
            } );
        } else {
            $_target.slideUp();
        }
    } );
    $( '.acordion .close' ).click( function() {
        $( this ).parent( '.acordion' ).slideUp();
    } );
} );

動くサンプル:https://jsfiddle.net/pnuswebo/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/01/03 18:15

    kei344様よりご教示いただきましたコードを少し変えさせていただきまして、なんとか思い通りの動きが実現できました!
    http://codepen.io/ikm/pen/JEjXao

    展開するアコーディオンがカラム内にあるとレイアウトが崩れてしまうので、カラム外に書き、jQueryを各アコーディオン毎に個別で設定いたしました。

    1点だけ実現可能でしたらヒントをいただきたいのですが、アコーディオンで開くのは常に1つにするために、1つ目をクリックしてから2つ目を開くときに、1つ目を閉じさせる動きにしたいと思っているのですが可能でしょうか?

    キャンセル

  • 2017/01/03 19:09

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

    キャンセル

  • 2017/01/03 21:51

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

    キャンセル

+1

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/12/31 11:30

    minehan様、ご回答ありがとうございます!

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

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.80%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る