默认手风琴按钮错误

Question

我正在尝试用 plus min 制作一个手风琴按钮。但是当我启动我的网站时，默认是打开的（用 min 按钮折叠）。

这是我的代码：

<div id="accordion">
                    <div class="col-6 col-md-6 col-lg-6" style="float: right">
                    <div class="accordion">
                        <div class="accordion-header accordion-button text-start" role="button" data-toggle="collapse" data-target="#panel-body-13" aria-expanded="true">
                        <h4>Apa itu Dimensy?</h4>   
                        </div>
                        <div class="accordion-body collapse show text-start" id="panel-body-13" data-parent="#accordion">
                            <p class="mb-0">
                                Digital Document Security atau Dimensy adalah sebuah platform yang mendistribusikan produk-produk keamanan digital yang berkolaborasi dengan Perusahaan Umum Percetakan Uang Republik Indonesia (PERURI). Produk - produk digital Dimensy ini dapat diaskes melalui 2 interface: <i>mobile based</i> maupun <i>web based</i></p>
                                Dimensy sendiri memiliki 5 produk digital antara lain:
                                <ul>
                                    <li><p class="mb-0">Stampel Digital</p></li>
                                    <li><p class="mb-0">Tanda Tangan Digital</p></li>
                                    <li><p class="mb-0">Otentifikasi Sertifikat Digital</p></li>
                                    <li><p class="mb-0">KEYLA</p></li>
                                    <li><p class="mb-0">Meterai Elektronik</p></li>
                                </ul>
                            </p>                          
                        </div>
                    </div>
               </div>
           </div>

还有风格：

.accordion .accordion-header:hover {
 background-color: #f2f2f2;
 }
.accordion .accordion-header[aria-expanded="true"] {
 box-shadow: 0 2px 6px #acb5f6;
 background-color: #029fe6;
 color: #fff;
 }
.accordion .accordion-body {
line-height: 24px;
}

.accordion-button::after {
 background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' 
 xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M8 0a1 1 0 0 1 1 
 1v6h6a1 1 0 1 1 0 2H9v6a1 1 0 1 1-2 0V9H1a1 1 0 0 1 0-2h6V1a1 1 0 0 1 1-1z' clip- 
 rule='evenodd'/%3e%3c/svg%3e");
 transform: scale(.7) !important;
 }
 .accordion-button:not(.collapsed)::after {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='%23333' 
   xmlns='http://www.w3.org/2000/svg'%3e%3cpath fill-rule='evenodd' d='M0 8a1 1 0 0 1 1- 
   1h14a1 1 0 1 1 0 2H1a1 1 0 0 1-1-1z' clip-rule='evenodd'/%3e%3c/svg%3e");
  }

输出：

enter image description here

我想要的是网站启动时，默认不折叠加号按钮。

Answer 1

这里的类名有错别字，collapse vs collapsed：

<div class="accordion-body collapse show text-start" id="panel-body-13" data-parent="#accordion">

.accordion-button:not(.collapsed)::after {