jQuery/JavaScript show/hide event on Toggle Button query

Question

I am just delving into the world of JavaScript and have a query regarding a conundrum I am currently experiencing....

I have a menu button which reveals and hides the nav menu on the site I am working on.To this menu button I have attached some JavaScript to 'hide' the main site content when the nav bar is revealed and to 'show' the main content when the nav bar is subsequently closed again.

The JavaScript I have coded does the job, but I know it's not right and that somehow I fluked it! I know this because the timing values of the script for both the 'reveal' and 'hide' element interact with each other...making setting the timing of the animations somewhat unpredictable to set accurately.

The menu button which shows and hides the nav menu has the following classes attached to it:

.menu-toggle

And when it is clicked to reveal the nav bar an additional class is added which is:

.toggled-on

So in it's clicked state the classes are:

'.menu-toggle toggled-on'

Here is the JS which controls the hiding and revealing of the site content:

$(document).on('click', '#menu-toggle', function() {
  $('.site-content').animate({opacity:1, visibility:'visible'}, 100);
});

$(document).on('click', '.toggled-on', function() {
  $('.site-content').animate({opacity:0, visibility:'visible'},        300);
});

I believe the issue is arising because of the assignment of the classes remains in both the 'normal' and 'clicked' states of the menu button.

I think I need to do somethng like this:

    $(document).ready(function(){

    if ( $('#menu-toggle').hasClass('toggled-on') ) {
    $('#menu-toggle').addClass('nav-on');
  } else {
    $('#menu-toggle').addClass('nav-off');
  }

});

This however doesn't work.

If in anyone could point me in the direction of how to better code this then that would be greatly appreciated.

Answer 1

If i understood correctly, u want to toggle the class.

Could you try http://api.jquery.com/toggleclass/ .

Let me know if it works for you !

Thanks

Kamal

Answer 2

$(function () {
    $('body').on('click', '#menu-toggle', function () {
      $('.site-content').toggle(300)
    })
})

The above code will cause the .site-content div to fade in and fade out when you click #menu-toggle .

Wrapping the function literal inside of the jQuery function $() is just shorthand for $(document).ready() . You can write it either way and it works the same. I like the more terse syntax.

The .toggle() method in jQuery simply toggles the visibility of an element. You don't need to change classes or directly manipulate opacity or visibility to do that. jQuery detects whether or not it's visible and takes care of the rest. You can add a duration to get the fade effect.

I delegated the binding to the body tag because I don't know the structure of your HTML. If .site-content has a wrapper div, you can delegate to that.(The idea is that it's more efficient to delegate closer to the event target rather than make the event bubble all the way up to the document).

Enjoy!

UPDATE FROM OP:

Thanks for the reply.This does indeed toggle the content,but I was using the visibility and opacity properties because I don't want the layout to change when the .site-content is hidden.When visibility is toggled the content obviously fully dissapears

NEW SOLUTION:

I don't know what you layout / CSS looks like, but I think this is what you want...

Add the following to the CSS style for the .site-content :

visibility: visible;

Now add the following CSS rule:

.site-content.hidden {
    visibility: hidden;
}

Now change the JS code to the following:

$(function () {
    $('body').on('click', '#menu-toggle', function () {
      $('.site-content').toggleClass('hidden')
    })
}) 

The style visibility: hidden means that you will no longer see the element, but it will still be part of the document flow. In other words, it will still take up space in your layout. This change will not affect the rest of the layout.

Now, when you click #menu-toggle it will either add or remove the hidden class.