Change panel background color by clicking

Asked

Viewed 57 times

-1

The above code works as an accordion, is the same as the accordion code of Bootstrap. I wonder, how to do user by clicking on "Panel-Heading", he stick to the green background, and when back stay with the white background without affecting the Heading from below. That is: Before clicking it will be with the white background. After that click will have the green background.

<head>
  <!-- CSS only -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

  <!-- JS, Popper.js, and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</head>

<body>
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            <div class="row">
              <div class="col-sm-3">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                    <p class="card-text" style="text-align: center">5 vendas</p>
                  </div>
                </div>
              </div>
              <div class="col-sm-3">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                    <p class="card-text" style="text-align: center">5 vendas</p>
                  </div>
                </div>
              </div>
              <div class="col-sm-3">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                    <p class="card-text" style="text-align: center">5 vendas</p>
                  </div>
                </div>
              </div>
              <div class="col-sm-3">
                <div class="card">
                  <div class="card-body">
                    <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                    <p class="card-text" style="text-align: center">5 vendas</p>
                  </div>
                </div>
              </div>
            </div>
          </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>

          </div>
        </div>
        <div class="panel-body">
          <div class="row">
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>
            <div class="col-sm-3">
              <div class="card">
                <div class="card-body">
                  <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                  <p class="card-text" style="text-align: center">5 vendas</p>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>
    </div>
  </div>
</body>

javascript css

  • Paul could be more specific in his question because I see three situations that might make sense with his example but I don’t know which to present.

  • By clicking to expand, change the color of the panel-Heading, and when to shrink the color return to normal

1 answer

1


Cara found it kind of strange the way you set up the structure to show the cards, but to change the color just use this CSS. I used the selector [aria-expanded="true"] to pick up when the element is open and put the color.

  .accordion-toggle[aria-expanded="true"] > .row .card {
    background-color: green !important;
  }

inserir a descrição da imagem aqui

You can also use the jQuery event with the class Trigger .show to add an extra class. But I found CSS simpler to do.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" />
<style>
  .accordion-toggle[aria-expanded="true"] > .row .card {
    background-color: green !important;
  }
</style>
</head>
<body>
  
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
                    <div class="row" >
                        <div class="col-sm-3">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                    <p class="card-text" style="text-align: center">5 vendas</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                    <p class="card-text" style="text-align: center">5 vendas</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                    <p class="card-text" style="text-align: center">5 vendas</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-sm-3">
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                    <p class="card-text" style="text-align: center">5 vendas</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <div class="row" >
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="panel-body">
                <div class="row" >
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="panel-body">
                <div class="row" >
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
            <div class="panel-body">
                <div class="row" >
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="card">
                            <div class="card-body">
                                <h5 class="card-title" style="text-align: center">Reclamações abertas</h5>
                                <p class="card-text" style="text-align: center">5 vendas</p>
                            </div>
                        </div>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
  
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
</body>
</html>

  • It didn’t change the color, it didn’t do anything. I want it to expand it to change the color of the panel-Heading

  • @Paul I think I understand, I adjusted the answer and now he’s changing the color of the correct element

  • @hugocsl, there is one more possibility of responding, three to the total. There is the possibility that only the clicked item has the background color changed. I asked for clarification but the author gave a somewhat explanatory reply.

  • only one more question, because it is changing only the card, and for min change p panel-Heading all, and not only the card

  • @Paul just add .panel-collapse.show .card {&#xA; background-color: green !important;&#xA; } in the CSS

  • 1

    @Augustovasques don’t expect "perfect" questions around here. Until pq not every answer is "perfect"... And for me, particularly, what the AP wrote was enough to understand and come up with an answer.

  • 1

    It is fair guidance. Thank you.

  • 1

    Guys thanks for the, reply, gave right here!

Show 3 more comments

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.