jQuery show more details on click -

i seek in resolving issue. want reveal more details inside div upon clicking link in div. however, there on 50 divs in single page. can't give ids each div , clickable link. there we can achieve this?

here have tried.

<script type="text/javascript">   $(document).ready (function(){     $('#clk').click(function(e){       $('.1').css({'height':'500px', 'background-color': '#ffbbbb'} );       $(this).hide ();       e.preventdefault();     });   }); </script> 

clk id of clickable link. .1 class of div.

as mentioned earlier, going have done, have use 50 ids , 50 classes

here html of part

<div class="1">     <ul>     <li><img src="images/thumb/someimage.jpg"></li>     <li><h2>title text </h2></li>     <li><h3>summary</h3></li>     <li><p> para goes here. <a class="clk" href="#">click</a></p>     </li></ul>  </div> 

please me resolve issue.

many thanks.

you don't need use ids find things, it's not way. make things relative. use closest, next etc find shower clicker. (it better answer if showed html structure, too.)

edit: okay, got saying. reading comprehension fail on part. so, first, let's rename .1 sensible, say... .expandable:

<div class="expandable">   <ul>   <li><img src="images/thumb/someimage.jpg"></li>   <li><h2>title text </h2></li>   <li><h3>summary</h3></li>   <li><p> para goes here. <a class="clk" href="#">click</a></p>   </li></ul> </div> 

you do:

$('.clk').click(function() {   e.preventdefault();   $(this).closest('.expandable').css({'height':'500px', 'background-color': '#ffbbbb'} );   $(this).hide();   e.preventdefault(); }); 

so, .closest goes current element, finding nearest ancestor matches. way, can get appropriate .expandable each .clk, no need ids or 50 class names.

although, having auto height better in circumstances fixed 500, unless absolutely know how stuff have.