Question

I can fade in & out different div content, but I’d like that when we open the website, the first div content is already visible.

For now, I have to click on one of the link to show the content. I want the first div visible by default, then we can fade in & out with other div contents when we click on the links. In this case, the lorem ipsum div should be visible at start when we arrive on the webpage.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
  document.documentElement.className += " js"; // Add js class to the HTML element

  $(function(){
    var $containers = $("#animators > div").hide();

    $('a').each(function(i,el){
      var idx = i;
      $(this).click(function(e){
        var $target = $containers.filter(':eq(' + idx + ')');
        // Fade out visible div
        if($containers.filter(':visible').not($target).length){
          $containers.filter(':visible').fadeOut(700, function(){
            $target.not(':visible').fadeIn(700);
          });
        } else {
          $target.not(':visible').fadeIn(700);
        }

        e.preventDefault();
      })
    })
  });

</script>

This is my HTML part

    <div id="animators">
    <div class="container">
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus porttitor, est a mollis pellentesque, purus quam commodo ligula, quis laoreet ipsum enim quis nulla. Nulla leo odio, sollicitudin ut cursus lacinia, placerat in erat. Donec tempor justo vitae enim varius eu placerat arcu pulvinar. Integer fermentum placerat diam, eget bibendum lacus aliquam aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In tellus tortor, fringilla in pulvinar a, ultrices eget magna. Nam in cursus tellus. Donec gravida semper massa in pulvinar. Proin ac dolor nulla, eget vestibulum dui. Vivamus pulvinar ullamcorper ligula nec sollicitudin. Nunc pulvinar cursus tempus.</p>
    </div>
    <div class="container">
     <ul>
      <li>stuff2</li>
      <li>stuff2</li>
      <li>stuff2</li>
     </ul>
    </div>
    <div class="container">
     <ul>
      <li>stuff3</li>
      <li>stuff3</li>
      <li>stuff3</li>
     </ul>
    </div>
    <div class="container">
      <li>stuff4</li>
      <li>stuff4</li>
      <li>stuff4</li>
    </div>
</div>

And my CSS part even though it’s not important in this case

.js #animators { position: absolute; height: 300px}
.js #animators div.container { position: absolute; left: 0; top: 0 }

Answer 1

You’ve already retrieved the container div elements in your $containers variable. You can use this to show the first div and avoid having to grab it again:

var $containers = $("#animators > div").hide();
$containers.eq(0).show();