How would I hide an element when one is clicked, and show the hidden element when the other element is clicked off of?

Question

I have two classes:

.dropdown-toggle

and

.link_row ul

What I want to do is, when the user clicks on the .dropdown-toggle, I want the .link_row ul to be set to not be displayed. When the user clicks off of the .dropdown-toggle, I want the .link_row ul to be displayed again. How would this be done in javascript/jquery?

Thank you.

Answer 1

You can just use toggle method inside the click event.

$('.dropdown-toggle').on('click', function() {
    $('.link_row ul').toggle();
});