Question

45

change div class onclick on another div, and change back on body click

rated 0 times [ 51] [ 6] / answers: 1 / hits: 30358 / 11 Years ago, tue, march 12, 2013, 12:00:00

Let me define the problem a little bit more:

i have

    <div class=contact>

      <div id=form></div>

      <div id=icon></div>

    </div>

i want onclick on #icon, to change the class of .contact to .contactexpand( or just append it).

Then i want that the on body click to change the class back, but of course that shouldnt happen when clicking on the new class .contactexpand, and if possible that clicking on icon again changes the class back again.

I tried numerous examples and combinations but just couldn't get the right result and behavior.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kieraelsies

Add To Favorites

Follow

Total Points: 718

Total Questions: 103

Total Answers: 104

Location: England

Member since Sun, May 21, 2023

1 Year ago

kieraelsies questions

1 How do I change text color in SweetAlert2?

Tue, Aug 3, 21, 00:00, 3 Years ago

1 Tailwind Custom Colors Not Complied

Tue, Feb 23, 21, 00:00, 3 Years ago

1 How to write inline onclick function as es6 arrow function?

Thu, Nov 12, 20, 00:00, 4 Years ago

1 How to remove all roles from an user discord.js v12?

Wed, Sep 9, 20, 00:00, 4 Years ago

1 PlusMinus Challenge

Mon, Sep 16, 19, 00:00, 5 Years ago

View All

answered 11 Years ago nadiatristinl · Accepted Answer

Check this: Working example

Let's go step by step

I want onclick on #icon, to change the class of .contact to .contactexpand( or just append it). […] and if possible that clicking on icon again changes the class back again.

You want to use the toggleClass() method to achieve this. Simply:

$('#icon').on('click', function(e){



    $(this).parent()

    .toggleClass('contact')

    .toggleClass('contactexpand');



});

Then i want that the on body click to change the class back

You will have to make sure that body removes contactexpand class and adds contact. At this point I would just give the container element an id (or class if you prefer), just to make things simpler. Then what you do is pretty simple:

$('body').on('click', function(e){



 $('#thisdiv')

 .removeClass('contactexpand')

 .addClass('contact');



});

but of course that shouldnt happen when clicking on the new class .contactexpand.

This is the step that the other answers missed, I think. Since everywhere you click, you also click on the body element, you will always trigger the click event on the body, hence removing the contactexpand class and adding the contact one.

Enter event.stopPropagation(). This method will make sure that the events doesn't bubble up the DOM, and will not trigger the body click.

$('#thisdiv').on('click', function(e){



    e.stopPropagation();



});

Working example