2016-03-25 20 views
0

Ben aşağıda tanımlanan iki düğme vardır:İki farklı düğme bölümünde iki farklı düğme tıklamasıyla nasıl daraltılır ve daraltılır?

<button href="#select" class="btn btn-default" data-toggle="collapse"> 
     Select 
</button> 

<button href="#add" class="btn btn-default" data-toggle="collapse"> 
     Add 
</button> 

Ve aşağıda olarak tanımlanan iki farklı div bölümleri vardır:

<div id="select" class="collapse"> 
     Select your option 
</div> 

<div id="add" class="collapse"> 
     Add your option 
</div> 

Düğmeye 'seçeneğini tıklayın

seçeneğini div daraltılmıştır.
Bundan sonra 'ekle' düğmesini tıklatırsam, div seç düğmesinin hemen altına daraltılır.

Aynı anda yalnızca bir div gösterilmesini istiyorum. 'Select' seçeneğine tıklandığında div seçilmeli ve kullanıcı 'add' div (div) 'ı tıklatırsa div()' ı (div) daraltmalı ve sadece gösterilmek üzere div ve tam tersi olmalıdır.

Yukarıdaki yolu denedim, ancak beklenen sonucu elde edemiyorum. İstediğim davranışa ulaşmanın herhangi bir yolu var mı?

Teşekkürler!

cevap

0

Her iki div bölümünüzü de .panel ve daha sonra bir kimliği olan bir ana kapsayıcıya sarın.

+0

https://jsfiddle.net/dszc5q5r/ You çok @potatopeelings ederiz - Sonra Fiddle sizin div

<div id="parent"> <div class="panel"> <div id="select" class="collapse" data-parent="#parent"> Select your option </div> </div> <div class="panel"> <div id="add" class="collapse panel" data-parent="#parent"> Add your option </div> </div> </div> 

bir data-parent özellik olarak id ekleyin. Mükemmel çalıştı! :) – Kristy