Execute various functions with toggleClass() upon clicking using jQuery

Question

Execute various functions with toggleClass() upon clicking using jQuery

I am looking to execute multiple actions at the same time when a button is clicked.

In my JavaScript code, I am using toggleClass() function in jQuery to toggle the visibility of a burger icon. Toggling the menu on click is working as expected. However, I am facing difficulties in triggering another event simultaneously, such as hiding an item on the page.

The desired behavior I want to achieve is as follows: - When the burger icon is clicked, the menu unrolls and hides a specific item. - Clicking on the burger icon again should roll up the menu and display the hidden item once more.

Despite trying various approaches, I have not been successful in achieving this functionality.

Any guidance or assistance would be greatly appreciated!

jquery triggers

Answer 1

Answer №1

To achieve that particular effect, my approach involves adding a class to the container housing both the menu and the element you wish to show/hide (if they are within the body tag, the method remains the same). Then, utilizing CSS with a descendant selector allows for control over both the menu and the hidden element. Below is a simple example:

document.getElementById("menu").addEventListener("click", () => {
    document.getElementById("container").classList.toggle("the-class");
});

#menu {
    /* Styles for the menu when not toggled */
    border: 1px solid grey;
    height: 5em;
}
.hidey-thing {
    /* Additional styles for the hidey thing if required */
}

#container.the-class #menu {
    /* Styles for the menu when toggled */
    height: 10em;
    border: 1px solid black;
}
#container.the-class .hidey-thing {
    /* Styles for the hidey thing when toggled */
    display: none;
}

<div id="container">
    <div id="menu">
    The menu
    </div>
    <div class="hidey-thing">
    This is the show/hide element
    </div>
</div>

Omitting jQuery in this case was intentional as it seemed unnecessary, but if desired, here's an alternative using jQuery:

$("#menu").on("click", () => {
    $("#container").toggleClass("the-class");
});

Answer 2

To achieve that particular effect, my approach involves adding a class to the container housing both the menu and the element you wish to show/hide (if they are within the body tag, the method remains the same). Then, utilizing CSS with a descendant selector allows for control over both the menu and the hidden element. Below is a simple example:

document.getElementById("menu").addEventListener("click", () => {
    document.getElementById("container").classList.toggle("the-class");
});

#menu {
    /* Styles for the menu when not toggled */
    border: 1px solid grey;
    height: 5em;
}
.hidey-thing {
    /* Additional styles for the hidey thing if required */
}

#container.the-class #menu {
    /* Styles for the menu when toggled */
    height: 10em;
    border: 1px solid black;
}
#container.the-class .hidey-thing {
    /* Styles for the hidey thing when toggled */
    display: none;
}

<div id="container">
    <div id="menu">
    The menu
    </div>
    <div class="hidey-thing">
    This is the show/hide element
    </div>
</div>

Omitting jQuery in this case was intentional as it seemed unnecessary, but if desired, here's an alternative using jQuery:

$("#menu").on("click", () => {
    $("#container").toggleClass("the-class");
});

Answer 3

Answer №2

Is this what you're asking about?

$(document).on("click", "#trigger1", function () {
    //insert code here
});

Answer 4

Is this what you're asking about?

$(document).on("click", "#trigger1", function () {
    //insert code here
});

Execute various functions with toggleClass() upon clicking using jQuery

Answer №1

Answer №2

Similar questions

spark of unique substance

Accessing form data from Ajax/Jquery in php using $_POST variables

Displaying a date and time beautifully in jQuery/JavaScript by providing the day of the week along with the specific time

Is there a way to enable Fancybox to change to the adjacent gallery by simply using the 'up' or 'down' arrow keys?

Struggling to get .parent().toggleClass to function properly

Looking for assistance with resizing and repositioning an image within a viewport?

The initial return value of $(document).height may be inaccurate, but is accurate upon recalculation

Clicking outside the div will cause the div to be hidden

I need help figuring out how to mention an id using a concatenated variable in the jquery appendTo() method

Choose an element by its specific data attribute

How can the onclick attribute be modified in an HTML document?

Using jsPlumb to Access an Element After a "Mouseup" Event has Completed

"Use jquerytools to create a dynamic play/pause button functionality for scrollable content

Error alert: $.simpleWeather function not found

Can one manipulate SVG programmatically?

How can we stop the jumping of images in the grid? Is there a way to eliminate the jump effect?

Assistance with offsetting a jQuery drop down menu

Tips for implementing personalized command buttons in Kendo Grid with AJAX request utilizing JavaScript

Having trouble with jQuery validation: Seeking clarification on the error

Struggling to get your HTML to Express app Ajax post request up and running?