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

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

ただいまの
回答率

87.78%

要素をクリック時、アコーディオンを開き背景を変え、それ以外を開いたときに背景色を戻したい。

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 1
  • VIEW 2,231

score 15

前提・実現したいこと

イメージ的にはこのような感じです。
イメージ説明

HTML,CSS,Javascriptで、アコーディオンを3つ掲載しているページがあります。
①アコーディオン1
②アコーディオン2
③アコーディオン3

複数開くようにしています。
アコーディオンはそれぞれ<div>で囲まれており
アコーディオン1を開くと1のアコーディオンが開き、アコーディオン1を囲っている背景(白に)が変わります。
アコーディオンは1つだけ開くようにしています。

そこで、例えばアコーディオン2をクリックしたとき、アコーディオン2の背景を変え、アコーディオン1の背景をもとに戻したいのです。
クリックした<div>を白にして、それ以外の背景をもとに戻したいです。

よろしくお願い申し上げます。

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

アコーディオンは閉じますが、背景が変わりません。

該当のソースコード

<script src="js/jquery-3.3.1.min.js"></script>


<body>

<div class="bgBox">ffffffffffffff

<ul class="accordion">
    <li>
        <p id="p1" class="ac1">アコーディオン1</p>
        <ul class="inner">
            <li class="content1-1">コンテンツ1</li>
            <li class="content1-2">コンテンツ2</li>
            <li class="content1-3">コンテンツ3</li>
        </ul>
    </li>
</ul>
</div>



<p> </p><p> </p>

<div class="bgBox2">ffffffffffffff
<ul class="accordion">
    <li>
        <p id="p2" class="ac2">アコーディオン2</p>
        <ul class="inner">
            <li class="content2-1">コンテンツ1</li>
            <li class="content2-2">コンテンツ2</li>
            <li class="content2-3">コンテンツ3</li>
        </ul>
    </li>
</ul>
</div>

<p> </p><p> </p>


<div class="bgBox3">ffffffffffffff
<ul class="accordion">
    <li>
        <p id="p3" class="ac3">アコーディオン3</p>
        <ul class="inner">
            <li class="content3-1">コンテンツ1</li>
            <li class="content3-2">コンテンツ2</li>
            <li class="content3-3">コンテンツ3</li>
        </ul>
    </li>
</ul>
</div>


