Свернуть загрузчик: показать одну скрыть другую - PullRequest
Новая
       40

Свернуть загрузчик: показать одну скрыть другую

0 голосов
/ 13 февраля 2019

У меня проблема с коллапсом.То, что я хочу сделать, это когда я нажимаю, чтобы показать развал, другие шкуры, и наоборот.

Я основывал свою работу на ответе в этой статье ( 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>

1 Ответ

0 голосов
/ 13 февраля 2019

Попробуйте что-то вроде ниже или переключите свойство 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>
...