Interactive dropdown menu designed to trigger different content selections upon clicking

Question

Interactive dropdown menu designed to trigger different content selections upon clicking

Here is a dropdown menu solution that I have implemented: http://jsfiddle.net/ftymhs8s/

The problem I am facing is that when I click on a different line, I want to hide the currently displayed dropdown menu and show the dropdown menu of the clicked line. Additionally, I want the dropdown menu of the first line to always be displayed when people visit the website.

I believe I have described my issue correctly. Can someone please assist me with this?

// Dropdown Menu
var dropdown = document.querySelectorAll('.dropdown');
var dropdownArray = Array.prototype.slice.call(dropdown, 0);
dropdownArray.forEach(function(el) {
  var button = el.querySelector('a[data-toggle="dropdown"]'),
    menu = el.querySelector('.dropdown-menu'),
    arrow = button.querySelector('i.icon-arrow');

  button.onclick = function(event) {
    if (!menu.hasClass('show')) {
      menu.classList.add('show');
      menu.classList.remove('hide');
      arrow.classList.add('open');
      arrow.classList.remove('close');
      event.preventDefault();
    } else {
      menu.classList.remove('show');
      menu.classList.add('hide');
      arrow.classList.remove('open');
      arrow.classList.add('close');
      event.preventDefault();
    }
  };
})

Element.prototype.hasClass = function(className) {
  return this.className && new RegExp("(^|\\s)" + className + "(\\s|$)").test(this.className);
};

ul {
  list-style: none
}

.dropdown a {
  text-decoration: none;
}

.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: black;
  padding: 10px;
}

.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
}

.dropdown .dropdown-menu li {
  padding: 0;
}

.dropdown .dropdown-menu li a {
  display: block;
  padding: 10px 10px;
}

.dropdown .show {
  display: block;
  max-height: 9999px;
  margin-left: 50px;
}

.dropdown .hide {
  max-height: 0;
}

<div class="container">
  <ul>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">First Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Second Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Third Menu </a>
      <ul class="dropdown-menu">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </li>
  </ul>
</div>

javascript html css

Answer 1

Answer №1

When dealing with multiple collapsible elements where only one can be open at a time, the behavior resembles that of an accordion component. The concept involves closing all collapsibles initially and then opening the one selected by the user. This behavior is demonstrated in the following example using Event Delegation.

In addition, I couldn't help but notice that you created a hasClass function... or Class. However, this isn't necessary as you can simply use: node.classList.contains('class')

The demo includes detailed explanations within the code.

Check out the Demo Below:

/* Added .main class to parent <ul>
|| By adding the eventListener to the
|| parent of multiple clickable nodes
|| and using e.target property to find
|| the exact node actually clicked, we
|| have just needed the <ul> to listen
|| rather than 3 separate <li>
|| This is part of Event Delagation
*/
var main = document.querySelector('.main');

main.addEventListener('click', handleAccordion, false);

function handleAccordion(e) {

  /* Extract all .dropdown-menu elements into a NodeList
  || and then convert it to an array
  */
  var dropdownArray = Array.from(document.querySelectorAll('.dropdown-menu'));

  /* Gather all links inside the .dropdown-menus into
  || a NodeList and then convert it to an array
  */
  var linkArray = Array.from(document.querySelectorAll('a + .dropdown-menu a'));

  /* If the clicked node (e.target) is NOT the
  || node listening for the event (e.currentTarget
  || ul.main), then...
  */
  if (e.target !== e.currentTarget) {

    // Assign e.target to tgr variable
    var tgr = e.target;

    /* If tgr has data-toggle attribute...
    || Find tgr's next sibling (.dropdown-menu)
    || Iterate through dropdownArray with a
    || for...of loop
    || Remove .show and add .hide on
    || each .dropdown-menu in dropdownArray
    || Then add .show and remove .hide
    || on target
    || Finally stop the click event from
    || bubbling up, thereby preventing anything
    || else from being triggered.
    */
    if (tgr.hasAttribute('data-toggle')) {

      // Prevent <a> from jumping
      e.preventDefault();
      var target = tgr.nextElementSibling;
      for (let dropdown of dropdownArray) {
        dropdown.classList.remove('show');
        dropdown.classList.add('hide');
      }
      target.classList.add('show');
      target.classList.remove('hide');
    } else {
      return;
    }
    e.stopPropagation();
  }
}

