Accordions or Tabs in Description Texts

An accordion or various tabs enable you to structure your offer description more effectively. The following simple steps explain how to create an accordion or tab navigation.

Customizing Styles

The visual presentation can be customized via CSS to align with your CI/CD.

Tabs in the Offer Description

Open the offer where you intend to utilize tabs within the description.
Go to Description A.

Edit 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.

<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>

The description should then appear as follows:

Backend
In the frontend, it will subsequently be rendered as follows:

Accordion in the Offer Description

Follow steps 1-3, similar to integrating tabs. Afterward, proceed as follows.

In the description, beneath the source code icon, enter the following code. You can also customize existing text or insert new content here.

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>

The description should then appear as follows:

Accordion Backend
In the frontend, it will subsequently be rendered as follows:

Related Guides

Keywords for this guide

Accordion ¦ Tabs ¦ Description ¦ Source Code