Accordéon ou onglets dans les textes de description

Un accordéon ou différents onglets, vous donnent la possibilité de structurer encore mieux votre description dans l'offre. Ci-dessous, nous expliquons en quelques étapes simples comment créer un accordéon ou une navigation par onglets.

Adaptation des styles

La représentation graphique peut être adaptéeà votre CI/CD viaCSS.

Onglets dans la description de l'offre

Ouvrez l'offre dans laquelle vous souhaitez travailler avec des onglets dans ladescription.
Aller dans la description A.
Modifier la description

Klicken Sie auf dieses Symbol </> (Quelltext) B. Hier können Sie den unten stehenden Code eingeben. Die Texte können ersetz im Editor ersetzt oder anpasst werden.

CODE

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
    <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
    <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
    <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="home">Dies ist ein Beispieltext für Home</div>
    <div role="tabpanel" class="tab-pane" id="profile">Dies ist ein Beispieltext für Profile</div>
    <div role="tabpanel" class="tab-pane" id="messages">Dies ist ein Beispieltext für Messages</div>
    <div role="tabpanel" class="tab-pane" id="settings">Dies ist ein Beispieltext für Settings</div>
  </div>

</div>

Ensuite, cela devrait ressembler à ceci dans la description :
Backend
Dans le frontend, cela s'affiche ensuite comme suit :

Accordéon dans la description de l'offre

Suivez les étapes 1 à 3 comme pour l'intégration des onglets. Ensuite, procédez comme suit.

Saisissez le code suivant dans la description sous le symbole du texte source. Ici aussi, vous pouvez adapter les textes ou en insérer de nouveaux.

HTML

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-success">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
         AkkordeonTab1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        Dies ist ein Beispieltext um die Darstellung zu testen
      </div>
    </div>
  </div>
  <div class="panel panel-warning">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          AkkordeonTab2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Dies ist ein Beispieltext um die Darstellung zu testen
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          AkkordeonTab3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Dies ist ein Beispieltext um die Darstellung zu testen.
      </div>
    </div>
  </div>
</div>

Ensuite, cela devrait ressembler à ceci dans la description :
Backend accordéon
Dans le frontend, cela s'affiche ensuite comme suit :

Tutoriels associés

Mots-clés pour ce guide

Accordéon ¦ onglets ¦ description ¦ texte source