Issue
I made this cool collapsible feature which I thought was nice, but since I'm not so acquainted with JavaScript, I was trying to make just one collapsible open at a time, to no avail.
As it is currently, each collapsible clicked gets opened until you click it again to close it.
const accordians = document.getElementsByClassName("accordion_btn");
for (var i = 0; i < accordians.length; i += 1) {
accordians[i].onclick = function() {
this.classList.toggle('arrowClass');
var content = this.nextElementSibling;
if (content.style.maxHeight) {
// Accordion is open, needs to be closed
content.style.maxHeight = null;
} else {
// Accordion is closed, needs to be open
content.style.maxHeight = content.scrollHeight + "px";
}
}
}
@import url('https://fonts.googleapis.com/css?family=Inter');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main div.accordion_container::-webkit-scrollbar,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar {
width: 4px;
}
main div.accordion_container::-webkit-scrollbar-track,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-track {
background-color: #444444;
}
main div.accordion_container::-webkit-scrollbar-button:vertical:increment,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-button:vertical:increment {
background-color: rgba(108, 92, 231, 0.65);
}
main div.accordion_container::-webkit-scrollbar-button:vertical:increment:hover,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-button:vertical:increment:hover {
background-color: rgba(108, 92, 231, 1.00);
}
main div.accordion_container::-webkit-scrollbar-button:vertical:decrement,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-button:vertical:decrement {
background-color: rgba(108, 92, 231, 0.65);
}
main div.accordion_container::-webkit-scrollbar-button:vertical:decrement:hover,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-button:vertical:decrement:hover {
background-color: rgba(108, 92, 231, 1.00);
}
main div.accordion_container::-webkit-scrollbar-thumb,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-thumb {
background-color: rgba(108, 92, 231, 0.65);
border-radius: 10px;
}
main div.accordion_container::-webkit-scrollbar-thumb:hover,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-thumb:hover {
background-color: rgba(108, 92, 231, 1.00);
}
main {
background-color: rgba(25, 25, 25, 0.8);
display: grid;
place-items: center;
font-family: 'Inter';
width: 100%;
height: 100vh;
}
main div.accordion_container {
background-color: #efefef;
padding: 10px;
width: 800px;
overflow: auto;
border-radius: 3px;
position: relative;
}
main div.accordion_container #small {
font-size: 12px;
text-align: center;
}
main div.accordion_container #accordion_header {
text-align: center;
font-size: 18px;
margin-top: 20px;
}
main div.accordion_container .accordion_body {
padding: 20px 0 30px;
overflow: auto;
}
main div.accordion_container .accordion_body .accordion_body_item:not(:last-child) {
margin-bottom: 10px;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn {
width: 100%;
background-color: gainsboro;
border: none;
outline: none;
text-align: left;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 300ms linear;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn:hover {
background-color: silver;
border-left-width: 3px;
border-left-style: solid;
border-left-color: rgba(19, 2, 153, 1);
color: rgba(19, 2, 153, 1);
border-right-width: 3px;
border-right-color: rgba(19, 2, 153, 1);
border-right-style: solid;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn::before {
content: '▼';
float: right;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn.arrowClass::before {
content: '▲';
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_content {
border-left-width: 1px;
border-left-style: solid;
border-left-color: gainsboro;
border-right-width: 1px;
border-right-style: solid;
border-right-color: gainsboro;
max-height: 0;
overflow: hidden;
transition: max-height 450ms ease-in-out;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner {
padding: 20px 15px;
font-size: 14px;
background-color: #777;
color: #dfdfdf;
height: 200px;
overflow: auto;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner .inner_datetime {
text-align: right;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner .inner_body {
margin-top: 20px;
text-align: justify;
}
<main>
<div class="accordion_container">
<div id="small">General - AD rate $10 ~ 99% off</div>
<div id="accordion_header">General Inbox</div>
<div class="accordion_body">
<div class="accordion_body_item">
<button class="accordion_btn">Inbox one</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sint, deserunt cumque nobis illo ut beatae impedit pariatur aliquid minus!
</div>
</div>
</div>
</div>
<div class="accordion_body_item">
<button class="accordion_btn">Inbox two</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
</div>
</div>
</div>
</div>
<div class="accordion_body_item">
<button class="accordion_btn">Inbox three</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
</div>
</div>
</div>
</div>
<div class="accordion_body_item">
<button class="accordion_btn">Inbox four</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
</div>
</div>
</div>
</div>
<div class="accordion_body_item">
<button class="accordion_btn">Inbox five</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
</div>
</div>
</div>
</div>
<div class="accordion_body_item">
<button class="accordion_btn">Inbox six</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
</div>
</div>
</div>
</div>
</div>
<div class="accordion_footer">
<div id="small">Best Regards | Inbox Team</div>
</div>
</div>
</main>
Is there any hack to get only one collapsible open at a time?
Solution
If you assign a delegated event listener to the parent element ( the main
element seems appropriate here ) and making use of event bubbling
to find the event target you can then loop through a nodelist collection to ensure that they are hidden before displaying the relevant piece of text below the button.
// Find the collection of accordions
let col = document.querySelectorAll('.accordion_btn');
// add a delegated listener to the common parent `main` node
document.querySelector('main').addEventListener('click', e => {
// if the event target happens to be one of the buttons process the event
if (e.target.classList.contains('accordion_btn')) {
// for all the found buttons hide the nextSibling and remove the class
col.forEach(n => {
// do not process the current button!!
if (n != e.target) {
n.nextElementSibling.style.maxHeight = null;
n.classList.remove('arrowClass');
}
});
// open the nextSibling container by modifting display
let content = e.target.nextElementSibling;
content.style.maxHeight = parseFloat(content.style.maxHeight) == parseFloat(content.scrollHeight) ? null : content.scrollHeight + "px";
e.target.classList.toggle('arrowClass');
}
});
@import url('https://fonts.googleapis.com/css?family=Inter');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main div.accordion_container::-webkit-scrollbar,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar {
width: 4px;
}
main div.accordion_container::-webkit-scrollbar-track,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-track {
background-color: #444444;
}
main div.accordion_container::-webkit-scrollbar-button:vertical:increment,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-button:vertical:increment {
background-color: rgba(108, 92, 231, 0.65);
}
main div.accordion_container::-webkit-scrollbar-button:vertical:increment:hover,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-button:vertical:increment:hover {
background-color: rgba(108, 92, 231, 1.00);
}
main div.accordion_container::-webkit-scrollbar-button:vertical:decrement,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-button:vertical:decrement {
background-color: rgba(108, 92, 231, 0.65);
}
main div.accordion_container::-webkit-scrollbar-button:vertical:decrement:hover,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-button:vertical:decrement:hover {
background-color: rgba(108, 92, 231, 1.00);
}
main div.accordion_container::-webkit-scrollbar-thumb,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-thumb {
background-color: rgba(108, 92, 231, 0.65);
border-radius: 10px;
}
main div.accordion_container::-webkit-scrollbar-thumb:hover,
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner::-webkit-scrollbar-thumb:hover {
background-color: rgba(108, 92, 231, 1.00);
}
main {
background-color: rgba(25, 25, 25, 0.8);
display: grid;
place-items: center;
font-family: 'Inter';
width: 100%;
height: 100vh;
}
main div.accordion_container {
background-color: #efefef;
padding: 10px;
width: 800px;
overflow: auto;
border-radius: 3px;
position: relative;
}
main div.accordion_container #small {
font-size: 12px;
text-align: center;
}
main div.accordion_container #accordion_header {
text-align: center;
font-size: 18px;
margin-top: 20px;
}
main div.accordion_container .accordion_body {
padding: 20px 0 30px;
overflow: auto;
}
main div.accordion_container .accordion_body .accordion_body_item:not(:last-child) {
margin-bottom: 10px;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn {
width: 100%;
background-color: gainsboro;
/*
to prevent the moving of content when hovering
add a transparent border to occupy the space
*/
border:none;
border-left: 3px solid transparent;
border-right: 3px solid transparent;
outline: none;
text-align: left;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
transition: background-color 300ms linear;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn:hover {
background-color: silver;
border-left-width: 3px;
border-left-style: solid;
border-left-color: rgba(19, 2, 153, 1);
color: rgba(19, 2, 153, 1);
border-right-width: 3px;
border-right-color: rgba(19, 2, 153, 1);
border-right-style: solid;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn::before {
content: '▼';
float: right;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn.arrowClass::before {
content: '▲';
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_content {
border-left-width: 3px;
border-left-style: solid;
border-left-color: #777;
border-right-width: 3px;
border-right-style: solid;
border-right-color: #777;
max-height: 0;
overflow: hidden;
transition: max-height 450ms ease-in-out;
}
/*
main div.accordion_container .accordion_body .accordion_body_item .accordion_btn:hover + .accordion_content{
border-left: 3px solid rgba(19, 2, 153, 0.5);
border-right: 3px solid rgba(19, 2, 153, 0.5);
}
*/
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner {
padding: 20px 15px;
font-size: 14px;
background-color: #777;
color: #dfdfdf;
height: 200px;
overflow: auto;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner .inner_datetime {
text-align: right;
}
main div.accordion_container .accordion_body .accordion_body_item .accordion_content .inner .inner_body {
margin-top: 20px;
text-align: justify;
}
<main>
<div class="accordion_container">
<div id="small">General - AD rate $10 ~ 99% off</div>
<div id="accordion_header">General Inbox</div>
<div class="accordion_body">
<div class="accordion_body_item">
<button class="accordion_btn">Inbox one</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Qui sint, deserunt cumque nobis illo ut beatae impedit pariatur aliquid minus!
</div>
</div>
</div>
</div>
<div class="accordion_body_item">
<button class="accordion_btn">Inbox two</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
</div>
</div>
</div>
</div>
<div class="accordion_body_item">
<button class="accordion_btn">Inbox three</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
</div>
</div>
</div>
</div>
<div class="accordion_body_item">
<button class="accordion_btn">Inbox four</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
</div>
</div>
</div>
</div>
<div class="accordion_body_item">
<button class="accordion_btn">Inbox five</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
</div>
</div>
</div>
</div>
<div class="accordion_body_item">
<button class="accordion_btn">Inbox six</button>
<div class="accordion_content">
<div class="inner">
<div class="inner_datetime">dd/mm/yyyy</div>
<div class="inner_body">
These cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others. These
cookies allow us or our third party analytics providers to collect information and statistics on use of our services by you and other visitors. These information help us improve our services and products for the benefit of you and others.
</div>
</div>
</div>
</div>
</div>
<div class="accordion_footer">
<div id="small">Best Regards | Inbox Team</div>
</div>
</div>
</main>
Answered By - Professor Abronsius
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.