Tips for ensuring Accordion menu closes upon clicking a second time

Question

Tips for ensuring Accordion menu closes upon clicking a second time

I created a basic Accordion menu using just HTML and CSS. The functionality works well, but I'm facing an issue where clicking on an open accordion doesn't close it.

Can this be achieved with CSS alone or would I need to use JavaScript?

.middle a {
  text-decoration: none;
}

.menu {
  width: 100%;
  overflow: hidden;
}

.item {
  border-top: 1px solid #2980b9;
  overflow: hidden;
}

.btn {
  display: block;
  padding: 16px 20px;
  background: #3498db;
  color: white;
  position: relative;
}

.btn:before {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  background: #3498db;
  left: 20px;
  bottom: -7px;
  transform: rotate(45deg)
}

a i {
  margin-right: 10px;
  margin-left: 10px
}

.smenu {
  background: white;
  overflow: hidden;
  transition: max-height 0.3s;
  max-height: 0;
}

.smenu a {
  display: block;
  padding: 16px 26px;
  font-size: 14px;
  margin: 4px 0;
  position: relative;
}

.smenu a:before {
  content: "";
  position: absolute;
  width: 6px;
  height: 100%;
  background: #3498db;
  left: 0;
  top: 0;
  transition: 0.3s;
  opacity: 0;
}

a:hover:before {
  opacity: 1;
}

.item:target .smenu {
  max-height: 100%;
}

.item {
  list-style-type: none
}

<div class="middle">
  <div class="menu">
    <li class="item" id="aboutus">
      <a href="#aboutus" class="btn">About Us</a>
      <div class="smenu">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4</a>
        <a href="#">5</a>
        <a href="#">6</a>
      </div>
    </li>
    <li class="item" id="contactus">
      <a href="#contactus" class="btn">Contact Us</a>
      <div class="smenu">
        <a><i class="fas fa-phone"></i>000-000-000</a>
        <a><i class="fas fa-envelope-open"></i>Send Us An Email</a>
        <a>ABCDEFG</a>
        <a>P.O> Box 00000</a>
        <a>New York, New York 000000</a>
        <a><i class="fas fa-clock"></i>Monday - Friday: 9AM - 5PM ET</a>
        <a><i class="fas fa-window-close"></i>Saturday-Sunday: Closed</a>
        <a><i class="fas fa-desktop"></i>Online: 24/7</a>
      </div>
    </li>
    <li class="item" id="sitelinks">
      <a href="#sitelinks" class="btn">Site Links</a>
      <div class="smenu">
        <a href="#">1</a>
        <a href="#">2</a>
        <a href="#">3</a>
        <a href="#">4t</a>
        <a href="#">5</a>
        <a href="#">6</a>
      </div>
    </li>


  </div>
</div>

css

Answer 1

Answer №1

The Challenge

When it comes to opening an accordion panel, the key is for the panel with the li class="item" to be the current target (hash).

.item:target .smenu {
  max-height: 100%;
}

However, closing that panel is not as straightforward. Simply clicking on the item again won't work; you'll need to click on something else or turn to JavaScript. So, the answer to the question "Can I achieve this with CSS or do I need JavaScript?" leans towards requiring JavaScript.

Incorporating JavaScript

The good news is that the JavaScript solution is relatively simple. Encapsulated within a DOMContentLoaded function, here's how it would look if placed in its own .js file linked to your page:

document.addEventListener("DOMContentLoaded", function(event) {
    const items = document.querySelectorAll('.menu li.item');
    for (let item of items) {
        item.addEventListener('click', function(e) {
                if ('#'+e.currentTarget.id === location.hash) {
                    e.preventDefault();
                    window.location.hash = '';
                }
        });
    }
});

Understanding the Functionality

This code selects all menu items using the querySelectorAll method and loops through each one to attach a 'click' event listener. The logic inside the event listener checks if the clicked item matches the current hash value; if so, it prevents the default action and clears the hash.

With the hash value cleared, the CSS selector .item:target no longer applies, causing the previously open accordion panel to close.

Using a Stack Snippet

In a stack snippet scenario where the DOM readiness is handled automatically, we can simplify the script. Below is the modified version incorporating JavaScript into your existing snippet:

