jQuery - Toggle div class on click

Question

No, this is not a straight forward toggle question. I am aware of the toggle() functions and how to simply hide/show a div. Imagine a box with a label inside:

<div class="section hidden">
    <div class="section-legend">My Section</div>
</div>

When you click anywhere on the entire div, it should remove class hidden. The box then looks expanded. Now that the box is not of class hidden it should not be clickable.

Instead, when you click the div.section-legend it should add class hidden to the main div again. Obviously the click event for the legend needs to stopPropagation(). Now the legend should not be clickable anymore and once again you must click the entire div to open it.

I can't get anything to work properly, and I know this is stupid code:

$(document).ready(function() {

    $('.section.hidden').click(function() {
        $(this).removeClass('hidden');
        $(this).find('.section-legend').click(function(e) {
            $(this).parent().addClass('hidden');
            e.stopPropagation();
        });
    });

    $('.section-legend').click(function(e) {
        $(this).parent().addClass('hidden');
        e.stopPropagation();
        $(this).parent().click(function() {
            $(this).removeClass('hidden');
        });
    });

});

is a div.hidden still visible somehow? I'm not sure how it's meant to be still clickable if it's really 'hidden' — Ben
– Ben, Commented Aug 2, 2011 at 11:45
It's not really hidden, hidden is just the name of the class for the collapsed section. There is some other code that would mean it makes more sense, but here I can see how it looks confusing. — BadHorsie
– BadHorsie, Commented Aug 2, 2011 at 11:47
it has nothing to do with laziness... it helps solving questions like yours... — Fender
– Fender, Commented Aug 2, 2011 at 11:47
Making a JSFiddle to help people solve your issue isnt lazy its just making it far easier for those who want to help understand your problem rather than garbled code that makes no sense with no context. — Henry
– Henry, Commented Aug 2, 2011 at 11:51

Willem · Accepted Answer · 2011-08-02 15:02:45Z

1

$('.section-legend').live('click',function(){
    $(this).parent().toggleClass('hidden');
});

This is assuming the section-legend is just as large as it's container in 'hidden state'.

EDIT: changed some code, solution is this:

$('.section').live('click',function(){
    $(this).removeClass('hidden');
});
$('.section-legend').live('click',function(){
    $(this).parent().toggleClass('hidden'); return false;
});

return false did the trick! demo: http://jsfiddle.net/RUfN7/2/

edited Aug 2, 2011 at 15:02

answered Aug 2, 2011 at 11:43

Willem

5,4042 gold badges25 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BadHorsie Over a year ago

No, section-legend does not fill the entire container, that's the problem. It's just a label inside the larger box, that gets moved to the top of the box when you expand it (i.e. no class hidden).

Pieter888 · Accepted Answer · 2011-08-02 11:44:20Z

1

First add an onclick event on the div that needs clicking:

<div id="myDiv" class="section hidden">
    <div class="section-legend" onclick="function1();">My Section</div>
</div>

And add this javascript to the html

<script language="JavaScript">
    function function1(){
        document.getElementById("myDiv").removeAttribute("class");

    }
</script>

answered Aug 2, 2011 at 11:44

Pieter888

5,02214 gold badges56 silver badges74 bronze badges

Comments

sje397 · Accepted Answer · 2011-08-02 11:51:05Z

1

$('.section').click(function() {
    $(this).removeClass('hidden');
});

$('.section-legend').click(function(e) {
    var $parent = $(this).parent();
    if(!$parent.hasClass('hidden')) {
        $parent.addClass('hidden');
        return false;
    }
});

answered Aug 2, 2011 at 11:51

sje397

41.9k9 gold badges90 silver badges106 bronze badges

Collectives™ on Stack Overflow

jQuery - Toggle div class on click

3 Answers 3

1 Comment

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Linked

Related