前提・実現したいこと
jQueryを使用してアコーディオンメニューを作成しております。
☆したいこと
<p>タグのついたタイトルまたは.closeをクリックしたら、 .arrowの「▲マーク(後で画像アイコンに差し替える可能性あり)」を180度半回転し閉じたい。 https://lab.sonicmoov.com/wp-content/uploads/demo/marizo/201507_accordion/#demo01☆出来たこと
<p>タグのついたタイトルをクリックすると展開し、 <p>タグのついたタイトルと.closeをクリックで閉じます。 複数のタブが開くことはありません。発生している問題・エラーメッセージ
いろいろ調べながらしてみましたが、
<p>タグのついたタイトルまたは.closeを連動させることが出来ませんでした。 また、今書いているコードと組み合わせる方法が分からないです。HTML
<ul class="accordion"> <li> <p class="ac arrow">アコーディオン1</p> <ul class="inner"> <li class="content1">コンテンツ</li> <li class="content1">コンテンツ2</li> <li class="content1">コンテンツ3</li> <li><span class="close">閉じる</span></li> </ul> </li> <li> <p class="ac arrow">アコーディオン2</p> <ul class="inner"> <li class="content1">コンテンツ</li> <li class="content1">コンテンツ2</li> <li class="content1">コンテンツ3</li> <li><span class="close">閉じる</span></li> </ul> </li> <li> <p class="ac arrow">アコーディオン3</p> <ul class="inner"> <li class="content1">コンテンツ</li> <li class="content1">コンテンツ2</li> <li class="content1">コンテンツ3</li> <li><span class="close">閉じる</span></li> </ul> </li> </ul>
jQuery
$(function(){ $('.accordion p').click(function(){ $(this).next('.accordion .inner').slideToggle(); $('.accordion p').not($(this)).next('.accordion .inner').slideUp(); }); $('.close').click(function () { $(this).parents('.accordion .inner').slideUp(); }); });
CSS
/*デザイン*/ ul{ list-style: none; } .accordion { text-align: center ;} .accordion .inner { display: none; } .accordion p{ cursor: pointer; padding: 10px; } .accordion p.ac{ background: #ccc; } .accordion .inner li{ padding: 10px 0; position: relative; } .accordion .inner li .close{ padding: 4px 5px ; background: #fff; border:1px solid #f0f0f0; border-radius: 10px; position:absolute; top:6px; right: 10px; font-size: 14px; cursor: pointer; } .accordion .inner li.content1{ background: #fff; } /*三角 イロイロ試した痕跡*/ .arrow:after{ content: "▼"; } .arrow02{ content: "▲"; }
試したこと
$(function(){
$('.accordion p','.close').click(function(){
$(this).toggleClass(“.arrow02”);
});
});
上記を新たに追加してみたりしておりました。
他参考にしたページ
https://jquery-jp.com/accordion/
https://www.jungleocean.com/demo/jquery-accordion/
https://lab.sonicmoov.com/wp-content/uploads/demo/marizo/201507_accordion/#demo01
どのような考え方をしたら実現できるのかご教示いただきたいです。
回答1件
あなたの回答
tips
プレビュー