jquery - Show/Hide additional divs with link. -

am using mvc razor , jquery , building ui dynamically based on db records.

in section of page having lot of common information in separate <div> mentioned below

<div id="test"> </div> <div id="test"> </div> <div id="test"> </div> <div id="test"> </div> .. .. <div id="test"> </div> 

and content dynamic. trying achieve toggling design user

to show 2 or 3 bottom <div> @ time , hide other , have view more/view less.

and if user shows view more show , if click view less ll show 2-3 <div>

i tried implement getting length of <div> , making display:none; not 100% successful in want , thought ll fresh ideas here.

how achieve in jquery keeping view more / less hyperlink ? thanks,

you can use ':eq()' selector in jquery.

:eq() allows select items based on index in matched set. :eq(0) first element , :eq(3) 4th.

this example on fiddle.

and here code example:

// if div isn't 1st, 2nd, or 3rd in set of matched divs, hide $('div:not(:eq(0), :eq(1), :eq(2))').hide();  $(function () {     $('#view-more-less').click(function () {         $('div:not(:eq(0), :eq(1), :eq(2))').toggle();     }) }); 

another approach wrap divs except first 3 in container , hide container javascript. here's fiddle approach.

$('#view-more-less').click( function() {     $('div.more-container').toggle(); }); 

on side note, element id's must unique. shouldn't use id="test" divs. consider making test class instead.