我在我的网站上使用了Drupal 8和Bootstrap 3.
我使用此页面上的观点创建了手风琴链接:
https://www.s1biose.com/profil/mathieu
每个视图都有一个“Exposed Filter”块,当手风琴链接打开时如何显示滤镜?当手风琴链接关闭时如何隐藏?
这是我的HTML代码:
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse1">
<h4 class="panel-title">
<i class="fa fa-object-group fa-lg"></i> Ses contenus <span class="badge"><dd>{{ drupal_view('profil_page_contenu_utilisateur', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" id="accordion-sub1">
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-sub1" href="#collapse11">
<h4 class="panel-title">
<i class="fa fa-newspaper-o fa-lg"></i> Les annonces <span class="badge"><dd>{{ drupal_view('profil_page_contenu_annonce', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse11" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_contenu_annonce', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-sub1" href="#collapse12">
<h4 class="panel-title">
<i class="fa fa-file-text-o fa-lg"></i> Les articles <span class="badge"><dd>{{ drupal_view('profil_page_contenu_article', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse12" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_contenu_article', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-sub1" href="#collapse13">
<h4 class="panel-title">
<i class="fa fa-comments fa-lg"></i> Les discussions <span class="badge"><dd>{{ drupal_view('profil_page_contenu_discussion', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse13" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_contenu_discussion', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-sub1" href="#collapse14">
<h4 class="panel-title">
<i class="fa fa-cutlery fa-lg"></i> Les recettes <span class="badge"><dd>{{ drupal_view('profil_page_contenu_recette', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse14" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_contenu_recette', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-sub1" href="#collapse15">
<h4 class="panel-title">
<i class="fa fa-map-signs fa-lg"></i> Les itinéraires <span class="badge"><dd>{{ drupal_view('profil_page_contenu_itineraire', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse15" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_contenu_itineraire', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-sub1" href="#collapse16">
<h4 class="panel-title">
<i class="fa fa-calendar fa-lg"></i> Les événements <span class="badge"><dd>{{ drupal_view('profil_page_contenu_evenement', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse16" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_contenu_evenement', 'block_1') }}</dd></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse2">
<h4 class="panel-title">
<i class="fa fa-gift fa-lg"></i> Ses produits <span class="badge"><dd>{{ drupal_view('profil_page_produit_utilisateur', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<div class="panel-group" id="accordion-sub2">
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-sub2" href="#collapse21">
<h4 class="panel-title">
<i class="fa fa-gift fa-lg"></i> Les produits <span class="badge"><dd>{{ drupal_view('profil_page_produit_produit', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse21" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_produit_produit', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion-sub2" href="#collapse22">
<h4 class="panel-title">
<i class="fa fa-sign-language fa-lg"></i> Les services <span class="badge"><dd>{{ drupal_view('profil_page_produit_service', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse22" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_produit_service', 'block_1') }}</dd></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse3">
<h4 class="panel-title">
<i class="fa fa-users fa-lg"></i> Ses groupes <span class="badge"><dd>{{ drupal_view('profil_page_groupe_utilisateur', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_groupe_utilisateur', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse4">
<h4 class="panel-title">
<i class="fa fa-shopping-bag fa-lg"></i> Ses boutiques <span class="badge"><dd>{{ drupal_view('profil_page_boutique_utilisateur', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_boutique_utilisateur', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse5">
<h4 class="panel-title">
<i class="fa fa-heart fa-lg"></i> Ses contenus favoris <span class="badge"><dd>{{ drupal_view('profil_page_contenu_favoris', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_contenu_favoris', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse6">
<h4 class="panel-title">
<i class="fa fa-heart fa-lg"></i> Ses produits favoris <span class="badge"><dd>{{ drupal_view('profil_page_produit_favoris', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse6" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_produit_favoris', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse7">
<h4 class="panel-title">
<i class="fa fa-thumbs-up fa-lg"></i> Suit les groupes <span class="badge"><dd>{{ drupal_view('profil_page_groupe_suivre', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse7" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_groupe_suivre', 'block_1') }}</dd></div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapse8">
<h4 class="panel-title">
<i class="fa fa-thumbs-up fa-lg"></i> Suit les boutiques <span class="badge"><dd>{{ drupal_view('profil_page_boutique_suivre', 'block_2') }}</dd></span>
</h4>
</a>
</div>
<div id="collapse8" class="panel-collapse collapse">
<div class="panel-body"><dd>{{ drupal_view('profil_page_boutique_suivre', 'block_1') }}</dd></div>
</div>
</div>
</div>