html,
body,
.container {
  height: 100%;
  width: 100%;
}

.main,
section,
article {
  margin-bottom: 100vh;
}

ul {
  list-style: none
}

.dropdown a {
  text-decoration: none;
}

.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: black;
  padding: 10px;
}

.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
}

.dropdown .dropdown-menu li {
  padding: 0;
}

.dropdown .dropdown-menu li a {
  display: block;
  padding: 10px 10px;
}

.dropdown .show {
  display: block;
  max-height: 9999px;
  margin-left: 50px;
}

.dropdown .hide {
  max-height: 0;
}

<div id='home' class="container">
  <ul class='main'>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">First Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Second Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#1">Section I</a></li>
        <li><a href="#2">Section II</a></li>
        <li><a href="#3">Section III</a></li>
        <li><a href="#4">Section IV</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Third Menu</a>
      <ul class="dropdown-menu">
        <li><a href="https://example.com">Example</a></li>
        <li><a href="https://example.com">Example</a></li>
        <li><a href="https://example.com">Example</a></li>
        <li><a href="https://example.com">Example</a></li>
      </ul>
    </li>
  </ul>
  <article id='about'>
    <h2>About</h2>
  </article>

  <article id='services'>
    <h2>Services</h2>
  </article>

  <article id='contact'>
    <h2>Contact</h2>
  </article>

  <hr>

  <section id='1'>
    <h2>Section I</h2>
  </section>


  <section id='2'>
    <h2>Section II</h2>
  </section>


  <section id='3'>
    <h2>Section III</h2>
  </section>


  <section id='4'>
    <h2>Section IV</h2>
  </section>

</div>

Answer 2

When dealing with multiple collapsible elements where only one can be open at a time, the behavior resembles that of an accordion component. The concept involves closing all collapsibles initially and then opening the one selected by the user. This behavior is demonstrated in the following example using Event Delegation.

In addition, I couldn't help but notice that you created a hasClass function... or Class. However, this isn't necessary as you can simply use: node.classList.contains('class')

The demo includes detailed explanations within the code.

Check out the Demo Below:

/* Added .main class to parent <ul>
|| By adding the eventListener to the
|| parent of multiple clickable nodes
|| and using e.target property to find
|| the exact node actually clicked, we
|| have just needed the <ul> to listen
|| rather than 3 separate <li>
|| This is part of Event Delagation
*/
var main = document.querySelector('.main');

main.addEventListener('click', handleAccordion, false);

function handleAccordion(e) {

  /* Extract all .dropdown-menu elements into a NodeList
  || and then convert it to an array
  */
  var dropdownArray = Array.from(document.querySelectorAll('.dropdown-menu'));

  /* Gather all links inside the .dropdown-menus into
  || a NodeList and then convert it to an array
  */
  var linkArray = Array.from(document.querySelectorAll('a + .dropdown-menu a'));

  /* If the clicked node (e.target) is NOT the
  || node listening for the event (e.currentTarget
  || ul.main), then...
  */
  if (e.target !== e.currentTarget) {

    // Assign e.target to tgr variable
    var tgr = e.target;

    /* If tgr has data-toggle attribute...
    || Find tgr's next sibling (.dropdown-menu)
    || Iterate through dropdownArray with a
    || for...of loop
    || Remove .show and add .hide on
    || each .dropdown-menu in dropdownArray
    || Then add .show and remove .hide
    || on target
    || Finally stop the click event from
    || bubbling up, thereby preventing anything
    || else from being triggered.
    */
    if (tgr.hasAttribute('data-toggle')) {

      // Prevent <a> from jumping
      e.preventDefault();
      var target = tgr.nextElementSibling;
      for (let dropdown of dropdownArray) {
        dropdown.classList.remove('show');
        dropdown.classList.add('hide');
      }
      target.classList.add('show');
      target.classList.remove('hide');
    } else {
      return;
    }
    e.stopPropagation();
  }
}

