【jQuery】クリック時の要素の回転について

Question

前提・実現したいこと

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">アコーディオン１</p>
        <ul class="inner">
            <li class="content1">コンテンツ</li>
            <li class="content1">コンテンツ２</li>
            <li class="content1">コンテンツ３</li>
            <li><span class="close">閉じる</span></li>
        </ul>
    </li>
    <li>
        <p class="ac arrow">アコーディオン２</p>
        <ul class="inner">
            <li class="content1">コンテンツ</li>
            <li class="content1">コンテンツ２</li>
            <li class="content1">コンテンツ３</li>
            <li><span class="close">閉じる</span></li>
        </ul>
    </li>
    <li>
        <p class="ac arrow">アコーディオン３</p>
        <ul class="inner">
            <li class="content1">コンテンツ</li>
            <li class="content1">コンテンツ２</li>
            <li class="content1">コンテンツ３</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

どのような考え方をしたら実現できるのかご教示いただきたいです。

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

[unee]

教えていただきありがとうございます！修正しました…！

Answer 1

$(function(){
//  $('.accordion p','.close').click(function(){
//                   ↓ ひとまとめに、CSSのセレクタと同じように書く
    $('.accordion p, .close').click(function(){
//  $(this).toggleClass(“.arrow02”);
//                      ↓       ↓ 全角を半角に
    $(this).toggleClass(".arrow02");
    } );
} ); 

Comments

[unee]

ありがとうございます！(何度もコメント編集し、申し訳ございません)

jQuery
$(function(){
$('.accordion p, .close').click(function(){
$(this).toggleClass('open');
} );
} );

openというcssを作成しました。
CSSに「.arrow:after」と開いている状態の「.arrow.open:after」を設定し、
accordion pをクリックした際は思っていた通りの動作になりました。
しかし、.closeにも.openが付与され、そちらは意図した動きではないです…。
.closeをクリックした時accordion pに.付いているopenを削除したいのですが、どうしたら良いでしょうか。

[unee]

連投すみません、上記項目解決しました！

removeClassで指定し、解決しております。
お騒がせいたしました。

ありがとうございます。