<style>
.accordion {text-align: center;}
.accordion .inner {display: none;}
.accordion p{cursor: pointer; padding: 10px;}
.accordion p.ac1{background: #F50057;position: relative;}
.accordion p.ac2{background: #FFEA00;position: relative;}
.accordion p.ac3{background: #64DD17;position: relative;}
.accordion .inner li{padding: 10px 0;}
.accordion .inner li.content1-1{background: #F48FB1;}
.accordion .inner li.content1-2{background: #F8BBD0;}
.accordion .inner li.content1-3{background: #FCE4EC;}
.accordion .inner li.content2-1{background: #FFF59D;}
.accordion .inner li.content2-2{background: #FFF9C4;}
.accordion .inner li.content2-3{background: #FFFDE7;}
.accordion .inner li.content3-1{background: #C5E1A5;}
.accordion .inner li.content3-2{background: #DCEDC8;}
.accordion .inner li.content3-3{background: #F1F8E9;}

p.ac1:after,p.ac2:after,p.ac3:after {
  content: "";
  position: absolute;
  right: 25px;
  top: 38%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

p.ac1.open:after,p.ac2.open:after,p.ac3.open:after {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 45%;
}



.bgBox,.bgBox2,.bgBox3{
  background-color:white;
  padding : 20px;
   transition: all 0.2s ease-in-out;
}
.bgBox{
  background-color:orange;
}
.bgBox2{
  background-color:yellow;
}
.bgBox3{
  background-color:green;
}
.bgPink{
  background-color:pink;
}
.bgyellow{
  background-color:yellow;
}
.bggreen{
  background-color:green;
}
.bgwhite{
  background-color:white;
}
</style>
<script>
$(function(){

    //.accordionの中のp要素がクリックされたら
    $('.accordion p').click(function(){

        //クリックされた.accordionの中のp要素に隣接する.accordionの中の.innerを開いたり閉じたりする。
        $(this).next('.accordion .inner').slideToggle();

        //クリックされた.accordionの中のp要素以外の.accordionの中のp要素に隣接する.accordionの中の.innerを閉じる
        $('.accordion p').not($(this)).next('.accordion .inner').slideUp();

        /*矢印の向きを変更*/
               $(this).toggleClass('open');

       //クリックしたaccordion-title以外の全てのopenを取る
          $("p.ac1,p.ac2,p.ac3").not(this).removeClass("open");

    });
});



$(function(){

$("#p1").click(function() {
    // cssで背景色を切り替え
    $(".bgBox").toggleClass("bgwhite");
  });

$("#p2").click(function() {
    // cssで背景色を切り替え
    $(".bgBox2").toggleClass("bgwhite");
  });

$("#p3").click(function() {
    // cssで背景色を切り替え
    $(".bgBox3").toggleClass("bgwhite");
  });


});
</script>



</body>

試したこと

.not($(this)) を様々使ってみましたがだめでした。

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

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

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

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

    クリップを取り消します

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

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

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

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

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

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

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

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

    質問の評価を下げる

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

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

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

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

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

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

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

    詳細な説明はこちら

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

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

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

質問への追記・修正、ベストアンサー選択の依頼

  • yambejp

    2019/07/03 17:28

    ソースは上下を「```」で囲んでください

    キャンセル

  • yajio

    2019/07/03 17:37

    yambejpさん、ありがとうございます。
    使い方がまだわからず助かりました。
    よろしくお願い申し上げます。

    キャンセル

回答 1

checkベストアンサー

+1

アコーディオンは閉じますが、背景が変わりません。 

閉じるなら背景かわっても見えないのでは?

<style>
.active{background-Color:red}
</style>
<script>
$(function(){
  $('.accordion ul').hide();
  $('.accordion p').on('click',function(){
    $('.accordion p').not($(this)).next('ul').slideUp().removeClass('active');
    $(this).next('ul').slideToggle().toggleClass('active');
  });
});
</script>
<div class="bgBox">ffffffffffffff
  <ul class="accordion">
    <li>
    <p id="p1" class="ac1">アコーディオン1</p>
    <ul class="inner">
      <li class="content1-1">コンテンツ1</li>
      <li class="content1-2">コンテンツ2</li>
      <li class="content1-3">コンテンツ3</li>
    </ul>
    </li>
  </ul>
</div>
<div class="bgBox2">ffffffffffffff
  <ul class="accordion">
    <li>
    <p id="p2" class="ac2">アコーディオン2</p>
    <ul class="inner">
      <li class="content2-1">コンテンツ1</li>
      <li class="content2-2">コンテンツ2</li>
      <li class="content2-3">コンテンツ3</li>
    </ul>
    </li>
  </ul>
</div>
<div class="bgBox3">ffffffffffffff
  <ul class="accordion">
    <li>
    <p id="p3" class="ac3">アコーディオン3</p>
    <ul class="inner">
      <li class="content3-1">コンテンツ1</li>
      <li class="content3-2">コンテンツ2</li>
      <li class="content3-3">コンテンツ3</li>
    </ul>
    </li>
  </ul>
</div> 

追記

こういうことですかね?

$(function(){
  $("#p1").click(function() {
    $(".bgBox").toggleClass("bgwhite").siblings('.bgwhite').removeClass('bgwhite');
  });
  $("#p2").click(function() {
    $(".bgBox2").toggleClass("bgwhite").siblings('.bgwhite').removeClass('bgwhite');
  });
  $("#p3").click(function() {
    $(".bgBox3").toggleClass("bgwhite").siblings('.bgwhite').removeClass('bgwhite');
  });
});

投稿

編集

  • 回答の評価を上げる

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

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

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

  • 回答の評価を下げる

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

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

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

  • 2019/07/03 16:33

    yambejpさんありがとうございます。
    bgBox○ の中にはそれぞれアコーディオン以外にもコンテンツが含まれるのです。
    よろしくお願い申し上げます。

    キャンセル

  • 2019/07/03 17:39

    調整しました

    キャンセル

  • 2019/07/03 18:06

    yambejpさん、うわ~ありがとうございます!
    まさにこれです~!!!
    本当にありがとうございます!
    私もこれを機にjs勉強させていただきます。
    また行き詰まりましたらご教授いただけますと幸いでございます。

    キャンセル

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

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

関連した質問

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