現在サムネイルを押すとそのサムネイルに関する詳細情報がアコーディオンで表示されるものを製作中です。
詳細情報の最後に閉じるボタンを設置しているのですが、閉じるボタンを押すと詳細ページが長いので、思った動きになりません。
閉じるボタンを押すと、詳細情報が閉じ、元のサムネイル位置にスムーススクロールして戻って欲しいです。(例えば、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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/10/05 05:07 編集
2017/10/05 05:36
退会済みユーザー
2017/10/05 05:55
2017/10/05 05:56
2017/10/05 06:10
退会済みユーザー
2017/10/08 02:47