What is the most effective method to implement a toggle function using only JavaScript, without any reliance on jQuery?

Question

What is the most effective method to implement a toggle function using only JavaScript, without any reliance on jQuery?

Recently, I had a navigation bar in the form of an unordered list (ul) with multiple list items (li), and the last li element was labeled 'more' which had its own sub-menu in the form of another ul. To toggle this sub-menu between visible and hidden states when clicking on the 'more' li, I utilized JavaScript along with a counter in an if statement. Despite my success in achieving the desired functionality, I found it necessary to use the counter as an intermediary step since directly checking for visibility didn't produce the toggle effect.

Here are the queries that arose from this implementation:

Would employing this toggle method be considered acceptable within a professional front-end developer workspace?
Is there a more efficient way to accomplish toggling between visible and hidden states solely using JavaScript? (I aim to enhance my JavaScript skills)

For reference, below is the relevant code snippets:

HTML

<ol id = "leftNav" class = "bothNavs">
    <li class = "navs" id = "more">More<div class = "arrow"></div>
        <ul class = "subMenu">
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </li>
</ol>

CSS

.subMenu {
    width: 160%;
    padding: 5px 0px;
    padding-left: 7px;
    margin-left: 6px;
    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
    background: #2D2D2D;
    list-style: none;
    z-index: 1001;
}

JavaScript

var more = document.querySelector('#more');
var subMenu = document.querySelector('.subMenu');
var counter = 0;

more.addEventListener("click", toggle);

function toggle() {
    if (counter === 0) {
        subMenu.style.visibility = "visible";
        counter += 1;
    } else {
        subMenu.style.visibility = "hidden";
        counter -= 1;
    }
};

Awaiting your valuable insights and suggestions. Thank you.

javascript css

Answer 1

Answer №1

I believe a more efficient way to handle visibility toggling (or any style change) is by using class toggling.

Try incorporating something similar to this in your CSS:

.dropdownMenu.is-shown {
    display: block;
}

Then your JavaScript function can be simplified like so:

var dropdown = document.querySelector('.dropdownMenu');
document.getElementById('showMore').addEventListener('click', function ()  {
    dropdown.classList.toggle('is-shown');
}, false);

Answer 2

I believe a more efficient way to handle visibility toggling (or any style change) is by using class toggling.

Try incorporating something similar to this in your CSS:

.dropdownMenu.is-shown {
    display: block;
}

Then your JavaScript function can be simplified like so:

var dropdown = document.querySelector('.dropdownMenu');
document.getElementById('showMore').addEventListener('click', function ()  {
    dropdown.classList.toggle('is-shown');
}, false);

Answer 3

Answer №2

When implementing a toggle functionality, it is recommended to use a boolean value instead of an integer:

var more = document.querySelector('#more');
var subMenu = document.querySelector('.subMenu');
var clicked = false;

more.addEventListener("click", function(evt) {
  // Utilize the ternary operator for a simple if/else statement
  subMenu.style.visibility = (clicked) ? "visible" : "hidden";

  // Toggle the boolean value of 'clicked' from true to false or vice versa
  clicked = !clicked;
});

Additionally, it would be beneficial to review (and upvote) this question on Stack Overflow - What is the difference between visibility:hidden and display:none?

Answer 4

When implementing a toggle functionality, it is recommended to use a boolean value instead of an integer:

var more = document.querySelector('#more');
var subMenu = document.querySelector('.subMenu');
var clicked = false;

more.addEventListener("click", function(evt) {
  // Utilize the ternary operator for a simple if/else statement
  subMenu.style.visibility = (clicked) ? "visible" : "hidden";

  // Toggle the boolean value of 'clicked' from true to false or vice versa
  clicked = !clicked;
});

Additionally, it would be beneficial to review (and upvote) this question on Stack Overflow - What is the difference between visibility:hidden and display:none?

Answer 5

Answer №3

Avoid placing a <ul> within an <li> element as it can disrupt the document hierarchy and diminish the semantic value of the HTML.

In a previous instance, I encountered a similar issue which led me to implement the following solution:

var submenu = document.querySelector('.submenu');
if (clicked) {
    submenu.style.visibility = "visible";
} else {
    submenu.style.visibility = "hidden";
}

It may be beneficial to utilize an id instead of a class if there are other submenus that could be affected.

Answer 6

Avoid placing a <ul> within an <li> element as it can disrupt the document hierarchy and diminish the semantic value of the HTML.

In a previous instance, I encountered a similar issue which led me to implement the following solution:

var submenu = document.querySelector('.submenu');
if (clicked) {
    submenu.style.visibility = "visible";
} else {
    submenu.style.visibility = "hidden";
}

It may be beneficial to utilize an id instead of a class if there are other submenus that could be affected.

Answer 7

Answer №4

If you find that a counter is unnecessary, consider using a boolean instead:

var more = document.querySelector('#more');
var subMenu = document.querySelector('.subMenu');

more.addEventListener("click", toggle);

function toggle () {    
    subMenu.style.visibility = subMenu.style.visibility != "hidden" ? "hidden" : "visible";
    
};

.subMenu {
    width: 60%;
    background: #2D2D2D;
    list-style: outside none none;
    color: white
}

<ol id = "leftNav" class = "bothNavs">
    <li class = "navs" id = "more">More<div class = "arrow"></div>
        <ul class = "subMenu" style="visibility: hidden">
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </li>
</ol>

To improve this code, consider modifying it to toggle a class rather than an inline CSS style, as suggested by James in his response.

Answer 8

If you find that a counter is unnecessary, consider using a boolean instead:

var more = document.querySelector('#more');
var subMenu = document.querySelector('.subMenu');

more.addEventListener("click", toggle);

function toggle () {    
    subMenu.style.visibility = subMenu.style.visibility != "hidden" ? "hidden" : "visible";
    
};

.subMenu {
    width: 60%;
    background: #2D2D2D;
    list-style: outside none none;
    color: white
}

<ol id = "leftNav" class = "bothNavs">
    <li class = "navs" id = "more">More<div class = "arrow"></div>
        <ul class = "subMenu" style="visibility: hidden">
            <li>One</li>
            <li>Two</li>
            <li>Three</li>
        </ul>
    </li>
</ol>

To improve this code, consider modifying it to toggle a class rather than an inline CSS style, as suggested by James in his response.

What is the most effective method to implement a toggle function using only JavaScript, without any reliance on jQuery?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The div above the footer seems to be interfering with the styling of the footer. Is there a solution to

Need a tool for validating forms?

Can a <Link> be customized with a specific condition?

What is the functionality of Google Chrome's "New Tab" iframes?

What is the most effective method for updating a className in Next.js using CSS Modules when a button is activated?

"Troubleshooting: Why are errors not appearing in ts-node

The hovering event trail feature is not functioning in tsParticles, unlike in particlejs

Tips for modifying the language of an Angular Application's OneTrust Cookie Banner

Is there a software available that can transform <style> blocks into inline CSS code?

Transforming Button style in jQuery Mobile version 1.3.0

Ensuring a div remains perfectly centered

RTL in TextInput only functions properly every other time it is rendered

Discovering the mean value from a data set in a spreadsheet

"Unlocking the potential of AngularJS: A guide to accessing multiple controllers

A guide to extracting iFrame information (specifically the referring URL) using JavaScript

The webpack development server refreshes the page just one time

What are the steps for incorporating a linear-gradient hue into a Slider?

Customize your error messages in AJAX requests

aligning columns within a flexible element that has a maximum height

Dealing with performance issues in VueJS and Vuetify's data-table component, especially when trying to implement