CODEWITHSUNDEEP
jquery
3D-kreativ
3D-kreativ

Reputation: 9319

Slide Toggle using "this"?

I'm using several articles with text in one webpage. I just have a short text intro and then a "read more" link to slide toggle the rest of the article.

I'm trying to simplify my code and are looking for a solution to use this in some way instead of the need to use a unique class or id for for each block of text and just use one function to handle slide toggle for all hidden text block. I would like some hints how to develop my code, if it's possible to do it that way? I'm not sure.

jQuery

$(document).ready(function() {  
$(".more").click(function(){
$(this).next(".extra").slideToggle("fast");
});
});

HTML

<div class="articleContent">
    <h1>Headline 1</h1>
    <p>Text 1 <a href="#" class="more">read more....</a>
    </p>
    <p class="extra">
    Some more text to read 1
    </p>
</div>

<div class="articleContent">
    <h1>Headline 2</h1>
    <p>Text 2 <a href="#" class="more">read more....</a>
    </p>
    <p class="extra">
    Some more text to read 2
    </p>
</div>

Upvotes: 0

Views: 121

Answers (3)

VIDesignz
VIDesignz

Reputation: 4783

Here you go...don't use next on this

Updated Example

 $('document').ready(function() { 
    $(".more").click(function(e){
        e.preventDefault();
        $(this).parent('p').siblings(".extra").slideToggle("fast");
    });
 });

Upvotes: 2

David Thomas
David Thomas

Reputation: 253456

I'd suggest:

$('.articleContent').on('click', function(e){
    if ($(e.target).is('.more')) {
        $(this).find('.extra').toggle();
    }
});

JS Fiddle demo.

References:

Upvotes: 2

Cezary Wojcik
Cezary Wojcik

Reputation: 21845

Here's a jsfiddle with working code: http://jsfiddle.net/6wqsf/

JavaScript:

$(".more").click(function () {
    $(this).parent().next(".extra").slideToggle("fast");
});

Upvotes: 2

Related Questions