Hide text from <here> to the end of an <element>

If I have a section of content say like this:

<div>
  <p>...</p>
  <p>...</p>
  <span id="more">Read more...</span>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>

How can I hide all the markup that comes after the <span> until the closing </div>?

I'v开发者_开发技巧e marked something up in jsfiddle, which you can work with.

Thanks

Al

$("#more").nextAll("p").hide();

if you have more elements than just <p>, repeat this function in same way

http://api.jquery.com/nextAll/

If you're starting out with it showing and want to hide it, probably nextAll, which collects following siblings matching a selector. Since the p elements are siblings of the span:

$("#more").nextAll("p").hide();

I'd also start out with the "more" link hidden, so that people not using JavaScript at all can read the article without this odd link in the middle. :-) So:

<div>
  <p>...</p>
  <p>...</p>
  <span id="more" style="display: none">Read more...</span>
  <p>...</p>
  <p>...</p>
  <p>...</p>
  <p>...</p>
</div>

and

$("#more").show().nextAll("p").hide();

Wrapping that up to hook up a handler for showing them again:

$("#more")
    .show()
    .click(function() {
        $(this).hide().nextAll("p").show();
    })
    .nextAll("p").hide();

Updated fiddle

this one is also very easy and useful jquery plugin..

http://plugins.learningjquery.com/expander/