Question

I am trying to make only the li:nth-child(2) width animate from 230px to 780px.

I have done this, but now whenever there is a li within this section it then gives the nth-child(3) that width of 780px also.

How do I only affect the width of the one element I am trying to?

JS :

$(document).ready(function(){
    $("#getsocial").live('click', function(){
        $(".homepage li:nth-child(1)").fadeOut(1000);
        $(".homepage li:nth-child(3)").fadeOut(1000);
        $(".homepage ul > li:nth-child(2)").fadeOut(1000).delay(300).fadeIn(1000).animate({width:'780px'},1000);
        $(".socialshare").hide().delay(2400).fadeIn(1000);
        $(".goback").hide().delay(2400).fadeIn(1000);
    });
});

I have also tried this:

$(document).ready(function(){
    $("#getsocial").live('click', function(){
        $(".homepage li:nth-child(1)").fadeOut(1000);
        $(".homepage li:nth-child(3)").fadeOut(1000);
        $(".homepage li:nth-child(2)").fadeOut(1000).delay(300).fadeIn(1000).animate({width:'780px'},1000);
        $(".socialshare").hide().delay(2400).fadeIn(1000);
        $(".goback").hide().delay(2400).fadeIn(1000);
    });
});

HTML :

<div class="homepage">
  <ul>
    <li>content here</li>
    <li>
      <ul>
        <li>content here</li>
        <li>content here</li>
        <li>content here</li>
      </ul>
    </li>
    <li>content here</li>
  </ul>
</div>

Thanks in advance for the help given 🙂

Answer 1

Use this selector instead:

.homepage > ul > li:nth-child(2)

This will work for the html you have posted above, because now it will only work on a ul that is a direct descendent of <div class="homepage"> and therefore not your sub ul.