title: Fixing this accordion element
body: <p>I have the following CodePen:</p>
  <p><a href="https://codepen.io/LiemLT/pen/zYojvGb" rel="nofollow noreferrer">https://codepen.io/LiemLT/pen/zYojvGb</a></p>
  <p>When I click a header button, it will show the card-body and the :after element will change from &quot;down&quot; to &quot;up&quot;. When I click <strong>that same header button</strong> again, the card-body will be collapsed and the :after element will change from &quot;up&quot; to &quot;down&quot;.</p>
  <p>Here's the problem:</p>
  <p>After I click a header button to show the content of card-body, rather than clicking the same header button again, I click the header button of a <strong>sibling element</strong>, the card-body of the first card is closed, but the :after element of that header button is still &quot;up&quot;. I need to fix this.</p>
  <p>Sorry if my explanation feels vague, English isn't my native language.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var acc = document.getElementsByClassName("btn-block");
  var i;
  
  for (i = 0; i &lt; acc.length; i++) {
      acc[i].addEventListener("click", function () {
          this.classList.toggle("active");
      });
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.qa {
      background-color:#f7f7f7;
  }
  
  .qa .card {
      margin-bottom: 1rem;
  }
  
  .qa .card-header {
      background-color: #fff;
  }
  
  .qa .btn:focus {
      box-shadow: none;
  }
  
  .qa .card-header .btn::after {
      content: '\f078';
      font-family: "Font Awesome 5 Free";
      float: right;
      font-size: 14px;
      font-weight: 900;
  }
  
  .qa .card-header .btn.active::after {
      content: '\f077';
      font-family: "Font Awesome 5 Free";
      float: right;
      font-size: 14px;
      font-weight: 900;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html lang="en"&gt;
  
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
      &lt;link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon"&gt;
  
      &lt;!-- Bootstrap 4.6 CSS --&gt;
      &lt;link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css"&gt;
  
      &lt;!-- FontAwesome CSS --&gt;
      &lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" /&gt;
  
      &lt;!-- FancyBox CSS --&gt;
      &lt;link rel="stylesheet" href="./css/jquery.fancybox.css"&gt;
  
      &lt;!-- Start Selling CSS --&gt;
      &lt;link rel="stylesheet" href="./css/start_selling.css"&gt;
      &lt;title&gt;Start Selling on Fiverr&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;section class="qa"&gt;
          &lt;div class="container py-5"&gt;
              &lt;h2 class="text-center mb-5"&gt;Q&amp;A&lt;/h2&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-lg-6 px-0"&gt;
                      &lt;div class="accordion" id="accordionL"&gt;
                          &lt;div class="card"&gt;
                              &lt;div class="card-header" id="heading1"&gt;
                                  &lt;h2 class="mb-0"&gt;
                                      &lt;button class="btn btn-block text-left" type="button" data-toggle="collapse"
                                          data-target="#collapse1" aria-expanded="true" aria-controls="collapse1"&gt;
                                          What can I sell?
                                      &lt;/button&gt;
                                  &lt;/h2&gt;
                              &lt;/div&gt;
  
                              &lt;div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordionL"&gt;
                                  &lt;div class="card-body"&gt;
                                      Be creative! You can offer any service you wish as long as it's legal and complies
                                      with our terms. There are over 200 categories you can browse to get ideas.
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="card"&gt;
                              &lt;div class="card-header" id="heading2"&gt;
                                  &lt;h2 class="mb-0"&gt;
                                      &lt;button class="btn btn-block text-left collapsed" type="button"
                                          data-toggle="collapse" data-target="#collapse2" aria-expanded="false"
                                          aria-controls="collapse2"&gt;
                                          How much money can I make?
                                      &lt;/button&gt;
                                  &lt;/h2&gt;
                              &lt;/div&gt;
                              &lt;div id="collapse2" class="collapse" aria-labelledby="heading2" data-parent="#accordionL"&gt;
                                  &lt;div class="card-body"&gt;
                                      It's totally up to you. You can work as much as you want. Many sellers work on
                                      Fiverr full time and some keep their 9-5 job while using Fiverr to make extra money.
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="card"&gt;
                              &lt;div class="card-header" id="heading3"&gt;
                                  &lt;h2 class="mb-0"&gt;
                                      &lt;button class="btn btn-block text-left collapsed" type="button"
                                          data-toggle="collapse" data-target="#collapse3" aria-expanded="false"
                                          aria-controls="collapse3"&gt;
                                          How much does it cost
                                      &lt;/button&gt;
                                  &lt;/h2&gt;
                              &lt;/div&gt;
                              &lt;div id="collapse3" class="collapse" aria-labelledby="heading3" data-parent="#accordionL"&gt;
                                  &lt;div class="card-body"&gt;
                                      It's free to join Fiverr. There is no subscription required or fees to list your
                                      services. You keep 80% of each transaction.
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="col-lg-6 px-0"&gt;
                      &lt;div class="accordion" id="accordionR"&gt;
                          &lt;div class="card"&gt;
                              &lt;div class="card-header" id="heading4"&gt;
                                  &lt;h2 class="mb-0"&gt;
                                      &lt;button class="btn btn-block text-left" type="button" data-toggle="collapse"
                                          data-target="#collapse4" aria-expanded="true" aria-controls="collapse4"&gt;
                                          How much time will I need to invest?
                                      &lt;/button&gt;
                                  &lt;/h2&gt;
                              &lt;/div&gt;
  
                              &lt;div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordionR"&gt;
                                  &lt;div class="card-body"&gt;
                                      It's very flexible. You need to put in some time and effort in the beginning to
                                      learn the marketplace and then you can decide for yourself what amount of work you
                                      want to do.
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="card"&gt;
                              &lt;div class="card-header" id="heading5"&gt;
                                  &lt;h2 class="mb-0"&gt;
                                      &lt;button class="btn btn-block text-left collapsed" type="button"
                                          data-toggle="collapse" data-target="#collapse5" aria-expanded="false"
                                          aria-controls="collapse5"&gt;
                                          How do I price my service?
                                      &lt;/button&gt;
                                  &lt;/h2&gt;
                              &lt;/div&gt;
                              &lt;div id="collapse5" class="collapse" aria-labelledby="heading5" data-parent="#accordionR"&gt;
                                  &lt;div class="card-body"&gt;
                                      With Gig Packages, you set your pricing anywhere from $5 - $995 and offer three
                                      versions of your service at three different prices.
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div class="card"&gt;
                              &lt;div class="card-header" id="heading6"&gt;
                                  &lt;h2 class="mb-0"&gt;
                                      &lt;button class="btn btn-block text-left collapsed" type="button"
                                          data-toggle="collapse" data-target="#collapse6" aria-expanded="false"
                                          aria-controls="collapse6"&gt;
                                          How do I get paid?
                                      &lt;/button&gt;
                                  &lt;/h2&gt;
                              &lt;/div&gt;
                              &lt;div id="collapse6" class="collapse" aria-labelledby="heading6" data-parent="#accordionR"&gt;
                                  &lt;div class="card-body"&gt;
                                      Once you complete a buyer's order, the money is transferred to your account. No need
                                      to chase clients for payments and wait 60 or 90 days for a check.
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/section&gt;
      &lt;script src="https://code.jquery.com/jquery-3.5.1.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
      &lt;script src="./js/jquery.fancybox.js"&gt;&lt;/script&gt;
      &lt;script src="./js/start_selling.js"&gt;&lt;/script&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>