I require only one menu to be displayed in this user interface

Question

I require only one menu to be displayed in this user interface

This user interface was crafted by me and I am seeking the same functionality to be integrated into this design. I want only one menu to be open at a time, rather than having all of them open simultaneously.

Clicking on a button should open or close the current accordion. Additionally, if any other accordion is already open, it should automatically close when you attempt to open another one.

Kindly maintain the same transitioning effect.

var 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";
    }
  }
}

body {
  display: grid;
  place-items: center;
}

.accordion_container {
  background-color: #efefef;
  padding: 10px;
  width: 500px;
  /*height: 400px;*/
  overflow: auto;
  border-radius: 3px;
  /* padding: 10px; */
  position: relative;
}
... (the rest of the CSS code remains same)

<div class="accordion_container">
  <div class="accordion_body">
    <div class="accordion_body_item">
...

javascript html css user-interface

Answer 1

Answer №1

By making some adjustments, you can achieve the desired outcome more efficiently. Simplifying the html and css code and incorporating newer JS ES6 syntax can enhance functionality and streamline development.

I have included annotations to highlight where modifications were made.

  // Utilize QuerySelector for toggle buttons
  const accordians = document.querySelectorAll(".accordion_btn");

  // Assign onclick handler in a loop
  accordians.forEach((element) => {
    element.onclick = (event) => {
      // Obtain trigger element and corresponding body
      const toggleButton = event.target;
      const accordianBody = toggleButton.nextElementSibling;

      // Retrieve list of open accordians
      const openAccordians = document.querySelectorAll(
        ".accordion_content.open"
      );
      // Get list of open accordians
      const toggleButtons = document.querySelectorAll(
        ".accordion_btn.arrowClass"
      );

      // Check if clicked accordian is already open
      if (accordianBody.classList.contains("open")) {
        accordianBody.classList.remove("open");
        toggleButton.classList.remove("arrowClass");
        return;
      }

      // Close other open accordians
      openAcccordians.forEach((item) => item.classList.remove("open"));
      toggleButtons.forEach((item) => item.classList.remove("arrowClass"));

      // Open the clicked accordion
      accordianBody.classList.add("open");
      toggleButton.classList.add("arrowClass");
    };
  });

  body {
    display: grid;
    place-items: center;
  }

  .accordion_container {
    background-color: #efefef;
    padding: 10px;
    width: 500px;
    /*height: 400px;*/
    overflow: auto;
    border-radius: 3px;
    /* padding: 10px; */
    position: relative;
  }

  // Adjusted CSS as needed

  /* Add open body state with css */

  /* Accordian Closed state */

<div class="accordion_container">
  <div class="accordion_body">
    <!-- Repeat structure for each accordion item -->
  </div>
</div>

Update: Corrected comment formatting in CSS section.

Answer 2

By making some adjustments, you can achieve the desired outcome more efficiently. Simplifying the html and css code and incorporating newer JS ES6 syntax can enhance functionality and streamline development.

I have included annotations to highlight where modifications were made.

  // Utilize QuerySelector for toggle buttons
  const accordians = document.querySelectorAll(".accordion_btn");

  // Assign onclick handler in a loop
  accordians.forEach((element) => {
    element.onclick = (event) => {
      // Obtain trigger element and corresponding body
      const toggleButton = event.target;
      const accordianBody = toggleButton.nextElementSibling;

      // Retrieve list of open accordians
      const openAccordians = document.querySelectorAll(
        ".accordion_content.open"
      );
      // Get list of open accordians
      const toggleButtons = document.querySelectorAll(
        ".accordion_btn.arrowClass"
      );

      // Check if clicked accordian is already open
      if (accordianBody.classList.contains("open")) {
        accordianBody.classList.remove("open");
        toggleButton.classList.remove("arrowClass");
        return;
      }

      // Close other open accordians
      openAcccordians.forEach((item) => item.classList.remove("open"));
      toggleButtons.forEach((item) => item.classList.remove("arrowClass"));

      // Open the clicked accordion
      accordianBody.classList.add("open");
      toggleButton.classList.add("arrowClass");
    };
  });

  body {
    display: grid;
    place-items: center;
  }

  .accordion_container {
    background-color: #efefef;
    padding: 10px;
    width: 500px;
    /*height: 400px;*/
    overflow: auto;
    border-radius: 3px;
    /* padding: 10px; */
    position: relative;
  }

  // Adjusted CSS as needed

  /* Add open body state with css */

  /* Accordian Closed state */

<div class="accordion_container">
  <div class="accordion_body">
    <!-- Repeat structure for each accordion item -->
  </div>
</div>

Update: Corrected comment formatting in CSS section.

I require only one menu to be displayed in this user interface

Answer №1

Similar questions

Leveraging jQuery, Ajax, and PHP for generating and organizing HTML blocks - requiring sound logic

load specific div using jQuery AJAX

What is the reason behind WP AJAX consistently returning a value of 0?

JavaScript: Locate web addresses within a block of text and convert them into clickable hyper

Javascript toggle navigation with sliding and fading effects

Could someone provide clarification on this particular line of Apex code for me?

Utilizing the If statement within AlertifyJS

reactjs with axios error message: "Error: Cannot read property 'map' of undefined"

Styling a single column with two rows and sibling elements using flexbox, similar to the design of the flag of Benin!

Convert Time: segment time devoted to the main content from the time dedicated to advertisements

Unable to Upload Image to MySQL Database

Showing a database table in an HTML format using JavaScript

Showing an image on a blurred background-image at the top of the webpage

Having difficulty creating the probot.github app due to an error: The removal of the programmatic API in npm version 8.0.0 causing failure

Leveraging Trustpilot TrustBoxes within a Next.js environment

Validation of form fields appears to be disregarded

Discovering all links in Selenium by implementing Javascript

Even though my form allows submission of invalid data, my validation process remains effective and accurate

What is the best way to invoke a function from one controller in angularjs to another controller?

The Proper Way to Include External CSS in a Next.js Page Without Triggering Any Warnings