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