JavaScript function to toggle the visibility of navigation with a click of a button

I'm attempting to create a functionality in my code where the Open navigation button hides when the side navigation opens upon clicking. The desired behavior is for the openNav button to be hidden when it's clicked and then shown again when closeNav is triggered.

Despite searching for solutions to similar issues, I have yet to come across a method that resolves this problem effectively.

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  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";
}
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<button class="pull-right btnstyle" onclick="openNav()">&times;</button>
<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
</div>

javascriptjqueryhtmlcsstwitter-bootstrap

Answer №1

Check out the solution provided here

 openNav = function() {
  $('button[id="openModal"]').hide();
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  
}

closeNav = function() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
  $('button[id="openModal"]').show();
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<button id="openModal" class="pull-right btnstyle" onclick="openNav()">&times;</button>
<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
</div>

Answer №2

Have you attempted using the following method?

document.getElementById("mySidenav").style.visibility = "hidden";

Answer №3

To toggle the visibility of the button, you can hide it when opening the menu and show it when closing the menu.

function toggleNavVisibility(open) {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  open.style.display = 'none'; 
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
  document.getElementById('openButton').style.display = 'block'; 
}
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
<button class="pull-right btnstyle" id="openButton" onclick="toggleNavVisibility(this)">&times;</button>
<div id="main">
<h2>Sidenav Push Example</h2>
<p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
</div>

Answer №4

I have made modifications to your code by including 

document.getElementById("mySidenav").style.display = "block";
in your openNav() function and vice versa for the closeNav() function. I have also applied these changes to the open/closing-button.

In addition, I have set style="display: none;" as the default for the menu so that it is not displayed initially.

function openNav() {
  document.getElementById("mySidenav").style.width = "250px";
  document.getElementById("main").style.marginLeft = "250px";
  document.body.style.backgroundColor = "rgba(0,0,0,0.4)";
  document.getElementById("mySidenav").style.display = "block"; // This line shows the menu
  document.getElementById("openmenu").style.display = "none"; // and hides the "Open Menu" Button
}

function closeNav() {
  document.getElementById("mySidenav").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
  document.body.style.backgroundColor = "white";
  document.getElementById("mySidenav").style.display = "none"; // This line hides the menu
  document.getElementById("openmenu").style.display = "block"; // and shows the "Open Menu" Button
}
<div id="mySidenav" class="sidenav" style="display: none;">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">Close Menu</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>
<button class="pull-right btnstyle" id="openmenu" onclick="openNav()">Open Menu</button>
<div id="main">
  <h2>Sidenav Push Example</h2>
  <p>Click on the element below to open the side navigation menu, and push this content to the right.</p>
</div>

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 preventing empty searches within WordPress by implementing jquery techniques

Within my WordPress website, there is a search function that consists of two separate search boxes. The first one is a basic text input located in the searchform.php file, which has jQuery validation applied with the following code: function title_validat ...

phpjquerywordpress

The partnership between Selenium and WhitePages has created an innovative solution

I am currently attempting to register on . The registration process requires entering my first name, last name, email address, and password. For the first name field, I attempted to locate the element by CSS using the syntax "input#name_fname", however, I ...

cssseleniumselenium-webdriver

Unexpected issue with codebehind not being invoked by ajax

Within this code snippet, there is a dropdown menu that is intended to trigger a method in the backend when a value is selected. However, the dropdown is not currently functioning as expected. The goal is to make the dropdown menu dependent on selecting an ...

jqueryasp.netajax

Merge shared attributes into JSON with the help of JavaScript

