jQuery eq to display fade in block

What I'm trying to do is to fade in a block which on the CSS is display to none here is what I 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 the HTML:

<div id="act1">first click</div> 
<div id="act2">second click</div>  

<ul>
    <li><div id="tos" class="white_content">  
    some text...
    </di开发者_如何学Cv></li> 

    <li><div id="tos" class="white_content">   
    other some text
    </div></li> 
</ul>

If I change on the jQuery li:eq(0) to #tos it will work fine but I can't get it to work with li:eq(0) since this is what I'm trying to do.

---

There are several problems here. First of all, ids must be unique - they cannot repeat as you have done in the code you have here. Secondly, the display: none property is set on div.white_content, not li, so your selector should be li:eq(n) div.white_content.

Even then this code should be easily rewritable to something neater, like this:

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

---

Given your HTML, I think this is what you need:

// For the two buttons
$('div[id^=act]').click(function(){
    var n = parseInt(this.id.substring(3), 10);
    $('li').eq(n-1).find('.white_content').fadeToggle(400);
});

// For the close button
$('.close').click(function(){
    $(this).closest('.tos').fadeOut(400);
});

You're using duplicate ids, which is invalid HTML. I've taken the liberty of changing them to classes, which is the correct way to do this. The closest function looks for the nearest ancestor that matches the selector, in this case the div that contains the elements.

On a side note, since li are block level elements, you can skip the div and put all your contents in the li element directly, eliminating one layer of HTML.

---

try:

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