Question

Alright, this is a bit hard to explain, and therefore a bit hard to search for, so please forgive me if it’s been asked before. I’ll be thorough in my explanation.

I have a web page with a varying number of icons. When the user clicks on an icon, it should show the content related to that icon within a DIV. Here’s where it gets tricky. No matter which icon a user clicks, the content should load in to the same DIV. However, only content for one icon should be visible at a time. So if the content for “A” is loaded, and the user clicks on “B”, the content for “A” should fade out and be replaced with content “B” fading in, same thing with “C,” “D,” etc. (probably up to a maximum of about 5). The content can vary widely in size, so the containing DIV for the content needs to animate its height to adjust to the current content.

Where I’m stuck is the animation. I’ve figured out how to hide and show different content basically by setting display: none;” and display: block; on the different content sections based on where the user clicks, but I can’t figure out how to get any kind of animation going.

I’m open to using a pre-made script, but remember that icons and content area are in separate wrappers, so a normal jQuery tab script or accordion script isn’t going to work.

Here’s my scirpt so far:

$(document).ready(function() {  
    $(".heading").click(function(event) {       
        // remove active class from previous, add to current
        $(".hidden.active").removeClass("active");
        $(".hidden." + activeContent).addClass("active");       
    }); 
});

CSS for .hidden and .active:

.hidden {
    display: none;
}
.hidden.active{
    display: block !important;
}

Anything can be modified if necessary, but not the fact that they’re in separate wrappers.

Thanks.

Answer 1

Take a look at this jsFiddle; is something like this what you are looking to do?

HTML

<div id="content">
    <div id="content-1" class="content-container">...</div>
    <div id="content-2" class="content-container">...</div>
    <div id="content-3" class="content-container">...</div>
</dvi>

<div id="buttons">
    <a href="#" data-target="content-1">Content 1</a>
    <a href="#" data-target="content-2">Content 2</a>
    <a href="#" data-target="content-3">Content 3</a>
</div>​

JavaScript

// Hide all but First Content Container //
$('.content-container').hide().first().show();

// Bind to Button click Event //
$('#buttons a').bind('click', function(e){
    e.preventDefault();

    // Set New Target from Button data-target Attribute //
    var $target = $('#'+$(this).data('target'));

    // Fade Out :visible Content and Fade In Target Content //
    $('.content-container').filter(':visible').fadeOut('slow', function(){
        $target.fadeIn('fast');
    });
});

You could also replace fadeOut() and fadeIn() with slideUp() and slideDown() respectively to achieve different animation effects.

I hope this helps!