如何在手风琴链接打开时显示过滤器?

时间:2018-01-08 16:50:29

标签: html css twitter-bootstrap accordion collapse

我在我的网站上使用了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>

0 个答案:

没有答案