I am looking to include a shared property in my JSON Object. Below is an example of the JSON object: data = [ { COUNTRY: 'USA', POPULATION: 300, }, { COUNTRY: 'USA', POPULATION: 50, }, { COUNTRY: 'Cana ...

javascriptjson

Dynamic Mat-select-trigger that automatically adjusts its size to fit the content

Currently, I am experimenting with an Angular Mat-Select that allows multiple selections. To display the selected values in the value field, I have implemented a custom Mat-Select-Trigger. My goal is to enable automatic resizing of the value field (similar ...

cssangularflexboxangular-material

Error: Next.js is throwing a SyntaxError due to encountering an unexpected token 'export'

I encountered an issue when trying to render the following code: SyntaxError: Unexpected token 'export' (project path)/node_modules/react-syntax-highlighter/dist/esm/styles/prism/index.js Everything seems to work as expected initially, but then ...

javascriptnode.jsreactjsnext.js

What is the best way to run an external JavaScript file at regular intervals?

I enjoy loading an external JavaScript file every 10 seconds, or whenever the page body is clicked (in which case, the script should only run if a few seconds have passed). If you could provide me with some documentation on this topic, that would be grea ...

javascriptphpjquerywordpress

Explore the comparison feature with jQuery's combobox

I am attempting to compare values from an array with values in a combobox using jQuery, but I am encountering difficulties. My array is structured like this: (value 1, value 2,...) names separated by commas (Example: john smith, peter pan). On the other h ...

javascriptjquerycomboboxcompare

Material User Interface, MUI, Modal, Back to Top Scroll按钮

After spending some time experimenting with scrollTop and the Dialog component (a fullscreen fixed modal) from Material-ui, I found that I couldn't quite get scrollTop to function properly. Whenever I clicked the "go down" button, it would either retu ...

javascriptcssreactjsmaterial-ui

I'm trying to display hidden forms on a webpage when a button is clicked using the DojoToolkit, but I'm having trouble figuring out what's going wrong with my code

Currently, I am trying to grasp the concepts of Dojotoolkit and my objective is to display a form when a button is clicked. Upon reviewing other examples, my code seems correct to me; however, there appears to be something crucial that I am overlooking but ...

javascripthtmlcssdojo

How can I implement socket.io with multiple files?

I'm encountering an issue with Socket.io in my Express application. I am trying to have two .html files that can send messages to the server, but one of the files is throwing an error: Failed to load resource: net::ERR_FILE_NOT_FOUND add.html:26 Uncau ...

javascripthtmlnode.jssocket.io

Which method is more effective: utilizing AJAX to retrieve page elements, or just toggling their visibility?

When it comes to web development, particularly in jQuery, should I preload my page and use jQuery to manipulate the DOM, or should I do it the other way around? This debate involves: <div id="item1" ></div> <div id="item2"></div> ...

javascriptphpjqueryhtmlajax

Error: TokenMismatchException occurred while verifying CSRF token in VerifyCsrfToken.php line 46 during an AJAX request after completing another process

I keep encountering a TokenMismatchException when I try to send another ajax request after the first one in jQuery within laravel-5.0. Despite trying different browsers, I am consistently faced with the same issue. var settings = { ...

jqueryajaxlaravel-5

Transmit information to Flask server using an AJAX POST call

I'm completely new to Ajax requests. I'm trying to send data from a webpage to my Flask backend using an Ajax request, but I can't get anything to show up in the backend: Here is the request code I am using: function confirm() { cons ...

javascriptajaxformsflaskajaxform

Utilizing the Express-busboy npm package to generate a new directory within the public folder of

While working on my controller, I encountered an issue when trying to readFile sent from the browser via AJAX. Unexpectedly, a directory was created in my public folder with a name like '3d6c3049-839b-40ce-9aa3-b76f08bf140b' -> file -> ...

javascriptnode.jsajaxexpress

Information from the _POST data in PHP

Recently, I encountered a situation where using a dynamic variable in a _POST setting could be useful, but unfortunately, it doesn't seem to function as expected. Here's an example: for($i = 0; $i<$limit; $i++){ if (isset($_POST['val ...

phphtml

Displaying jQuery AJAX response through the use of a PHP script as a middle

After setting up an AJAX request that functions correctly, I encountered a problem with retrieving and displaying the data received from the request. Here's the script in question: var input = $("#input").val(); $(".pure-button").click(function() { ...

jqueryajax

Implementing Jquery validation to check for duplicates when submitting an email form in Laravel

Hi, in my current Laravel project I am implementing a feature to check if an email is unique or not. At the front end, I have integrated jQuery code as shown below: blade.php page user_email: { required: true, email: true, remote: { ur ...

phpjqueryajaxlaravellaravel-5

How can I update the value of a span element that was added to the HTML document through an AJAX request?

When a modal is triggered on click, data is added to it through an AJAX request to a PHP file. After the AJAX call, I want the values in span elements within the modal to change simultaneously with the input field of the modal. I attempted this JavaScript ...

javascriptphpmysqlajaxbootstrap-modal

To handle a 400 error in the server side of a NextJS application, we can detect when it

I'm facing a situation where I have set up a server-side route /auth/refresh to handle token refreshing. The process involves sending a Post request from the NextJS client side with the current token, which is then searched for on the server. If the t ...

javascripttypescripterror-handlingnext.js