CODEWITHSUNDEEP
jquery
user2882079
user2882079

Reputation: 21

jquery slideToggle doesn't work

I've got a list of events, and what I'm trying to do, is that when the user clicks one of the event, the event name box would expand and the description from the event should appear under the event name, but currently it just closes the next event instead.

Here is my jquery code:

jQuery(document).ready(function() {
            jQuery('.event_hide').hide();
            jQuery('.eventr').css('cursor', 'pointer').click(function() {
                var $this = $(this);
                $this.next("div").slideToggle(500);
            });
        });

Here is a link to the fiddle: http://jsfiddle.net/9Cxx2/76/

Hope you can help me out.

Best regards,
Martin

Upvotes: 0

Views: 88

Answers (3)

Rohan Kumar
Rohan Kumar

Reputation: 40639

Use .find(".event_hide") in place of .next("div") like,

jQuery(document).ready(function () {
    jQuery('.event_hide').hide();
    jQuery('.eventr').css('cursor', 'pointer').click(function () {
        var $this = $(this);
        $this.find(".event_hide").slideToggle(500);
    });
});

Read find()

Demo

Upvotes: 0

Snake Eyes
Snake Eyes

Reputation: 16754

You have to use $this.find(".event_hide").slideToggle(500);

Code: http://jsfiddle.net/9Cxx2/77/

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

What you are looking for It is a descendant element not the next sibling of the clicked eventr element, use find() instead of .next()

$this.find(".event_hide").slideToggle(500);

Demo: Fiddle

Upvotes: 1

Related Questions