Question

I have a div that contains four paragraph tags. When the page is loaded, I wanted to have the first two paragraphs to be shown then have the follow paragraph elements be hidden, but I have no idea how to do this. For simplicity I set the event to a button versus a document ready event in the jsfiddle example below.

http://jsfiddle.net/zTCFe/4/

<div id="div">
<p>1 keep me shown</p>
<p>2 keep me shown</p>
<p>3 hide me</p>
<p>4 hide me</p>
</div>

<input type="button" value="press" id="button"/>

<script>

$('#button').click(function () {

$('#div').children().hide();

});

</script>

Answer 1

You were almost there:

$('#div').children(':gt(1)').hide();

More on the :gt selector.

http://jsfiddle.net/gromer/Tdue6/1/