Закрыть div, если другой открыт с bootstrap

Question

Я хотел бы закрыть открытый div, если я нажму на другой. Теперь, если я открою его и откройте еще один, который все еще открыт. Я пробовал data-collapse-group, но не работал. я использовать загрузочный коллапс, но я не нашел ни одного кончик наконечника, как я мог бы решить эту проблему

Вот мой код:

 <!--válasszon--> 
<div class="container" id="choose"> 
    <div class="container"> 
    <div class="row"> 
     <div class="col-md-12" style="text-align:center;"> 
     <p class="title" style="color:#0eb493">VÁLASSZON!</p> 
     <img src="img/chooselogo.png" style="width:300px;margin-bottom:70px;"> 
     </div> 
    </div> 
    <div class="row"style="margin-bottom:60px;"> 
     <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapsedoc" aria-expanded="false" aria-controls="collapseExample"> 
     <p class="choosetitel"><img src="img/doc.png" style="margin-right:10px;padding-top:20px;">A4/A3 dokumentum nyomtatás</p> 
     <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p> 
     </div> 
     <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapsenevjegykartya" aria-expanded="false" aria-controls="collapseExample"> 
     <p class="choosetitel"><img src="img/nevjegykartya.png" style="margin-right:10px;padding-top:20px;">Névjegykártya</p> 
     <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p> 
     </div> 
     <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapseszorolap" aria-expanded="false" aria-controls="collapseExample"> 
     <p class="choosetitel"><img src="img/szorolap.png" style="margin-right:10px;padding-top:20px;">Szórólap</p> 
     <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p> 
     </div> 
    </div> 
    <div class="row" style="margin-bottom:70px;"> 
     <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapseplakat" aria-expanded="false" aria-controls="collapseExample"> 
     <p class="choosetitel"><img src="img/plakat.png" style="margin-right:10px;padding-top:20px;">Plakát</p> 
     <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p> 
     </div> 
     <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapsecegeslevp" aria-expanded="false" aria-controls="collapseExample"> 
     <p class="choosetitel"><img src="img/cegeslevp.png" style="margin-right:10px;padding-top:20px;">Céges levélpapír</p> 
     <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p> 
     </div> 
     <div class="col-md-4 choosehover" data-toggle="collapse" href="#collapseetikett" aria-expanded="false" aria-controls="collapseExample"> 
     <p class="choosetitel"><img src="img/etikett.png" style="margin-right:10px;padding-top:20px;">Etikettek</p> 
     <p class="choosecontent">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore</p> 
     </div> 
    </div> 
    </div> 
</div> 

<!--collapsedoc--> 
<div class="collapse" id="collapsedoc"> 

    doc 

</div> 
<!--nevjegykartya--> 
<div class="collapse" id="collapsenevjegykartya"> 

    nevjegy 

</div> 
<!--szorolap--> 
<div class="collapse" id="collapseszorolap"> 

    szorolap 

</div> 
<!--plakat--> 
<div class="collapse" id="collapseplakat"> 

    plakat 

</div> 
<!--ceges levelpapir--> 
<div class="collapse" id="collapsecegeslevp"> 

    cegeslevp 

</div> 
<!--etikett--> 
<div class="collapse" id="collapseetikett"> 

    etikett 

</div> 

Должен ли я писать пользовательские Javascript или я могу решить с начальной загрузкой?

Answer 1

Так же, как это вам нужно .. Check this DEMO

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingOne"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">A4/A3 dokumentum nyomtatás 
      </a> 
     </h4> 
    </div> 
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="panel-body">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
      </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingTwo"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">Névjegykártya 
      </a> 
     </h4> 
    </div> 
    <div id="collapseTwo" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="panel-body">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
      </div> 
    </div> 
    </div> 
    <div class="panel panel-default"> 
    <div class="panel-heading" role="tab" id="headingThree"> 
     <h4 class="panel-title"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="true" aria-controls="collapseThree">Szórólap 
      </a> 
     </h4> 
    </div> 
    <div id="collapseThree" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingThree"> 
     <div class="panel-body">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
      </div> 
    </div> 
    </div> 
</div>