Locate a control and hide elements

Question

I have a bunch of Div's on the page

<div id="MainDiv"><div>sometext</div>
<div>sometext</div>
<div>Page 1</div>
<div>Page 1</div>
<div>Page 1</div>
<div id="Placeholder1"></div>
<div>othertext</div>
<div>othertext</div>
<div>Page 2</div>
<div>Page 2</div><div>

How do I hide all child Div's of 'MainDiv' that fall after the div 'Placeholder1'.

Also on a long page, is it possible that once the page loads, the browsers scrolls directly to the Placeholder? Is this possible and is there a cross-browser solution to it?

Answer 1

http://api.jquery.com/next-siblings-selector/

Answer 2

$('#Placeholder1 ~ div').hide()

OR

$('#Placeholder1').nextAll('div').hide()

ScrollTo is a plugin that might help you with the second part of your question.

Answer 3

To auto-scroll to the element just use a hash link (this works in all browsers), for example:

myPage.html#Placeholder1

To hide the divs after it, just just .nextAll() and .hide(), like this:

$("#Placeholder1").nextAll("div").hide();

Answer 4

For hiding all elements after Placeholder1,

$("#Placeholder1").nextAll('div').hide();

and for scrolling

$(document).scrollTop($("#Placeholder1").offset().top)