Akkordeon

Hier ein horizontales und vertikales Bootstrap 4 Akkordeon,
das man direkt in der Arbeitsansicht der Mobirise Seite beschriften kann.

Hallo, dieses vertikale Akkordeon habe ich hier zusätzlich als Demo eingebaut.
Es dient als Ersatz-Anzeige bei kleinen Displays wie dem Smartphone.
Hier steht ein etwas längerer Text, den ich auch direkt auf der Arbeitsseite von Mobirise in diesen Container schreiben kann.
nach oben
Hier können auch Bilder eingefügt werden.
Man kann hier natürlich eine Menge Informationen eintragen. Da dieses Akkordeon jedoch horizontal arbeitet ist der Platz beschränkt.

Logo
Viel Spaß

Gehe mit der Maus über das Akkordeon oben.

Gefunden auf codepen

Ich habe zum Einbau den einfachen Textblock von Mobirise aufgezogen und den Beispieltext mit dem Skript (unten) ersetzt sowie die CSS im "Code Editor" eingefügt.

Am Smartphone habe ich das Akkordeon aus Platzgründen mit einer vertikalen Version, wie unten als Demo gezeigt, ersetzt. Am Smartphone, horizontal gehalten und am Tablet, vertikal gehalten, zeige ich nur 3 der 5 Reihen vom horizontalen Akkordeon.

Das könnt Ihr natürlich alles individuell anpassen wir Ihr wollt.


Hier zur Info meine HTML für das "Horizontale Akkordeon":

<!-- Beginn horizontales Akkordeon -->
<div class="gallery-wrap">
  <div class="item item-1"><b>Hallo</b></div>
  <div class="item item-2 nodisplay575 nodisplay991"><span style="font-weight: normal;">Hier steht ein etwas längerer Text, den ich auch direkt auf der Arbeitsseite von Mobirise in diesen Container schreiben kann.<br><a href="#top" class="text-secondary">nach oben</a></span></div>
  <div class="item item-3 nodisplay575"><span style="color: white;">Hier können auch Bilder eingefügt werden.</span></div>
  <div class="item item-4 nodisplay575 nodisplay991">Man kann hier natürlich eine Menge Infor<wbr>mationen eintragen. Da dieses Akkordeon jedoch horizontal arbeitet ist der Platz beschränkt.<br><br><a href="http://www.mobirise-tutorials.com/" target="_blank"><img src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/logo-mobirise-122x122.png" alt="Logo" title="Mobirise-Tutorials.com"></a></div>
    <div class="item item-5"><span style="color: white;">Viel Spaß</span></div>  
</div>
<!-- Ende horizontales Akkordeon -->


Hier zur Info meine HTML für das "Vertikale Akkordeon" am Smartphone:

<!-- Beginn vertikales Akkordeon --> 
<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block text-secondary" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <span class="mbri-plus mbr-iconfont mbr-iconfont-btn"></span>Akkordeon #1
        </button>
      </h5>
    </div>
    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body itemS item-1S">
          <span style="color: white;">Hallo, dieses vertikale Akkordeon habe ich hier zusätzlich als Demo eingebaut.<br>Es dient als Ersatz-Anzeige bei kleinen Displays wie dem Smartphone.</span>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block text-secondary collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <span class="mbri-plus mbr-iconfont mbr-iconfont-btn"></span>Akkordeon #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body itemS item-2S">
        Hier steht ein etwas längerer Text, den ich auch direkt auf der Arbeitsseite von Mobirise in diesen Container schreiben kann.<br><a href="#top" class="text-secondary">nach oben</a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block text-secondary collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          <span class="mbri-plus mbr-iconfont mbr-iconfont-btn"></span>Akkordeon #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body itemS item-3S">
        <span style="color: white;">Hier können auch Bilder eingefügt werden.</span>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingFour">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block text-secondary collapsed" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
          <span class="mbri-plus mbr-iconfont mbr-iconfont-btn"></span>Akkordeon #4
        </button>
      </h5>
    </div>
    <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordion">
      <div class="card-body itemS item-4S">
        Man kann hier natürlich eine Menge Informationen eintragen. Da dieses Akkordeon jedoch horizontal arbeitet ist der Platz beschränkt.<br><br><a href="http://www.mobirise-tutorials.com/" target="_blank"><img src="http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/logo-mobirise-122x122.png" alt="Logo" title="Mobirise-Tutorials.com"></a>
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingFive">
      <h5 class="mb-0">
        <button class="btn btn-link btn-block text-secondary collapsed" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
          <span class="mbri-plus mbr-iconfont mbr-iconfont-btn"></span>Akkordeon #5
        </button>
      </h5>
    </div>
    <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordion">
      <div class="card-body itemS item-5S">
        <span style="color: white;">Viel Spaß</span>
      </div>
    </div>
  </div>
