Home > other >  Getting Accordion Elements to automatically close When Others Are Opened
Getting Accordion Elements to automatically close When Others Are Opened

Time：12-11

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 >
  <h3 >Academic Calendar</h3>
  <button type="button" >List</button>
  <div >
    <div >
      <div >
        <div >
          <section >
            <div >
              <div >
                <h2 >Columned List of Values</h2>
              </div>
              <div >
                <div ></div>
                <div ></div>
              </div>
            </div>
          </section>
          <section >
            <div >
              <div >
                <h2 >Columned List of Values</h2>
              </div>
              <div >
                <div ></div>
                <div ></div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <button type="button" >Spring</button>
  <div >
    <div >
      <div >
        <div >
          <p >Some Additional Information, same as above></p>

        </div>
      </div>
      <div >
        <div >
          <p >More of the same as above</p>
        </div>
      </div>

    </div>
  </div>
  <button type="button" >Summer</button>
  <div >
    <div >
      <div >
        <div >
          <p >Different set of data but again same as above</p>

        </div>
      </div>
      <div >
        <div >
          <p >More of this type of information continued from above</p>
        </div>
      </div>

    </div>
  </div>
</div>

CodePudding user response：

I edited your question a bit, please check it out:

document.querySelectorAll('.accordion__button').forEach((button) => {
  button.addEventListener('click', () => {
    const accordionContent = button.nextElementSibling;
    const currentOpen = document.querySelector('.accordion__content[data-active="active"]');

    button.classList.toggle('accordion__button--active');

    if (currentOpen) {
      currentOpen.style.maxHeight = 0;
      currentOpen.removeAttribute('data-active');
      currentOpen.previousElementSibling.classList.remove('accordion__button--active')
    }

    if (button.classList.contains('accordion__button--active')) {
      accordionContent.style.maxHeight = accordionContent.scrollHeight   '100%';
      accordionContent.setAttribute('data-active', 'active');
    } else {
      accordionContent.style.maxHeight = 0;
    }
  });
});
.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 >
  <h3 >Academic Calendar</h3>
  <button type="button" >List</button>
  <div >
    <div >
      <div >
        <div >
          <section >
            <div >
              <div >
                <h2 >Columned List of Values</h2>
              </div>
              <div >
                <div ></div>
                <div ></div>
              </div>
            </div>
          </section>
          <section >
            <div >
              <div >
                <h2 >Columned List of Values</h2>
              </div>
              <div >
                <div ></div>
                <div ></div>
              </div>
            </div>
          </section>
        </div>
      </div>
    </div>
  </div>
  <button type="button" >Spring</button>
  <div >
    <div >
      <div >
        <div >
          <p >
            Some Additional Information, same as above>
          </p>
        </div>
      </div>
      <div >
        <div >
          <p >More of the same as above</p>
        </div>
      </div>
    </div>
  </div>
  <button type="button" >Summer</button>
  <div >
    <div >
      <div >
        <div >
          <p >
            Different set of data but again same as above
          </p>
        </div>
      </div>
      <div >
        <div >
          <p >
            More of this type of information continued from above
          </p>
        </div>
      </div>
    </div>
  </div>
</div>

CodePudding user response：

You can store the previous button data and use it to toggle.

var prevAccordion = '';
document.querySelectorAll('.accordion__button').forEach(button => {
    button.addEventListener('click', (event) => {
      
      if(prevAccordion && prevAccordion !== button){
        prevAccordion.classList.remove('accordion__button--active');
        prevAccordion.nextElementSibling.style.maxHeight = 0;
      }

      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;
      }
      prevAccordion = event.target;
      
    });
  });

Page link：https//www.codepudding.com/other/224007.html

Prev:Can an XML file read data from a URL?
Next:How to limit the number of lines in grid css?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding