JavaScript: Toggle between 2 functions using a single click event listener

I am facing an issue with coding a Sidebar that features an animated Burger Menu Button named "navicon1". The Menu Button utilizes the "open" class to create a cool animation effect. Moreover, I aim to have the functions "openNav" and "closeNav" toggled when clicking on the menu button.

Here is what I am looking for:

  • Upon the first click on the Menu Button (navicon1), it should change to an X shape (which currently works) and trigger the javascript function "openNav"
  • Subsequently, upon clicking the Menu Button again (navicon1), it should revert to its original form (which also works) and execute the javascript function "closeNav"

Below is my code snippet: 

$(document).ready(function() {

    $('#navicon1,#navicon2,#navicon3,#navicon4').click(function() {
        $(this).toggleClass('open');
    });

});

function openNav() {

    document.getElementById("mySidenav").style.width = "75%";
    document.getElementById("main").style.marginLeft = "75%";
    document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
}

function closeNav() {

    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft = "0";
    document.body.style.backgroundColor = "white";
    check = 0;
}

The other navicons mentioned are solely for styling purposes...

Appreciate your assistance :)

javascriptfunctionmenutogglesidebar

Answer №1

Implementing state management with a variable:

let isNavOpen = false;
$("#navicon1").click(function() {
    if (isNavOpen) {
        closeNavigation();
        isNavOpen = false;
    } else {
        openNavigation();
        isNavOpen = true;
    }
});

Answer №2

My recommendation is to develop a single function that manages the toggleClass() method and invoke your other functions from within it depending on the current state.

$('#navicon1').click(function() {
    $(this).toggleClass('open');

    //if hasClass() then call function to open it

    //else call function to close it

});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for steering clear of getting caught in the initial focus trap

I have implemented Focus-trap (https://www.npmjs.com/package/focus-trap) in my modal to enhance keyboard accessibility. Here is a snippet of my code: <FocusTrap focusTrapOptions={{onDeactivate: onClose}} > <div> ... </div> <Focu ...

javascriptreactjsnext.jsfocus

jQuery failing to trigger onClick event for a specific group of buttons

Javascript: <script> $(document).ready(function(){//Implementing AJAX functionality $(".acceptorbutton").on('click', function(){ var whichClicked = this.attr('name'); ...

javascriptphpjqueryhtmlajax

My Discord bot seems to be malfunctioning and failing to send out

I am new to discord.js and I'm having trouble getting my bot to respond with a message when I send one on the server. The bot shows as online in Discord and "Logged in!" appears in the console when I run it, so client.on("ready") seems to be working f ...

javascriptnode.jsjavahelp

Transmitting information from Angular to Laravel

Hey, I'm facing a challenge once again. Currently, I am working on creating a to-do list application using Laravel and Angular. While I can successfully retrieve data from the database through the Laravel and Angular controllers, I'm encountering ...

javascriptphpangularjslaravelurl-routing

Guide on transforming Json information into the preferred layout and iterating through the loop

Currently, I am diving deep into the world of JSON and feeling a bit puzzled by data formats, arrays, objects, and strings. First things first, I'm in need of data structured like this (on a jQuery page). Would this be considered an object or an arra ...

javascriptphpjqueryjsonajax

Utilize the arrow keys to navigate through the search suggestions

I am facing an issue with my search bar where I am unable to navigate through the suggestions using arrow keys. I have been struggling with this problem for days and would appreciate any help in resolving it. var searchIndex = ["404 Error", "Address Bar ...

javascriptjquerycsshtml

The error message "firebase.initializeApp is not defined" indicates that the object is not properly initialized

Every time I try to open the debugger in Safari, I encounter an error indicating that 'undefined' is not recognized as an object when evaluating 'firebase.initializeApp'. The error specifically points to the line of code: firebase.initi ...

javascriptnode.jsfirebaseexpressfirebase-realtime-database

What could be the reason for the malfunction of my callback function?

This particular function is executed with the command node server const express = require("express"); const app = express(); const fs = require("fs"); const connectDb = require("./config/db"); const __init__ = (local = false) => { fs.writeFile( ...

javascriptnode.js

MongoDB Integration of Collections - No Data Population

Having trouble merging a client and an account collection. When I use res.send(client), only the account id's are returned. Unsure how to include account information in clients. Have seen one to many solutions, but struggling with this two-way relati ...

javascriptnode.jsmongodbexpress

To avoid any sudden movements on the page when adding elements to the DOM using jQuery, is there a way to prevent the page from

I have a challenge where I am moving a DIV from a hidden iFrame to the top of a page using jQuery. Here is my current code: $(document).ready(function($) { $('#precontainer').clone().insertBefore(parent.document.querySelectorAll(".maincontainer" ...

javascriptjquery

JS backbone require global models in js

I am looking to implement a UserSession model that will handle loading and saving session IDs into cookies using the jQuery cookie plugin. Below is the code for my UserSession model module: define(['jQuery', 'Underscore', 'Backbo ...

javascriptjquerybackbone.jsrequirejs

What is the process for storing a particular model in a designated collection within MongoDB's database?

I am working with three different models: user, teacher, student. All of these are stored in the database under the users collection. However, I want to save the student model in its own separate collection called students, instead of mixing it with the us ...

javascriptnode.jsmongodbexpressmongoose

Guide to capturing mouse drag coordinates using JavaScript within a JSP page

My task is to record the starting coordinates (x,y) and ending coordinates (x,y) of a mouse event. For example, on an HTML page with an image, users should be able to select a specific area by dragging the mouse. Therefore, I need to capture the coordinat ...

javascriptdom-events

The markers within a loop in react-native-maps are failing to render

Recently, I've been delving into the world of React Native app development for iOS. Specifically, I've been experimenting with the react-native-maps package. Here's the issue I'm facing: When I statically render a single MapView.Marker, ...

javascriptiosreactjsreact-nativemaps

What is the best way to ensure that this encompassing div adjusts its width to match that of its child elements?

My goal is to keep fave_hold at 100% of its parent div, while limiting the width of .faves to fit its child elements. These elements are generated dynamically with predefined widths. Below is the code snippet in React/JSX format: <div id='fave_h ...

javascripthtmlcssreactjs

Difficulty encountered in resetting progress bar post ajax form submission

Hello, I hope you can assist me with an issue I am facing regarding my progress bar. After submitting the form using AJAX to insert data, my progress bar does not reset. I would like it to reset after clicking the submit button. The progress bar is speci ...

javascriptphphtmlajax

Dynamic Website (Link Relationships / Responsive Design / Content Rendering with CSS and HTML)

Hello everyone! My name is Mauro Cordeiro, and I come from Brazil. I am just diving into the world of coding and have been following various tutorials. Stack Overflow has been an invaluable resource for me in my learning journey! Aside from coding, I am a ...

javascriptjqueryhtmlcss

The process of sending parameters to an API in ReactJS: a guide

My objective is to target .....the values originating from login (can be anything)-> for example email:'[email protected]' password:'12345678' I am required to extract the username until "@" and use it as a username i ...

javascriptreactjsapireduxquery-string

Verify changes in the Cross Domain RSS feed by utilizing Ajax technology

I have a website where I am trying to automatically reload an RSS news feed from every 60 seconds if it has been updated. I attempted to use Ajax for this purpose, but I seem to be facing some issues: <script type="text/javascript" src="../js/jquery.a ...

javascriptjqueryajaxxmlrss

Validating dates in TypeScript

Currently, I am studying date handling and have an object that contains both a start and end date. For example: Startdate = "2019-12-05" and Enddate = "2020-05-20" My goal is to establish a condition that first verifies the dates are not empty. After tha ...

javascripttypescriptif-statement