Accordion or tabs in description texts

An accordion or various tabs give you the opportunity to structure your description in the offer even better. The following explains in simple steps how an accordion or tab navigation can be created.

Customization of styles

The graphic display can be adaptedto your CI/CD viaCSS.

Tabs in the offer description

Open the offer in which you want to work with tabs in thedescription.
Go to the 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.

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>

It should then look like this in the description:
Backend
It is then displayed in the frontend as follows:

Accordion in the offer description

Follow steps 1 - 3 as with the integration of the tabs. Then proceed as follows.

Enter the following code in the description under the source text symbol. You can also adapt the texts here or insert new ones.

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>

It should then look like this in the description:
Accordion backend
It is then displayed in the frontend as follows:

Related instructions

Keywords for these instructions

Accordion ¦ Tabs ¦ Description ¦ Source text