html,
body,
.container {
  height: 100%;
  width: 100%;
}

.main,
section,
article {
  margin-bottom: 100vh;
}

ul {
  list-style: none
}

.dropdown a {
  text-decoration: none;
}

.dropdown [data-toggle="dropdown"] {
  position: relative;
  display: block;
  color: black;
  padding: 10px;
}

.dropdown .dropdown-menu {
  max-height: 0;
  overflow: hidden;
}

.dropdown .dropdown-menu li {
  padding: 0;
}

.dropdown .dropdown-menu li a {
  display: block;
  padding: 10px 10px;
}

.dropdown .show {
  display: block;
  max-height: 9999px;
  margin-left: 50px;
}

.dropdown .hide {
  max-height: 0;
}

<div id='home' class="container">
  <ul class='main'>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">First Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About Us</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Second Menu</a>
      <ul class="dropdown-menu">
        <li><a href="#1">Section I</a></li>
        <li><a href="#2">Section II</a></li>
        <li><a href="#3">Section III</a></li>
        <li><a href="#4">Section IV</a></li>
      </ul>
    </li>
    <li class="dropdown">
      <a href="#" data-toggle="dropdown">Third Menu</a>
      <ul class="dropdown-menu">
        <li><a href="https://example.com">Example</a></li>
        <li><a href="https://example.com">Example</a></li>
        <li><a href="https://example.com">Example</a></li>
        <li><a href="https://example.com">Example</a></li>
      </ul>
    </li>
  </ul>
  <article id='about'>
    <h2>About</h2>
  </article>

  <article id='services'>
    <h2>Services</h2>
  </article>

  <article id='contact'>
    <h2>Contact</h2>
  </article>

  <hr>

  <section id='1'>
    <h2>Section I</h2>
  </section>


  <section id='2'>
    <h2>Section II</h2>
  </section>


  <section id='3'>
    <h2>Section III</h2>
  </section>


  <section id='4'>
    <h2>Section IV</h2>
  </section>

</div>

Interactive dropdown menu designed to trigger different content selections upon clicking

Answer №1

Check out the Demo Below:

Similar questions

Expanding the filtering capabilities in AngularJS with additional selection options

Tips for creating multiple functions within a single JavaScript function

Encountering a 404 error while attempting to establish a connection between Express and React

Changing the color of a single child object in Threejs

Changing p tags to br tags on tinyMCE

The Vue component that was added dynamically is failing to render

What could be causing site container not to respond to height:auto?

What is the process for extracting data from latitude and longitude in order to generate a marker on Google Maps using a script

Having difficulties redirecting with the button's onclick function

What is the reason behind receiving the error message "Uncaught SyntaxError: Unexpected token o" while using $.parseJSON() and JSON.parse()

What is the reason for MongoDB throwing an error when an array of objects is treated as a string?

What is the method to activate sequential selection through JSON response?

Leveraging Bootstrap grids with JavaScript

Organize the rows of the table based on two variables

What is the method for implementing a dropdown box with select and non-select checkboxes, similar to the example shown in the image, using AngularJS?

Changing the order of rows and columns with CSS3 and DOM manipulation

AngularJS - Issue with Checklist-Model not accurately reflecting changes in the model when checkboxes are toggled

Error: The JS Exception has not been handled, as it is stating that 'undefined' is not an object when evaluating 'global.performance.now' in react-native-tvOS

Receiving JSX from deeply nested dynamic imports in the latest version of NextJS 12 triggers an error message stating that [object Promise] is

What is the best way to integrate AJAX with draggable columns in a Laravel application?