</div>
<!-- Ende vertikales Akkordeon -->



Hier zur Info meine CSS für das "Horizontale Akkordeon":

.gallery-wrap {
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 70vh;
}
.item {
  flex: 1;
  height: 100%;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  transition: flex 0.8s ease;
  padding: 20px;
  &:hover {
    flex: 7;
  }
}
.item-1 {
  background-image: url('http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/people.jpg');
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
}
.item-2 {
  font-weight: bold;
  background-color: #dddddd;
}
.item-3 {
  background-image: url('http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/sunset.jpg');
  text-align: center;
}
.item-4 {
  background-color: #ffff00;
}
.item-5 {
  background-image: url('http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/bullets.jpg');
  *border: 1px solid #ffffff;
  border-top-right-radius: 20px;
  border-bottom-right-radius: 20px;
}
img {
  max-width: 90%;
}


Hier zur Info meine CSS für das "Vertikale Akkordeon" und die Media-Queries:

.itemS {
  height: 100%;
  min-height: 500px;
  background-position: center;
  background-size: cover;
  background-repeat: none;
  padding: 20px;
}
.item-1S {
  background-image: url('http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/people.jpg');
}
.item-2S {
  font-weight: bold;
  background-color: #dddddd;
}
.item-3S {
  background-image: url('http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/sunset.jpg');
  text-align: center;
}
.item-4S {
  background-color: #ffff00;
}
.item-5S {
  background-image: url('http://www.mobirise-tutorials.com/LawyerM4-Tutorials/assets/images/bullets.jpg');
}
.mbri-plus {
  color: #ffa200;
}
.btn-link {
  text-decoration: none;
}
.card-header {
  background-color: #1c434f;
}
@media (max-width: 991px) {
  .nodisplay991 {
    display: none;
  }
}
@media (max-width: 575px) {
  .nodisplay575 {
    *display: none;
  }
  .gallery-wrap {
    display: none;
  }
}
@media (min-width: 576px) {
  #accordion {
    display: none;
  }
}


Code

Vertikales Bootstrap Akkordeon

Das Akkordeon unten habe ich zum besseren Verständnis und zur Demo nochmals eingebaut.
Genau dieses Akkordeon wird am Smartphone in der Hochkant-Ansicht durch das Media-Query angezeigt um mehr Platz zu gewinnen.

Dies ist ein Beispiel von Bootstrap

Hallo, dieses vertikale Akkordeon habe ich hier zusätzlich als Demo eingebaut.
Es dient als Ersatz-Anzeige bei kleinen Displays wie dem Smartphone.
Hier steht ein etwas längerer Text, den ich auch direkt auf der Arbeitsseite von Mobirise in diesen Container schreiben kann.
nach oben
Hier können auch Bilder eingefügt werden.
Man kann hier natürlich eine Menge Informationen eintragen. Da dieses Akkordeon jedoch horizontal arbeitet ist der Platz beschränkt.

Logo
Viel Spaß