JavaScript (Create a button that toggles the visibility of an element)

Question

JavaScript (Create a button that toggles the visibility of an element)

I have implemented a hamburger menu that transforms into an x when clicked. I am looking to modify it so that clicking on the hamburger opens the menu, and clicking on the x closes the menu.

Below is the code I have been working with:

<!DOCTYPE html>
<html>
<style>
body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: .9s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}
</style>
<body>

<div id="mySidenav" class="sidenav">

  <a href="#">...</a>
  <a href="#">...</a>
  <a href="#">...</a>
  <a href="#">...</a>
</div>

<div id="main">
  <span style="cursor:pointer" onclick="openNav(); closeNav()>
<div class="container" onclick="myFunction(this)">
  <div class="bar1"></div>
  <div class="bar2"></div>
  <div class="bar3"></div>
</div>
</span>
</div>

<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
function myFunction(x) {
    x.classList.toggle("change");
}
</script>

</body>
</html>

javascript jquery html css

Answer 1

Answer №1

If you want to implement a toggle feature, one way you could do it is by using the following function:

function toggleNavigation() {
    var sidebar = document.getElementById("mySidebar"),
    content = document.getElementById("content");
    sidebar.style.width = sidebar.style.width === "250px" ? '0' : '250px';
    content.style.marginLeft = content.style.marginLeft === "250px" ? '0' :  '250px';
}

HTML:

<span style="cursor:pointer" onclick="toggleNavigation();">...</span>

See it in action here: https://jsfiddle.net/iRbouh/df4cuet5/

Answer 2

If you want to implement a toggle feature, one way you could do it is by using the following function:

function toggleNavigation() {
    var sidebar = document.getElementById("mySidebar"),
    content = document.getElementById("content");
    sidebar.style.width = sidebar.style.width === "250px" ? '0' : '250px';
    content.style.marginLeft = content.style.marginLeft === "250px" ? '0' :  '250px';
}

HTML:

<span style="cursor:pointer" onclick="toggleNavigation();">...</span>

See it in action here: https://jsfiddle.net/iRbouh/df4cuet5/

Answer 3

Answer №2

To easily solve this issue, consider assigning two classes to the button. For example: class="Original Open" where one class is Original and the other is Open.

In your Javascript file, create an onclick function for the Open class that first locates the Original class. Within this onclick function, reveal the Menu Container, add a new class like "Close" to the button when it's clicked for the first time, and remove the "Open" class.

Next, develop an onclick function for the "Close" class that hides the Menu and removes the "Close" class while reinstating the "Open" class.

That's the simple logic behind it...!!

Answer 4

To easily solve this issue, consider assigning two classes to the button. For example: class="Original Open" where one class is Original and the other is Open.

In your Javascript file, create an onclick function for the Open class that first locates the Original class. Within this onclick function, reveal the Menu Container, add a new class like "Close" to the button when it's clicked for the first time, and remove the "Open" class.

Next, develop an onclick function for the "Close" class that hides the Menu and removes the "Close" class while reinstating the "Open" class.

That's the simple logic behind it...!!

Answer 5

Answer №3

Here is my preferred method.

$(".tab").on("click", function(){
  $(this).toggleClass("active inactive");
});

See it in action: https://example.com/code-demo/

Answer 6

Here is my preferred method.

$(".tab").on("click", function(){
  $(this).toggleClass("active inactive");
});

See it in action: https://example.com/code-demo/

Answer 7

Answer №4

function toggleSidenav(x) { document.getElementById("mySidenav").classList.toggle("open");
    x.classList.toggle("change");
}

body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: .9s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px,, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

/* ----- START -----  */

.open {
  width: 250px;
}
.open ~ #main {
  margin-left: 250px;
}

/* ----- END ----- */

<div id="mySidenav" class="sidenav">
  <a href="#">...</a>
  <a href="#">...</a>
  <a href="#">...</a>
  <a href="#">...</a>
</div>

<div id="main">
  <span style="cursor:pointer">
    <div class="container" onclick="toggleSidenav(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </span>
</div>

Answer 8

function toggleSidenav(x) { document.getElementById("mySidenav").classList.toggle("open");
    x.classList.toggle("change");
}

body {
    font-family: "Lato", sans-serif;
}

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #818181;
    display: block;
    transition: 0.3s
}

.sidenav a:hover, .offcanvas a:focus{
    color: #f1f1f1;
}

.closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px !important;
    margin-left: 50px;
}

#main {
    transition: margin-left .5s;
    padding: 16px;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}
.container {
    display: inline-block;
    cursor: pointer;
}

.bar1, .bar2, .bar3 {
    width: 35px;
    height: 5px;
    background-color: #333;
    margin: 6px 0;
    transition: .9s;
}

.change .bar1 {
    -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
    transform: rotate(-45deg) translate(-9px, 6px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
    -webkit-transform: rotate(45deg) translate(-8px,, -8px) ;
    transform: rotate(45deg) translate(-8px, -8px) ;
}

/* ----- START -----  */

.open {
  width: 250px;
}
.open ~ #main {
  margin-left: 250px;
}

/* ----- END ----- */

<div id="mySidenav" class="sidenav">
  <a href="#">...</a>
  <a href="#">...</a>
  <a href="#">...</a>
  <a href="#">...</a>
</div>

<div id="main">
  <span style="cursor:pointer">
    <div class="container" onclick="toggleSidenav(this)">
      <div class="bar1"></div>
      <div class="bar2"></div>
      <div class="bar3"></div>
    </div>
  </span>
</div>

JavaScript (Create a button that toggles the visibility of an element)

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

GET method returns an empty array in the express node server

The functionality of `req.isAuthenticated()` is never true when using PassportJs with a combination of nodeJS and dynam

Are you interested in implementing the switcher function in a React JS class component?

Connect the blade.php file with CSS in Laravel version 5.x

What steps can I take to resolve this CSS problem?

Understanding the user's preference for text alignment and managing how the text is displayed in a text area (or text field) within a ReactJS application

I am utilizing Vuex to store all of the product details and handle API request queries efficiently

Is there a way to place a badge alongside a carousel using Bootstrap?

The compatibility between cross-fetch and React Native is currently not supported

Morris.js is throwing an error message, stating "Uncaught TypeError: Unable to access the 'label' property as it

Enhancing the efficiency of JavaScript code

Definition for TypeScript for an individual JavaScript document

Having trouble with making a POST request in Node.js using Express.js and Body-parser?

Erroneous deletion issue in React list causing removal of incorrect item

The useEffect alert is triggered before the component is re-rendered

Having trouble displaying my klout score with ajax

Storing files in DynamoDB using Reactjs is a convenient and efficient way

Having difficulty accurately interpreting the input value

Concealing Bootstrap 3 elements on a split-screen layout

JavaScript accordions failing to open