ブートストラップアコーディオンは順序なしリストでは機能しませんか？

Question

ブートストラップアコーディオンは機能していませんか？ 1つのリスト項目が開いたときに他のdivを非表示にしたいのですか？

<ul class="unstyled-list" id="accordion"> 
    <li class="clearfix" id="eveliidm4" data-toggle="collapse" data-parent="#accordion" data-target="#evecolm4"> 
     <div class="date">10 February 2017 </div> 
      <div class="place">Codart 2.0 - <span> A 48 hours coding bonanza. </span> </div> <i class="fa events3dots"></i> 
    </li> 
    <div class="evecol collapse" id="evecolm4"> 
     <p>text</p> 
     <img src="images/eventm4/codart.jpg" class="img-responsive"> 
    </div> 
    <li class="clearfix" id="eveliidm3" data-toggle="collapse" data-parent="#accordion" data-target="#evecolm3"> 
     <div class="date">19 January 2017 </div> 
     <div class="place">Recruitments - <span> Freshers' core committee recruitment drive. </span> </div> <i class="fa events3dots"></i> 
    </li> 
    <div class="evecol collapse" id="evecolm3"> 
     <br> 
     <img src="images/eventm3/recruitment.jpg" class="img-responsive"> 
    </div> 
</ul> 

Answer 1

がBootstrap 4 Accordion Documentationを見てみましょう：ここ

はコードです。彼らはdivを使用しています。これはあなたのliの使用に比べて問題かもしれません。また、「折りたたみ」や「カードブロック」など、使用するいくつかのIDとクラスが欠落しています。

以下は、ドキュメントが例として使用するコードです（私のコードではありません）。あなたの情報を例に記入し、必要に応じてCSSに合わせてクラスを追加することをお勧めします：

<div id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingOne"> 
     <h5 class="mb-0"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h5> 
    </div> 

    <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingTwo"> 
     <h5 class="mb-0"> 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h5> 
    </div> 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingThree"> 
     <h5 class="mb-0"> 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
      Collapsible Group Item #3 
     </a> 
     </h5> 
    </div> 
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
</div>