Writing a simple custom read more on click function for jquery that needs refactoring

I want to be able to reuse the same function many times on one page..

So here's some psuedo-code :

$(".read_more").click(function(){
$(this).parents().find(".hidden_text").slideToggle("fast")
});

The problem with this code, however, is that it targets every elem on the page matching .hidden_text. Is there a way to combine closest() with this? Or is th开发者_运维知识库ere a better way to refactor this?

Update:

HTML:

<div class="grid_2">
  <div class="read_more">
    Click Me
  </div>
</div>

<div class="grid_2">
  <div id=".hidden_text">
    Bagels are the most resourceful tools to the most legendary programmers.
  </div>
</div>

---

I think

$(this).closest("*:has(.hidden_text)").find(".hidden_text").slideToggle("fast");

will work.

---

You'll want to add 'return false' to stop jumping

$(".read_more").click(function(){
    $(this).next(".hidden_text").slideToggle("fast");
    return false;
});

And obviously add to css

.hidden_text {
    display:none
}

---

if the hidden content is at the same level that your read more link, ie:

<div>
    blbalbblal allalfdk 
    <a class="readmore">read more</a>
    <div class="hidden-text" style="display:none">other bla bla bla</div>
</div>

Then you can use the next selector

   $(".readmore").click(function(){
        $(this).next(".hidden_text").slideToggle("fast")
    });