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 binations but just couldn't get the right result and behavior.

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 binations but just couldn't get the right result and behavior.

• javascript
• jquery
• html
• ajax

• Add some html with description – K D Commented Mar 12, 2013 at 12:07
• @KD lost in formatting; no more – John Dvorak Commented Mar 12, 2013 at 12:08
• 2 show us your tries @JanBo – soyuka Commented Mar 12, 2013 at 12:10
• Rather than actually replacing the class, why not just add a second class "expanded" on click? This can easily be achieved using .toggleClass as mentioned by Mahmoud above me – Kippie Commented Mar 12, 2013 at 12:19

5 Answers 5

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

You can add a class to parent element like the following code.

$(".contact #icon").click(function(){
  var element = $(this).parent(".contact");
  element.removeClass("contact").addClass("contactexpand");
});

I like to the jQuerys toggleClass function like so:

$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});

Or you could use addClass('className') and removerClass('className') if you would like to apend it rather than toggle it :)

Here is an example: http://jsfiddle/aUUkL/

You can also add an onclick event to the body of the page and use hasClass('className') to see whether or not to toggle the class when the body is clicked. You could use something like this (Although I havent tested this bit!):

$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
    $('#contactbox').addClass('contact');
    $('#contactbox').removeClass('contactexpand');
}
});

You can do this

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

    if ($(event.target).attr('id') == 'icon') {
        $(event.target).parent().toggleClass('contactexpand');
    } else {
        $('.contact').removeClass('contactexpand');
    }

});

Check out this jsfiddle

var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
    e.stopPropagation();
    $contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});

$(document).on('click', function(e) {
    if (e.srcElement === $contact[0]) return;
    $contact.find('#icon').trigger('click', true);
});

http://jsfiddle/kZkuH/2/