I have several nested div elements like this:

<div class="main">
    blah blah blah <div class="clickme">clickme</div>
</div>

<div class="main">
    bleh bleh bleh <div class="clickme">clickme</div>
</div>

<div class="main">
    blih blih blih <div class="clickme">clickme</div>
</div>

I want to fire a toggle event that will show/hide the div marked with the class "main" by clicking on the corresponding clickme text inside its child div tag with "clickme" class. Sorry, I can't figure out how to do this. Thanks.

I have several nested div elements like this:

<div class="main">
    blah blah blah <div class="clickme">clickme</div>
</div>

<div class="main">
    bleh bleh bleh <div class="clickme">clickme</div>
</div>

<div class="main">
    blih blih blih <div class="clickme">clickme</div>
</div>

I want to fire a toggle event that will show/hide the div marked with the class "main" by clicking on the corresponding clickme text inside its child div tag with "clickme" class. Sorry, I can't figure out how to do this. Thanks.

• javascript
• jquery
• toggle

1 Answer 1

$(".clickme").click(function() {
    $(this).parent("div.main").toggle();
});

In regards to your second problem, you need to add:

$(this).unbind('click');

At the end of either of your toggle functions, and it will work as you intend. Good luck.

EDIT: in response to your latest problem, this should do it:

$(".abrefecha").click( function() {
    var that = this; // save this in that :)
    jQuery(this).parent().toggle(
        function () {
            var itemId = jQuery(this).attr("id");
            var itemIndex = $(".showhide").index(this);
            var currentItemHeight = b[itemIndex] + 30 + 'px'
            jQuery(this).css("overflow","auto");
            jQuery(this).animate( { height: currentItemHeight } , 500 );
            $(that).html('close'); // change html inside pink to 'close'
            $(this).unbind('click');
        },
        function () {
            jQuery(this).css("overflow","hidden")
            jQuery(this).animate( { height:"60px" } , 500 );
            $(that).html('abrefecha'); // change html back to 'abrefecha'
            $(this).unbind('click');
        }
    );
});