Question

There are 3 divs and 3 links.

Only one div should be displayed at a time. When user clicks on a link for one of the other divs, the current one should fade out and the selected one should fade in, in place of the previous div.

Here is the code at the moment:

Javascript

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
    $(document).ready(function() {
        switches = $('#switches > li');
        slides = $('#slides > div');
        switches.each(function(idx) {
                $(this).data('slide', slides.eq(idx));
            }).click(
            function() {
                switches.removeClass('active');
                slides.removeClass('active').fadeOut('slow');
                $(this).addClass('active');
                $(this).data('slide').addClass('active').fadeIn('slow');
            });
    });
</script>

CSS

    <style style="text/css">
        ul {
            list-style: none;
        }
        li:hover {
            text-decoration: underline;
        }

        #switches .active {
          font-weight: bold;
        }

        #slides div {
          display: none;
        }

        #slides div.active {
          display: block;
        }

        .outer {
            position: absolute;
        }
        .outer div {
            width: 600px;
            height: 300px;
        }
        #uno {
            background-color: red;
        }
        #dos {
            background-color: blue;
        }
        #tres {
            background-color: green;
        }
    </style>

HTML

    <ul id="switches">
        <li class="active">First slide</li>
        <li>Second slide</li>
        <li>Third slide</li>
    </ul>

    <div class="outer" id="slides">
        <div class="active" id="uno">
            First div.
        </div>
        <div id="dos">
            Second div.
        </div>
        <div id="tres">
            Third div.
        </div>
    </div>

You can view the page here:
http://dl.dropbox.com/u/6920023/proofOfConcept.html

I’m attempting to use standard Jquery to do this, but clearly there is something wrong with my javascript code.

Can you spot what’s wrong and how to fix it?

Answer 1

Your CSS defines a div that’s not active as hidden. So as soon as you remove the active class, it will be hidden immediately.

So, remove this entry:

    #slides div {
      display: none;
    }

And add something like this on page load:

$(function() {
    $('#slides div:not([class="active"])').hide();
}); // will hide inactive slides initially but not always