jQuery problem on click event triggering hidden content

Question

I'm trying to load inline hidden content by fading it inside another div. The thing is that I can't prevent the content from being duplicated when there's more than one div with hidden content that have the same classes.

Here is a jsfiddle for better understanding: http://jsfiddle.net/EjU7M

Any help would be appreciated, thanks in advance!

So, when one of the .link elements is clicked, you want only the previous .remove element to be removed, and the previous .hidden text to be displayed? — David Thomas
– David Thomas, Commented Mar 26, 2011 at 22:17
Yes exactly I want that but without affecting others divs. I mean I want the event only to be applied once when u click an only .link. For example if u remove that extra .box, .full_text and .link you could see the event working well — Jackson Viera
– Jackson Viera, Commented Mar 26, 2011 at 22:24

Mark Coleman · Accepted Answer · 2011-03-26 22:33:44Z

1

In your example you were querying all elements with a classname you will need to traverse the dom and match the elments near your link.

$('.link').click(function() {
    var $box = $(this).prevAll(".box:first"); //find the nearest .box
    var $remove = $b.find(".remove"); //find the remove in that box.
    var $text = $(this).prevAll(".full_text:first"); //find the text
    $remove.stop().animate({
        opacity: 0
    }, 'fast', function() {
        $remove.remove();
        $text.stop().fadeTo('fast', 1).appendTo($box);
    });
    return false;
})

Code example on jsfiddle.

answered Mar 26, 2011 at 22:33

Mark Coleman

40.9k9 gold badges84 silver badges101 bronze badges

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

10 Comments

Jackson Viera Over a year ago

Yay! Thats what I wanted!! Thank you very much. Very kind of you :)

Jackson Viera Over a year ago

@Mark my final code seems that it doesn't have more than one .box container as it only needs to be updated. See this code example: jsfiddle.net/EjU7M/2 kinda need to update the .box with display text 2 hidden content and then some kind of "close" link to back to the original .box content. Thanks in advance!

Mark Coleman Over a year ago

@Jackson, I think this is what you need. jsfiddle.net/markcoleman/EjU7M/3 , with only one box and a way to revert back to the original text.

Jackson Viera Over a year ago

@Mark Yes!! Thanks again for taking the time! Is there any easy to fire the revert only if the display text is showed? Thanks in advance!

Jackson Viera Over a year ago

Just to let you know that I sorted it out myself :)

|

Collectives™ on Stack Overflow

jQuery problem on click event triggering hidden content

1 Answer 1

10 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

10 Comments

Your Answer

Sign up or log in

Post as a guest

Related