I am working on an accordion; however, I have two intertwined but different tasks to accomplish the first is how to get the “buttons” to automatically close when another element is opened. I’m not using an existing framework (i.e. bootstrap) as the environment I’m developing in can’t use external resources for displaying content. The other issue I’m trying to solve is how to add rows of information into accordioned spaces, I’m looking for a more effective method that using a table; however, if the table element seems to be the best method that would be acceptable. I have included the HTML, CSS and JavaScript I’ve been using to develop this element and would appreciate any assistance that could be provided.
document.querySelectorAll('.accordion__button').forEach(button => {
button.addEventListener('click', () => {
const accordionContent = button.nextElementSibling;
button.classList.toggle('accordion__button--active');
if (button.classList.contains('accordion__button--active')) {
accordionContent.style.maxHeight = accordionContent.scrollHeight + '100%';
} else {
accordionContent.style.maxHeight = 0;
}
});
});@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
.search-title {
box-sizing: border-box !important;
display: block !important;
margin: 0 0 30px 0;
padding: 0;
font-family: 'Montserrat', sans-serif !important;
font-weight: 800 !important;
font-size: 2.6em !important;
color: #18467F !important;
}
.subsection-title {
box-sizing: border-box !important;
display: block !important;
margin: 0 0 5px 0;
padding: 0;
font-family: 'Montserrat', sans-serif !important;
font-size: 2.3em;
font-weight: 600;
color: #C6B66D !important;
}
.update-article {
padding-left: 25px;
padding-right: 25px;
}
.search-sub-title {
box-sizing: border-box;
display: block;
margin: 0 0 15px 0;
font-family: 'Montserrat', sans-serif;
font-weight: 400;
font-size: 2em;
color: #C6B66D;
}
.search-text {
font-size: 1.35rem !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 300;
line-height: 1.75 !important;
}
.search-heading {
box-sizing: border-box;
display: block;
margin: 0 0 15px 0;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
font-size: 1.3em;
color: #18467F;
}
.presidential-search-link a {
color: #18467F;
text-decoration-color: #C6B66D !important;
}
.accordion {
border: none !important;
}
.accordion__button {
box-sizing: border-box !important;
display: block !important;
width: 100%;
padding: 25px;
border: none;
outline: none;
cursor: pointer;
background: #18467F;
font-family: "Roboto Condensed", sans-serif !important;
font-size: 20px !important;
font-weight: 800;
color: #FFF;
text-align: left;
transition: background 0.2s ease all;
}
.accordion__button::after {
content: '25be';
float: right;
transform: sclae(1.5);
color: #C6B66D;
}
.accordion__button--active {
background: #2771CC;
}
.accordion__button--active::after {
content: '25b4';
}
.accordion__content {
box-sizing: border-box !important;
overflow: hidden !important;
max-height: 0;
transition: max-height 0.2s ease all;
padding: 0 15px;
margin-bottom: 15px;
font-family: sans-serif;
font-size: 18px;
line-height: 1.5;
background: #D0D5D9;
}
.hc-collection-list {
box-sizing: border-box !important;
display: grid !important;
grid-column-gap: 16px !important;
grid-row-gap: 16px !important;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
}
.hc-day-events {
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.hc-collection-item-1,
.hc-collection-item-2,
.hc-collection-item-3,
.hc-collection-item-4,
.hc-collection-item-5,
.hc-collection-item-6,
{
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
min-height: 350px !important;
flex-direction: row !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
align-items: center !important;
align-content: center !important;
}
.event-date {
box-sizing: border-box !important;
margin-top: 10px !important;
margin-bottom: 10px !important;
font-family: sans-serif !important;
font-size: 52px !important;
text-transform: uppercase !important;
color: #888b8d !important;
text-align: left !important;
}
.hc-event-details {
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 30px !important;
}
.hc-event-details-no-link {
box-sizing: border-box !important;
margin-top: -220px !important;
display: flex !important;
flex-direction: column !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
padding-left: 30px !important;
padding-right: 30px !important;
padding-bottom: 30px !important;
}
.event-name {
box-sizing: border-box !important;
background: #18467F;
padding: 10px 10px;
line-height: 1 !important;
margin-top: 20px !important;
margin-bottom: 10px !important;
color: #FFF !important;
text-transform: uppercase !important;
font-family: sans-serif !important;
font-size: 24px !important;
font-weight: 600;
text-decoration: none !important;
}
.event-location {
box-sizing: border-box !important;
margin-top: 5px !important;
margin-left: -15px;
color: #18467F !important;
font-family: sans-serif !important;
font-size: 18px !important;
text-transform: none !important;
}
.event-location.subset {
box-sizing: border-box !important;
margin-top: 5px !important;
margin-left: -15px;
color: #18467F !important;
font-family: sans-serif !important;
font-size: 18px !important;
text-transform: none !important
}
.event-location li {
box-sizing: border-box !important;
margin-bottom: 20px !important;
color: #18467F;
font-family: sans-serif !important;
line-height: 1.15 !important;
font-weight: 600;
}
.event-location.subset li {
box-sizing: border-box !important;
margin-bottom: 20px !important;
color: #18467F;
font-family: sans-serif !important;
line-height: 1.15 !important;
font-weight: 100 !important;
list-style: none;
}
span.item-details {
box-sizing: border-box !important;
margin-top: 15px;
font-weight: 100 !important;
text-decoration: underline;
font-family: sans-serif !important;
font-size: 18px !important;
text-transform: none !important;
}
span.address {
font-weight: 100 !important;
}
.event-location a {
box-sizing: border-box !important;
color: #18467F;
text-decoration: none !important;
line-height: 1.15 !important;
transition: all 0.6s ease;
}
.event-location a:hover {
color: #888B8D;
text-decoration: underline !important;
}
.event-location.subset li::before {
content: "";
width: 8px;
height: 8px;
display: inline-block;
float: left;
transform: skew(-10deg);
transform-origin: left bottom;
background-color: #888B8D;
margin: 5px 10px 0px -20px;
}
.hc-collection-item-1 {
box-sizing: border-box !important;
background-position: 50% 50% !important;
background-size: cover !important;
}
.visit__campus__title {
box-sizing: border-box !important;
display: block !important;
width: 100% !important;
font-family: 'Montserrat', sans-serif !important;
font-weight: 600 !important;
font-size: 32px !important;
letter-spacing: 0.01em !important;
color: #18467F !important;
line-height: 1.1 !important;
text-transform: uppercase !important;
margin-bottom: 30px !important;
}
.visit__campus__text {
box-sizing: border-box !important;
display: block !important;
color: #262626 !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 18px !important;
font-weight: 400 !important;
line-height: 1.95 !important;
margin-bottom: 15px !important;
}
.count__up {
box-sizing: border-box !important;
width: 100% !important;
height: auto !important;
margin: 30px auto 30px auto !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
padding: 60px 20px !important;
background-image: url(https://bluetigerportal.lincolnu.edu/image/image_gallery?uuid=9d96d0d7-1d1b-4d7d-96da-37abb1485ebb&groupId=6616610&t=1599054711875) !important;
background-position: 50% 50% !important;
background-size: auto !important;
overflow: auto !important;
}
.statistics__container {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)) !important;
grid-row-gap: 30px !important;
grid-column-gap: 15px !important;
}
.statistics__details {
box-sizing: border-box !important;
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
justify-content: space-between !important;
}
.stat1,
.stat2,
.stat3 {
box-sizing: border-box !important;
display: flex !important;
width: 100% !important;
flex-direction: row !important;
justify-content: space-between !important;
flex-wrap: wrap !important;
align-items: center !important;
align-content: center !important;
}
.text__1 {
box-sizing: border-box !important;
position: relative !important;
left: -15px !important;
}
.text__2 {
box-sizing: border-box !important;
position: relative !important;
left: -38px !important;
}
.text__3 {
box-sizing: border-box !important;
position: relative !important;
left: -65px !important;
}
.counter {
box-sizing: border-box !important;
display: block !important;
float: left !important;
width: auto !important;
margin: 0 auto !important;
color: #F5C431 !important;
font-size: 4.5rem !important;
font-family: 'Montserrat', sans-serif !important;
}
.info {
box-sizing: border-box !important;
display: block !important;
width: auto !important;
margin: auto 15px auto auto !important;
color: #FFF !important;
text-transform: uppercase !important;
font-size: 1.5rem !important;
font-family: 'Montserrat', sans-serif !important;
line-height: 1.5 !important;
text-align: left !important;
}
.tour__information__wrapper {
box-sizing: border-box !important;
margin-bottom: 30px !important;
width: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
}
.information {
box-sizing: border-box !important;
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(50vh, 1fr)) !important;
grid-row-gap: 15px !important;
grid-column-gap: 15px !important;
}
.left-column .image {
box-sizing: border-box !important;
display: inline-block !important;
width: 100% !important;
min-width: 350px !important;
height: auto !important;
min-height: 350px !important;
}
.right-column .video {
box-sizing: border-box !important;
display: inline-block !important;
width: 100% !important;
}
.video {
width: 100% !important;
height: 100% !important;
min-height: 350px !important;
}
.tour__url {
box-sizing: border-box !important;
display: inline-block !important;
width: 100% !important;
padding-top: 15px !important;
padding-left: 15px !important;
padding-bottom: 15px !important;
color: #18467F !important;
font-family: 'Montserrat', sans-serif !important;
font-size: 1.6rem !important;
font-weight: 600 !important;
letter-spacing: 0.06em !important;
text-transform: uppercase !important;
text-decoration: none !important;
cursor: pointer !important;
background: rgba(136, 139, 141, 0.6) !important;
}<div class="accordion">
<h3 class="search-title">Academic Calendar</h3>
<button type="button" class="accordion__button">List</button>
<div class="accordion__content">
<div class="list__container">
<div class="list__item">
<div class="list__item__content">
<section class="update-article">
<div class="table_container">
<div class="table_heading">
<h2 class="admissions__steps">Columned List of Values</h2>
</div>
<div class="row">
<div class="column left"></div>
<div class="column right"></div>
</div>
</div>
</section>
<section class="update-article">
<div class="table_container">
<div class="table_heading">
<h2 class="admissions__steps">Columned List of Values</h2>
</div>
<div class="row">
<div class="column left"></div>
<div class="column right"></div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<button type="button" class="accordion__button">Spring</button>
<div class="accordion__content">
<div class="list__container">
<div class="list__item">
<div class="list__item__content">
<p class="admissions__steps">Some Additional Information, same as above></p>
</div>
</div>
<div class="list__item">
<div class="list__item__content">
<p class="admissions__steps">More of the same as above</p>
</div>
</div>
</div>
</div>
<button type="button" class="accordion__button">Summer</button>
<div class="accordion__content">
<div class="list__container">
<div class="list__item">
<div class="list__item__content">
<p class="admissions__steps">Different set of data but again same as above</p>
</div>
</div>
<div class="list__item">
<div class="list__item__content">
<p class="admissions__steps">More of this type of information continued from above</p>
</div>
</div>
</div>
</div>
</div>