const items = document.querySelectorAll('.menu li.item');
    for (let item of items) {
        item.addEventListener('click', function(e) {
                                if ('#'+e.currentTarget.id === location.hash) {
                                    e.preventDefault();
                                    window.location.hash = '';
                                }
        });
    }

(CSS styles)

(HTML structure)

Furthermore, since the items variable isn't essential beyond looping, you can even further simplify the code using arrow functions:

document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelectorAll('.menu li.item')
            .forEach(element =>
                  element.addEventListener('click',
                     e => {
                            if ('#'+e.currentTarget.id === location.hash) {
                                e.preventDefault();
                                window.location.hash = '';
                            }
                          })
                 )
});

The condition in the code could potentially be refactored into a predicate function, but that's left as an exercise for the reader.

Answer 2

The Challenge

When it comes to opening an accordion panel, the key is for the panel with the li class="item" to be the current target (hash).

.item:target .smenu {
  max-height: 100%;
}

However, closing that panel is not as straightforward. Simply clicking on the item again won't work; you'll need to click on something else or turn to JavaScript. So, the answer to the question "Can I achieve this with CSS or do I need JavaScript?" leans towards requiring JavaScript.

Incorporating JavaScript

The good news is that the JavaScript solution is relatively simple. Encapsulated within a DOMContentLoaded function, here's how it would look if placed in its own .js file linked to your page:

document.addEventListener("DOMContentLoaded", function(event) {
    const items = document.querySelectorAll('.menu li.item');
    for (let item of items) {
        item.addEventListener('click', function(e) {
                if ('#'+e.currentTarget.id === location.hash) {
                    e.preventDefault();
                    window.location.hash = '';
                }
        });
    }
});

Understanding the Functionality

This code selects all menu items using the querySelectorAll method and loops through each one to attach a 'click' event listener. The logic inside the event listener checks if the clicked item matches the current hash value; if so, it prevents the default action and clears the hash.

With the hash value cleared, the CSS selector .item:target no longer applies, causing the previously open accordion panel to close.

Using a Stack Snippet

In a stack snippet scenario where the DOM readiness is handled automatically, we can simplify the script. Below is the modified version incorporating JavaScript into your existing snippet:

const items = document.querySelectorAll('.menu li.item');
    for (let item of items) {
        item.addEventListener('click', function(e) {
                                if ('#'+e.currentTarget.id === location.hash) {
                                    e.preventDefault();
                                    window.location.hash = '';
                                }
        });
    }

(CSS styles)

(HTML structure)

Furthermore, since the items variable isn't essential beyond looping, you can even further simplify the code using arrow functions:

document.addEventListener("DOMContentLoaded", function(event) {
    document.querySelectorAll('.menu li.item')
            .forEach(element =>
                  element.addEventListener('click',
                     e => {
                            if ('#'+e.currentTarget.id === location.hash) {
                                e.preventDefault();
                                window.location.hash = '';
                            }
                          })
                 )
});

The condition in the code could potentially be refactored into a predicate function, but that's left as an exercise for the reader.

Tips for ensuring Accordion menu closes upon clicking a second time

Answer №1

The Challenge

Incorporating JavaScript

Understanding the Functionality

Using a Stack Snippet

Similar questions

What is the reason behind both paragraphs being displayed in a shade of blue in this snippet of code

The hover effect generates a flickering sensation

Loading necessary CSS when needed in React JS

Displaying the "Ad Blocker Detected" image next to the advertisement

Adjustable / consistent box height

What method does Apple use to apply overflow:hidden to elements within position:fixed?

Is the ID selector the quickest method in jQuery and CSS?

Don't forget to update the CSS stylesheet whenever templates are rendered in Flask

Customizing SwiperJS to display portion of slides on both ends

I am having trouble placing the button within the image

Graphs vanish when they are displayed in concealed sections

CSS - Issue with table cell height exceeding in Mozilla Firefox and Internet Explorer

Having trouble with implementing the .addclass function in a dice roller project

Looking for a way to make a button glide down to the bottom of a card in a

Using an inline-block within a positioned absolute element

Unexpected issue with accessing the jQuery class descendant

JavaScript button for displaying and hiding all content in one click

The color of the progress bar in JS is not displaying properly

Engaging JavaScript Navigation

Testing the Limits of CSS Hover