0
Ich habe eine Seite entworfen. Wie man Funktionalität des Akkordeonmenüs hinzufügt. Aber ich kann mir keine Vorstellung von meinem Problem machen.Wie man den Diaeffekt auf jquery setzt
Wie in diesem Bild
wie eine Platte immer
Und zu diesem Menü Effekt gleitet geöffnet wurde.
Vielen Dank im Voraus :)
jQuery(document).ready(function() {
$(".accordion").click(function() {
if (!$(this).hasClass("active")) {
var oldAcc = $(".accordion.active");
oldAcc.toggleClass("active");
oldAcc.next().toggleClass("show");
}
$(this).toggleClass("active");
$(this).next().toggleClass("show");
});
});.boot-accordian button.accordion {
background-color: #fff;
color: #363636;
cursor: pointer;
width: 100%;
border: 1px solid #d7d7d7;
text-align: left;
outline: none;
font-size: 18px;
font-weight: 600;
transition: 0.4s;
padding: 20px;
margin-top: 20px;
}
.boot-accordian .para {
padding-left: 1px;
padding-top: 2%;
font-size: 15px;
}
.boot-accordian button.accordion.active{
background-color: #0097C7;
color: #fff;
}
.boot-accordian button.accordion:after {
font-size: 20px;
font-weight: 800;
font-family: FontAwesome;
content: "\f106";
color: #97999c;
float: right;
}
.boot-accordian button.accordion.active:after {
content: "\f107";
font-family: FontAwesome;
font-size: 20px;
font-weight: 800;
font-size: 16px;
color: #fff;
}
.boot-accordian div.panel {
padding: 0 18px;
display: none;
background-color: #fff;
color: #363636;
border: 1px solid #d7d7d7;
border-top: 0;
border-radius: 0;
}
.boot-accordian div.panel.show {
display: block;
margin: 0;
background-color: #fff;
color: #363636;
padding-bottom: 2%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="boot-accordian">
<button class="accordion">How do I call Eventbooking?</button>
<div class="panel">
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem eget magna lacinia gravida</p>
</div>
<button class="accordion active">Lorem ipsum dolor sit amet, consectetur adipiscing elit?</button>
<div class="panel show">
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem eget magna lacinia gravida</p>
</div>
<button class="accordion">Quisque ullamcorper lectus eget justo tincidunt, at scelerisque nulla malesuada?</button>
<div class="panel">
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem eget magna lacinia gravida</p>
</div>
<button class="accordion">Etiam semper orci vitae nisi vestibulam varius?</button>
<div class="panel">
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem eget magna lacinia gravida</p>
</div>
<button class="accordion">Nullam ac nulla vel dui blandit blandit?</button>
<div class="panel">
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem eget magna lacinia gravida</p>
</div>
<button class="accordion">Maecenas fermentum erac ac vulputate fermentum?</button>
<div class="panel">
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem eget magna lacinia gravida</p>
</div>
<button class="accordion">Duis sed nibh eget mauris ultrices scelerisque?</button>
<div class="panel">
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem eget magna lacinia gravida</p>
</div>
<button class="accordion">Mauris at tellus id ante tempor scelerisque?</button>
<div class="panel">
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem eget magna lacinia gravida</p>
</div>
<button class="accordion">Suspendise et lorem non nisi vehicula convallis?</button>
<div class="panel">
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem eget magna lacinia gravida</p>
</div>
<button class="accordion">Morbi eget dolor quis ligula blandit malesuada?</button>
<div class="panel">
<p class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla maximus sem a mauris rutrum tempor. Curabitur dapibus id fells
a rhoncus. Vestibulum gravida a velit quis tristique. Donec dapibus lorem eget magna lacinia gravida</p>
</div>
</div>
nicht vollständig Ihre Frage verstehen. Sagen Sie das 1. Sie wollen 1 Schieberegler immer offen sein. 2. Und dass Sie eine Folie ("animation-like") wollen, wenn Sie ein Akkordeon öffnen? – alexr101
Wollen Sie auch, dass die anderen geschlossen werden, wenn Sie eine öffnen oder offen bleiben? – alexr101
Ein Element wird immer wie im Bild geöffnet (Das tat ich). Und wird nicht das einzelne Element schieben. Bleibt offen. –