Свернуть загрузчик: показать одну скрыть другую
У меня проблема с коллапсом. То, что я хочу сделать, это когда я нажимаю, чтобы показать развал, другие шкуры, и наоборот.
Я основал свою работу на ответе в этой статье (Bootstrap: сворачивание других разделов при раскрытии)
мой код: (PHP работает нормально)
<div class="single-product-tab" id="myGroup">
<h3 class="col-md-6 widget-title border-left mb-20">
<a data-toggle="collapse" aria-expanded="false" id="lien_Fiche_Technique" data-target="#Fiche_Technique" data-parent="#myGroup">
<?php echo $intitule_fiche; ?>
</a>
</h3>
<h3 class="col-md-6 widget-title border-left mb-20">
<a data-toggle="collapse" aria-expanded="false" id="lien_Support" data-target="#Support" data-parent="#myGroup">
<?php echo $Support; ?>
</a>
</h3>
<div class="accordion-group">
<div class="collapse" id="Fiche_Technique" data-parent="#myGroup">
<div class="card card-body">
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="description">
<table class="table table-striped">
<tbody>
<?php foreach ($list_produits as $value) { ?>
<?php if($value['libelle'] !="") { ?>
<tr>
<td width="50%">
<p class="color-title "><b><?php echo html_entity_decode($value['attribute']); ?></p></b></td>
<td width="50%">
<center>
<p class="text-black-1">
<?php echo html_entity_decode($value['libelle']);?>
</p>
</center>
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="collapse" id="Support" data-parent="#myGroup">
<div class="card card-body">
<div class="tab-content ">
<div role="tabpanel" class="tab-pane active" id="description">
<table class="table table-striped">
<tbody>
<?php foreach ($list_Support_produits as $value) { ?>
<?php if($value['libelle'] !="") { ?>
<tr>
<td width="50%">
<p class="color-title "><b><?php echo html_entity_decode($value['attribute']); ?></p></b></td>
<td width="50%">
<center>
<p class="text-black-1">
<?php echo html_entity_decode($value['libelle']);?>
</p>
</center>
</td>
</tr>
<?php } ?>
<?php } ?>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Решение
Попробуйте что-то вроде ниже или переключите свойство aria-extended через Jquery или javascript
<ul class="nav nav-pills">
<li class="active"><a data-toggle="pill" href="#home">Home</a></li>
<li><a data-toggle="pill" href="#menu1">Menu 1</a></li>
<li><a data-toggle="pill" href="#menu2">Menu 2</a></li>
<li><a data-toggle="pill" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade ">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
</div>
Другие решения
Других решений пока нет …