Toggle display of menu using jQuery

Question

Toggle display of menu using jQuery

My webpage has a layout where the content is on the left and the sidebar is on the right. When the screen width is less than or equal to 480px, the two divs are stacked one under the other at 100% widths. There's a "Show/Hide" button that appears to toggle the visibility of the sidebar when clicked. To achieve this, I'm using the code:

$(".sidebar .box").slideToggle(200);

You can see everything in action on this jsfiddle link.

The issue I'm facing is that when I switch from wide screen to narrow screen (width <= 480px) and click the button again, it causes a back and forth bug.

I'm trying to figure out where I've gone wrong. Any help would be appreciated!

javascript jquery css menu show-hide

Answer 1

Answer №1

It seems that the issue lies in this particular code snippet:

$("a.expander").click(function () {
    $(this).toggleClass('close');
    $(".sidebar .box").slideToggle(200);
});

Every time the showSidebar function is triggered, which happens whenever the window is resized, the above code gets executed. JQuery's click function actually adds a new event handler each time, leading to multiple executions of all handlers upon window resize.

To resolve this problem, the click handler registration should be moved outside of the function.

Answer 2

It seems that the issue lies in this particular code snippet:

$("a.expander").click(function () {
    $(this).toggleClass('close');
    $(".sidebar .box").slideToggle(200);
});

Every time the showSidebar function is triggered, which happens whenever the window is resized, the above code gets executed. JQuery's click function actually adds a new event handler each time, leading to multiple executions of all handlers upon window resize.

To resolve this problem, the click handler registration should be moved outside of the function.

Answer 3

Answer №2

It seems like the issue you are facing is that the slide function is being triggered repeatedly when the window is resized. To prevent this from happening uncontrollably, consider using an event handler to manage it more effectively:

Try using .one():

$('#your_element_id').one("click", function () {     
    $('.your_css_style_class').slideToggle(200); 
});

Additionally, if you plan on initially displaying the element as hidden and then revealing it later, consider using .slideDown() instead of .slideToggle() at the outset.

For further information on the 'one' function in jQuery, refer to: http://api.jquery.com/one

Answer 4

It seems like the issue you are facing is that the slide function is being triggered repeatedly when the window is resized. To prevent this from happening uncontrollably, consider using an event handler to manage it more effectively:

Try using .one():

$('#your_element_id').one("click", function () {     
    $('.your_css_style_class').slideToggle(200); 
});

Additionally, if you plan on initially displaying the element as hidden and then revealing it later, consider using .slideDown() instead of .slideToggle() at the outset.

For further information on the 'one' function in jQuery, refer to: http://api.jquery.com/one

Answer 5

Answer №3

Is this the kind of solution you were looking for? http://jsfiddle.net/jqdvj42u/3/

$(document).ready(function() {
     $("a.expander").click(function () {
        $(this).toggleClass('close');
        $(".sidebar .box").slideToggle(200);
    });
});

function showSidebar() {   
    if ($(window).width() <= 480) {
        // Close sidebar when window width <= 480px
        $(".sidebar .box").removeClass('open');
        // Click expander button to show/hide sidebar

    } else {
        $("a.expander").removeClass('close');
        // Open sidebar when window width > 480px;
        $(".sidebar .box").addClass('open');
    }
}
showSidebar();

$(window).resize(showSidebar);

It is important that your click event is not called within the showSidebar() function to avoid binding the click event multiple times whenever the function is executed. The resize method can trigger showSidebar() multiple times, leading to multiple bindings of the click event. Additionally, it is recommended to use jQuery version 1.11 or higher for better compatibility, especially if support for IE<9 is required. If compatibility with IE<9 is not necessary, jQuery version 2.0 or higher can be used.

Answer 6

Is this the kind of solution you were looking for? http://jsfiddle.net/jqdvj42u/3/

$(document).ready(function() {
     $("a.expander").click(function () {
        $(this).toggleClass('close');
        $(".sidebar .box").slideToggle(200);
    });
});

function showSidebar() {   
    if ($(window).width() <= 480) {
        // Close sidebar when window width <= 480px
        $(".sidebar .box").removeClass('open');
        // Click expander button to show/hide sidebar

    } else {
        $("a.expander").removeClass('close');
        // Open sidebar when window width > 480px;
        $(".sidebar .box").addClass('open');
    }
}
showSidebar();

$(window).resize(showSidebar);

It is important that your click event is not called within the showSidebar() function to avoid binding the click event multiple times whenever the function is executed. The resize method can trigger showSidebar() multiple times, leading to multiple bindings of the click event. Additionally, it is recommended to use jQuery version 1.11 or higher for better compatibility, especially if support for IE<9 is required. If compatibility with IE<9 is not necessary, jQuery version 2.0 or higher can be used.

Toggle display of menu using jQuery

Answer №1

Answer №2

Answer №3

Similar questions

Saving content with the CKEditor BalloonEditor using Ajax

Create a function that is determined by a specific hyperlink

Retrieve the value and attribute of a checkbox using jQuery, then send the data to the server

What is the reason for the inclusion of [Circular] in the hash?

An issue arising from code in Python, JavaScript, HTML, and CSS

Add United States as an additional attribute to the countries retrieved from the API

Stop the jQuery addon from being loaded multiple times

The issue of selecting multiple classes simultaneously is not being resolved

When a single column is achieved, aligning with justify-content space-between

Preventing Component Duplication in Vue.js: Tips to Avoid Displaying Two Instances on the Screen

Ensure that clicking on an element closes any currently visible elements before opening a new element

"Create a dynamic HTML newsletter utilizing tables similar to the responsive design principles

CSS Priority - determining the ultimate winner

Is it possible to implement an automatic clicking function on a bootstrap navigation bar similar to a carousel?

Adding a Key Value pair to every object within an Array using TypeScript

How can I create a customized placeholder effect for the Paytm login page text box?

import the JSON file into a variable object

Javascript error when attempting to add leading zeros

Sharing JSON data between two Backbone views

Retrieve a non-existent property from an object using the forEach method