jQuery eq to display fade in block -

what i'm trying fade in block on css display none here got:

css:

.white_content {     display: none;     position: relative;;     width: 5%;     height: 5%;     padding: 24px;     border: 16px solid orange;     background-color: some;     z-index:1; } 

jquery

$(function(){     $("#act1").click(function() {         $('li:eq(0)').fadein(400);      });      $("#act2").click(function() {         $('li:eq(1)').fadein(400);      });  });  

an html:

<div id="act1">first click</div>  <div id="act2">second click</div>    <ul>     <li><div id="tos" class="white_content">       text...     </div></li>       <li><div id="tos" class="white_content">        other text     </div></li>  </ul> 

if change on jquery li:eq(0) #tos work fine can't work li:eq(0) since i'm trying do.

there several problems here. first of all, ids must unique - cannot repeat have done in code have here. secondly, display: none property set on div.white_content, not li, selector should li:eq(n) div.white_content.

even code should rewritable neater, this:

$('div[id^=act]').click(function(){     var n = parseint(this.id.substring(3), 10);     $('li').eq(n-1).find('.white_content').fadein(400); }); 

---

given html, think need:

// 2 buttons $('div[id^=act]').click(function(){     var n = parseint(this.id.substring(3), 10);     $('li').eq(n-1).find('.white_content').fadetoggle(400); });  // close button $('.close').click(function(){     $(this).closest('.tos').fadeout(400); }); 

you're using duplicate ids, invalid html. i've taken liberty of changing them classes, correct way this. closest function looks nearest ancestor matches selector, in case div contains elements.

on side note, since li block level elements, can skip div , put contents in li element directly, eliminating 1 layer of html.