Akkordeon
Akkordeons dienen dazu Listen mit umfangreichen Inhalten platzsparend abzubilden. zB. Für FAQs, Überpunkte mit Detailinformationen u.s.w.
Akkordeon A
22/02/2021
<div class="module module--accordion-a">
<div class="inner">
<div class="accordions">
<div class="accordion ">
<div class="accordion__toggle">
<div class="title">
Studie: Die Deutschen geben ihr Geld am liebster für Reisen aus </div>
<button>
</button>
</div>
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="accordion ">
<div class="accordion__toggle">
<div class="title">
Studie: Die Deutschen geben ihr Geld am liebster für Reisen aus </div>
<button>
</button>
</div>
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>import { slideToggle } from 'slidetoggle';
(function () {
function init() {
const modules = document.querySelectorAll('.module--accordion-a');
const toggleAccordion = event => {
const accordion = event.currentTarget.parentElement;
const content = accordion.querySelector('.accordion__content');
if(content){
const { slidetoggle = 'false' } = content.dataset;
if(slidetoggle === 'false'){
slideToggle.slideToggle(content);
if(accordion.classList.contains('accordion--expanded')){
accordion.classList.remove('accordion--expanded');
}else{
accordion.classList.add('accordion--expanded');
}
}
}
}
modules.forEach(module => {
const accordions = module.querySelectorAll('.accordion');
accordions.forEach(accordion => {
const toggle = accordion.querySelector('.accordion__toggle')
if (toggle) {
toggle.addEventListener('click', toggleAccordion);
}
if(accordion.classList.contains('accordion--initially-expanded')){
const content = accordion.querySelector('.accordion__content');
slideToggle.slideToggle(content);
}
});
module.classList.add('module--initiated');
});
}
document.addEventListener("DOMContentLoaded", init);
})()
Akkordeon B
22/02/2021
<div class="module module--accordion-b">
<div class="inner">
<div class="accordions">
<div class="accordion ">
<div class="accordion__toggle">
<div class="title">
Studie: Die Deutschen geben ihr Geld am liebster für Reisen aus </div>
<span class="indicator">
<svg width="28" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.98 14.3c.22.165.495.33.77.33s.55-.165.77-.33l12.045-9.295c.385-.33.605-.495.605-.77s-.22-.55-.33-.77L25.135.715C24.86.275 24.64 0 24.31 0c-.275 0-.55.22-.77.385l-10.12 6.82L3.63.385c-.275-.165-.495-.33-.77-.33-.385 0-.605.275-.825.66L.33 3.465c-.11.22-.33.495-.33.77s.275.495.66.77L12.98 14.3z" fill="currentColor"/></svg> </span>
</div>
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
<div class="accordion ">
<div class="accordion__toggle">
<div class="title">
Studie: Die Deutschen geben ihr Geld am liebster für Reisen aus </div>
<span class="indicator">
<svg width="28" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.98 14.3c.22.165.495.33.77.33s.55-.165.77-.33l12.045-9.295c.385-.33.605-.495.605-.77s-.22-.55-.33-.77L25.135.715C24.86.275 24.64 0 24.31 0c-.275 0-.55.22-.77.385l-10.12 6.82L3.63.385c-.275-.165-.495-.33-.77-.33-.385 0-.605.275-.825.66L.33 3.465c-.11.22-.33.495-.33.77s.275.495.66.77L12.98 14.3z" fill="currentColor"/></svg> </span>
</div>
<div class="accordion__content">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
</div>
</div>
</div>
</div>
</div>import { slideToggle } from 'slidetoggle';
(function () {
function init() {
const modules = document.querySelectorAll('.module--accordion-b');
const toggleAccordion = event => {
const accordion = event.currentTarget.parentElement;
const content = accordion.querySelector('.accordion__content');
if(content){
const { slidetoggle = 'false' } = content.dataset;
if(slidetoggle === 'false'){
slideToggle.slideToggle(content);
if(accordion.classList.contains('accordion--expanded')){
accordion.classList.remove('accordion--expanded');
}else{
accordion.classList.add('accordion--expanded');
}
}
}
}
modules.forEach(module => {
const accordions = module.querySelectorAll('.accordion');
accordions.forEach(accordion => {
const toggle = accordion.querySelector('.accordion__toggle')
if (toggle) {
toggle.addEventListener('click', toggleAccordion);
}
if(accordion.classList.contains('accordion--initially-expanded')){
const content = accordion.querySelector('.accordion__content');
slideToggle.slideToggle(content);
}
});
module.classList.add('module--initiated');
});
}
document.addEventListener("DOMContentLoaded", init);
})()
Akkordeon C
22/02/2021
<div class="module module--image-text-collapse">
<div class="inner">
<div class="content content--normal">
<div class="media">
<div class="media__image">
<img src='https://markenportal.teambank.de/wp-content/uploads/sites/3/2021/02/AliciaBank960x540.jpg' alt='AliciaBank960x540' /> </div>
</div>
<div class="text">
<div class="text__title">
<h2 class="h h2">
Alicia </h2>
</div>
<div class="text__summary">
<div class="p p2">Auszubildende zur Bankkauffrau</div> </div>
<button class="toggle-detail">
<svg width="28" height="15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12.98 14.3c.22.165.495.33.77.33s.55-.165.77-.33l12.045-9.295c.385-.33.605-.495.605-.77s-.22-.55-.33-.77L25.135.715C24.86.275 24.64 0 24.31 0c-.275 0-.55.22-.77.385l-10.12 6.82L3.63.385c-.275-.165-.495-.33-.77-.33-.385 0-.605.275-.825.66L.33 3.465c-.11.22-.33.495-.33.77s.275.495.66.77L12.98 14.3z" fill="currentColor"/></svg> </button>
</div>
</div>
<div class="detail">
<div class="detail__text">
<div class="p p2"><p>„Ich denke, wenn ich bei der Arbeit wirklich ich sein kann, spiegelt sich dies auch in meinen Leistungen wieder. Bei der TeamBank habe ich die ideale Mischung aus einer klassischen Ausbildung in einem nicht ganz so klassischen Unternehmen, Teamarbeit und Selbstverwirklichung. In meiner Ausbildungszeit habe ich gelernt, was es bedeutet, mit den unterschiedlichsten Charakteren gemeinsam auf ein Ziel hinzuarbeiten, sich dabei aber stets selbst treu zu bleiben.“</p>
</div> </div>
</div>
</div>
</div>(function () {
function init() {
document.querySelectorAll('.module--image-text-collapse').forEach(module => {
const toggleButton = module.querySelector('.toggle-detail');
const detail = module.querySelector('.detail');
const content = module.querySelector('.content');
if(toggleButton){
toggleButton.addEventListener('click', function(){
if(content){
content.classList.toggle('content--active');
}
if(detail){
detail.classList.toggle('detail--show');
if (detail.style.maxHeight) {
detail.style.maxHeight = null;
} else {
detail.style.maxHeight = detail.scrollHeight + "px";
}
}
})
}
})
}
document.addEventListener('DOMContentLoaded', init);
})();