Accordion expandido
Abre ao clicar, e só fecha quando clicado no mesmo novamente para fechar.
- Excepturi duis congue eligendi
- Facere animi, omnis senectus
- Urna nesciunt excepteur mattis voluptatibus
- Dicta assumenda minus doloribus
Photo by Alejandro Escamilla on Unsplash
blockquote
Pariatur tenetur ipsum doloremque eget per nostrud enim hac, quod dolorum mus pede tortor doloribus duis minus maxime.lacus reprehenderit.Ipsam eros voluptatibus corporis metus hendrerit ac mattis.
Quisque dignissimos
<div class="accordion expand">
<button class="acc_btn" data-expand="expand_01">Título accordion 1</button>
<div class="acc_panel">
<div class="acc_content">
...
</div>
</div>
<button class="acc_btn" data-expand="expand_02">Título accordion 2</button>
<div class="acc_panel">
<div class="acc_content">
...
</div>
</div>
<button class="acc_btn" data-expand="expand_03">Título accordion 3</button>
<div class="acc_panel">
<div class="acc_content">
...
</div>
</div>
</div>
Necessita que cada elemento acc_btn tenha o atributo data-expand com valor único.
Accordion colapso
Abre ao clicar e, se posteriormente clicar para abrir outro, o anterior aberto será fechado mantendo no máximo 1 conteúdo visível.
- Excepturi duis congue eligendi
- Facere animi, omnis senectus
- Urna nesciunt excepteur mattis voluptatibus
- Dicta assumenda minus doloribus
Photo by Alejandro Escamilla on Unsplash
blockquote
Pariatur tenetur ipsum doloremque eget per nostrud enim hac, quod dolorum mus pede tortor doloribus duis minus maxime.lacus reprehenderit.Ipsam eros voluptatibus corporis metus hendrerit ac mattis.
Quisque dignissimos
<div class="accordion collapse">
<button class="acc_btn" data-collapse="collapse_01">Título accordion 1</button>
<div class="acc_panel">
<div class="acc_content">
...
</div>
</div>
<button class="acc_btn" data-collapse="collapse_02">Título accordion 2</button>
<div class="acc_panel">
<div class="acc_content">
...
</div>
</div>
<button class="acc_btn" data-collapse="collapse_03">Título accordion 3</button>
<div class="acc_panel">
<div class="acc_content">
...
</div>
</div>
</div>
Necessita que cada elemento acc_btn tenha o atributo data-collapse com valor único.
.accordion {
--acc__color: #555555;
--acc__background: #A8A1AA;
--acc__font-family: var(--fontPrime);
--acc__font-size: 1.325rem;
--acc__border: 1px solid #C1BCC2;
--acc__box-shadow: 2px 2px 1px #B4AFB6 inset, -2px -2px 1px #B4AFB6 inset;
--acc__text-shadow: 1px 1px rgba(255, 255, 255, 0.40);
--btnHover__color: #555555;
--btnHover__background: #CCC;
--btnHover__border: 1px solid #B3B3B3;
--btnHover__box-shadow:
2px 2px 1px #B4AFB6 inset,
-2px -2px 1px #B4AFB6 inset,
0 3.5px 2px -2px rgba(0, 0, 0, 0.40);
--btnFocus__background: #D6D3D7;
--btnFocus__box-shadow:
0 2px 1px #C1BDC2 inset,
2px 0 1px #C1BDC2 inset,
-2px 0 1px #C1BDC2 inset;
position: relative;
width: 100%;
}
.acc_btn {
position: relative;
display: block;
width: 100%;
text-align: left;
margin-top: 4px;
padding: 10px 35px 10px 15px;
letter-spacing: 0.094rem;
font-size: var(--acc__font-size);
font-family: var(--acc__font-family);
color: var(--acc__color);
background-color: var(--acc__background);
border: var(--acc__border);
box-shadow: var(--acc__box-shadow);
text-shadow: var(--acc__text-shadow);
}
.acc_btn::before, .acc_btn::after {
position: absolute;
display: block;
content: "";
box-shadow: var(--acc__text-shadow);
background-color: var(--acc__color);
}
.acc_btn::before {
right: 12px;
top: calc(50% - 2px);
width: 20px;
height: 4px;
}
.acc_btn::after {
right: 20px;
top: 12px;
top: calc(50% - 10px);
width: 4px;
height: 20px;
transition: 0.3s linear;
}
.acc_btn.expanded::after, .acc_btn.extended::after {
transform: rotate(90deg);
transition: 0.3s linear;
}
.acc_panel {
position: relative;
display: none;
width: 100%;
padding: 0 0 !important;
border: 1px solid #ddd;
border-top: none;
font-size: 1.063rem;
color: #4F5040;
}
.acc_panel.oppened {
display: block;
}
.acc_content {
position: relative;
padding: 10px;
}
let accordion = {
btnExtend: document.querySelectorAll(".accordion.expand > [data-expand]"),
btnCollapse: document.querySelectorAll(".accordion.collapse > [data-collapse]"),
expand: function() {
this.btnExtend.forEach(element => {
var panel = element.nextElementSibling;
element.addEventListener('click', function() {
this.classList.toggle("expanded");
toggle.slide(panel, 1000);
});
});
},
collapse: function() {
this.btnCollapse.forEach(element => {
var panel = element.nextElementSibling;
element.addEventListener('click', function() {
if(this.classList.contains("extended")) {
this.classList.remove("extended");
toggle.slide(panel, 1000);
}
else {
var current = document.getElementsByClassName("extended");
if(current.length > 0) {
toggle.slide(current[0].nextElementSibling, 1000);
current[0].className = current[0].className.replace(" extended", "");
}
this.className += " extended";
this.nextElementSibling += toggle.slide(panel, 1000);
}
});
});
}
};
accordion.expand();
accordion.collapse();
Requer fade.js