Toggle the active class on the parent element when it is clicked

Question

Toggle the active class on the parent element when it is clicked

I'm encountering a problem with my JavaScript - attempting to make this function properly.

Firstly, here is the desired functionality:

1.) Add or remove the 'active' class from the parent element when clicked

2.) When clicking inside the child element, it closes - I need assistance in preventing that behavior... I want the child element to remain open if any clicks occur within it...

3.) Is there a way to enable closing the child element by clicking anywhere on the page, rather than only being able to close it by clicking on the parent element?

JavaScript:

$(document).ready(function () {
    $("#logsterIn_profile").click(function () {
        $(".logsterIn_profile").slideToggle('200');
        $("#logsterIn_profile").addClass('active');
    });
});

To view the current implementation, check out DEMO ON FIDDLE

Any assistance would be greatly appreciated!

javascript jquery html css

Answer 1

Answer №1

Here is the solution for all three points:

$(document).ready(function () {
    $("html").click(function () {
        $(".logsterIn_profile").slideToggle('200');
        $("#logsterIn_profile").toggleClass('active');
    });
   $(".logsterIn_profile").click(function( event ) {
        event.stopPropagation();
   });
});

Utilize toggleClass to switch between "active" and ""
Implement stopPropagation on the child element to handle the click event on it, preventing it from propagating up to its parent
To enable clicking anywhere on the page to open/close the child, associate the click event with "html"

Answer 2

Here is the solution for all three points:

$(document).ready(function () {
    $("html").click(function () {
        $(".logsterIn_profile").slideToggle('200');
        $("#logsterIn_profile").toggleClass('active');
    });
   $(".logsterIn_profile").click(function( event ) {
        event.stopPropagation();
   });
});

Utilize toggleClass to switch between "active" and ""
Implement stopPropagation on the child element to handle the click event on it, preventing it from propagating up to its parent
To enable clicking anywhere on the page to open/close the child, associate the click event with "html"

Answer 3

Answer №2

Would you like the div to both open and close when the user clicks outside the parent div, or just close?

Based on your explanation, it seems like you only want the div to close without opening if the user clicks outside. If that's the case, you'll need to check whether the child is currently open or closed when the user clicks outside the parent element. You can achieve this with the following code:

$(document).ready(function () {

    $("html").click(function(e) {
        if (e.target == document.getElementById("logsterIn_profile")){
            $(".logsterIn_profile").slideToggle('200');
            $("#logsterIn_profile").toggleClass('active');
        }else{
            if($("#logsterIn_profile").hasClass('active')){
                $(".logsterIn_profile").slideToggle('200');
                $("#logsterIn_profile").toggleClass('active');
            }
        }
    });

    $(".logsterIn_profile").click(function( event ) {
       event.stopPropagation();
     });

});

You can test it out on this fiddle

Answer 4

Would you like the div to both open and close when the user clicks outside the parent div, or just close?

Based on your explanation, it seems like you only want the div to close without opening if the user clicks outside. If that's the case, you'll need to check whether the child is currently open or closed when the user clicks outside the parent element. You can achieve this with the following code:

$(document).ready(function () {

    $("html").click(function(e) {
        if (e.target == document.getElementById("logsterIn_profile")){
            $(".logsterIn_profile").slideToggle('200');
            $("#logsterIn_profile").toggleClass('active');
        }else{
            if($("#logsterIn_profile").hasClass('active')){
                $(".logsterIn_profile").slideToggle('200');
                $("#logsterIn_profile").toggleClass('active');
            }
        }
    });

    $(".logsterIn_profile").click(function( event ) {
       event.stopPropagation();
     });

});

You can test it out on this fiddle

Answer 5

Answer №3

http://jsfiddle.net/AzSXL/8/

When the document is ready, the function will be executed to toggle a class and slide for a profile section.
The profile section will toggle its visibility when clicked on with a smooth animation.
Click events are also bound to prevent propagation and handle toggling class and sliding.

Answer 6

http://jsfiddle.net/AzSXL/8/

When the document is ready, the function will be executed to toggle a class and slide for a profile section.
The profile section will toggle its visibility when clicked on with a smooth animation.
Click events are also bound to prevent propagation and handle toggling class and sliding.

Toggle the active class on the parent element when it is clicked

Answer №1

Answer №2

Answer №3

Similar questions

How can I make all fields in the CKAN Resource form html the same size as the "Description" field?

What are some reasons for the slow performance of AWS SQS?

Is there a way to serve server-side rendered content exclusively to search engine crawlers like Google Bot, without SSR for regular users in Next.js?

Tips on sending a JSONP token with an AJAX request

Sending form data without interrupting the user interface by using asynchronous submission

Unraveling Complex JSON Structures in React

Is it possible to conceal an arrow in a typical dropdown menu?

Tips for Validating a Strongly Typed View in MVC3 without Using a Model

Forming a space between borders

What is the most effective method to override parent styles while utilizing CSS Modules?

Assigning active classes based on the href attributes of child <a> tags

There was an error: "TypeError: Unable to access the equipmentImage property of

Having difficulty with PHP code, attempting to output some HTML while also opening a file and displaying its contents

The alignment of elements in the div seems to be slightly skewed

Tips on leveraging state values within the makeStyles function in Material UI React

Issues with the throttling function of the setTimeout method in an

Searching for a way to retrieve all information based on the parent in a dynamically dependent Laravel system?

"Bower fetches and installs specific versions of packages from the repository

Is there a way to dynamically switch between AngularJS modules based on a configuration change?

After a two-second period of inactivity, the buttons on the item should trigger an action