CODEWITHSUNDEEP
javascriptjquerymenutoggleshow-hide
DaveHil
DaveHil

Reputation: 3

Hide and show an item based on a toggled is-active class

I used the following code to toggle a button class in order to make a full-screen mobile menu.

HTML

button class="hamburger hamburger--slider" type="button">
<a href='#'><div class="hamburger-box">
<div class="hamburger-inner"></div>
</div>
</a>

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.hamburger').click(function(){
$('.hamburger--slider').toggleClass('is-active');
});
});
});

Now I would like to hide another item in my header when the toggled class .is-active is present.

The following code works to hide the item, but once the toggled class is gone, the item does not reappear but stays hidden until the page is reloaded.

jQuery(function($) {
    if ($('.hamburger--slider.is-active').length) {
      $('.rey-headerCart-wrapper').hide();
    }
  });

Appreciate any help :) !

Upvotes: 0

Views: 1928

Answers (2)

Lapskaus
Lapskaus

Reputation: 1721

In order to make toggle functions like this more understandable, maintainable and extendable you need to think about your HTML structure.

In your current structure, you have a button that toggles a class on itself. Therefore any element beyond that button that has to change appearance or beaviour has to check which class that button has, or you have to extend the click-event handler in order to add these elements (that's what you did here).

This can get quite messy really fast.

A better approach could be to not toggle a class on the button but on an element that is a common parent to all elements that you want to change the behavior of.

That way anything you ever add to that wrapper already can be manipulated via CSS, without the need of changing your JS.

$('.nav-toggler').on('click', function() {
  $('#nav-wrapper').toggleClass('active');
});
.menu, .cart {
  padding: 1em;
  margin: 2px;
}

.cart {
 background: #FFF000;
}

.menu{
  background: #F1F1F1;
  display: none;
}

#nav-wrapper.active > .menu {
  display: block;
}

#nav-wrapper.active > .cart {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="nav-wrapper">
  <button class="nav-toggler">Toggle</button>
  <div class="menu">My Menu</div>
  <div class="cart">My Cart</div>
</div>

Upvotes: 0

swift-lynx
swift-lynx

Reputation: 3765

you have to show the element again after the burger menu closes:

document.addEventListener('DOMContentLoaded', function() {
  jQuery(function($){
    $('.hamburger').click(function(){
      $('.hamburger--slider').toggleClass('is-active');

      // hide / show other element
      if ($('.hamburger--slider.is-active').length) {
        $('.rey-headerCart-wrapper').hide();
      } else {
        $('.rey-headerCart-wrapper').show();
      }
    });
  });
});

Or in vanilla javascript:

window.addEventListener("load", () => {
  document.querySelector(".hamburger").addEventListener("click", () => {
    document.querySelector(".hamburger--slider").classList.toggle("is-active");

    // hide / show other element
    const cart = document.querySelector(".rey-headerCart-wrapper");
    if (document.querySelector(".hamburger--slider.is-active")) {
      cart.style.display = "none";
    } else {
      cart.style.display = "block";

      // apply original display style
      // cart.style.display = "inline-block";
      // cart.style.display = "flex";
    };
  });
})

Upvotes: 1

Related Questions