Fade div in place of another div when corresponding anchor is clicked

Question

I have a 3 divs, 2 set to display none and 1 is visible.

Beneath that I have 3 links which each correspond to 1 of the divs, When one of the links is clicked I need it to fade in the div that it relates to and fade the currently active one out if that makes sense?

Ive added a fiddle, as you can see 'directors' is currently showing, Id like to be able to click one of the links at the bottom, accounts for instance and habe it fade the directors div out and fade in the accounts div....

http://jsfiddle.net/m2hSK/

Answer 1

If you change the class you have to a title attr on the containing divs and the triggering links, and add a "fader" class to the same (example below):

<div class="fader" title="directors">
<a href="#" class="fader" title="directors">directors</a>

CSS becomes:

div.fader {display:none;}

The scripting can then be as follows:

$(document).ready(function(){
    // On link click, the corresponding div needs to fade into the team-profile and the other    
    // needs to fade out...
    $('div.fader[title="directors"]').show();
    $('a.fader').click(function (e) {
        var t = $(this).attr('title');
        $('div.fader').hide('slow');
        $('div.fader[title="' + t + '"]').show('slow');
        e.preventDefault();
        return false;
    });
});

Works and tested on your jsfiddle. Full HTML source below:

     <div class="fader" title="directors">
         <h2>Our Directors</h2>
         <ul class="team">
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
        </ul>
     </div>









     <div class="fader" title="sales">
         <h2>Our Sales Team</h2>
         <ul class="team">
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
        </ul>
     </div>










     <div class="fader" title="accounts">
         <h2>Our Accounts Team</h2>
         <ul class="team">
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
            <li>
                <a href="#">
                    <img src="http://www.placehold.it/218x108" class="fl"/>
                    <div class="information">
                        <p class="block-left">
                            <span class="name-title">Name</span>
                            <span class="name">Thomas O'Donoghue</span>
                            <span class="job-title">Job Title</span>
                            <span class="job">Managing Director</span>
                        </p>
                        <p class="block-right">
                            <span class="biography-title">Biography</span>
                            Thomas is the Managing Director of Website FX, and ha...
                        </p>
                    </div>
                </a>
            </li>
        </ul>
     </div>
     <div>
     <br /><br />
     <a href="#" class="fader" title="accounts">Accounts</a><br />
     <a href="#" class="fader" title="sales">sales</a><br />
     <a href="#" class="fader" title="directors">directors</a>

Hope this helps. Pete