Animating Content in a DIV

Question

Well, that’s a little hard to explain, and therefore a little hard to find, so please forgive me if this were asked earlier. I will explain this in detail.

I have a webpage with a different number of icons. When a user clicks on an icon, he should display the content associated with this icon in a DIV . Here, where it gets complicated. No matter which icon the user clicks, the content must be loaded into the same DIV . However, only the content for one icon should be visible at a time. Therefore, if the content for "A" is loaded and the user presses "B", the content for "A" should disappear and be replaced with "B", the fade, the same with "C", "D", ", etc. . (probably up to a maximum of 5.) The content can vary greatly in size, so the content DIV for the content must animate its height in order to adapt to the current content.

Where I am stuck is an animation. I figured out how to hide and show other content, basically by setting display: none; "and display: block; to different sections of the content based on where the user clicks, but I can't figure out how to get any animation.

I am open to using a pre-created script, but I remember that the icons and the content area are in separate shells, so the regular jQuery script or accordion script tab will not work.

Here is my hunch:

 $(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; } 

If necessary, everything can be changed, but not the fact that they are in separate shells.

Thanks.

Answer 1

Take a look at jsFiddle ; something like this what do you want 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 can also replace fadeOut () and fadeIn () with slideUp () and slideDown () respectively to achieve different animation effects.

Hope this helps!

Answer 2

add overflow:hidden , otherwise the div will have a new width and height for the content before you can make the animation.

Answer 3

Here you will find: http://jsfiddle.net/huckepick/XtuX2/

This is still not very. But it is simple, easy to understand and easy to expand.

UPDATE: Added support for animated resizing

 $('#menu button').click(function() { var identifier = $(this).attr("data-content-reference"); var newContent = $("#content-" + identifier).html(); $('#display').fadeOut('slow', function() { $("#display").html(newContent); $('#display').animate({ opacity: 1, height: 'toggle' }, 300, function() { // Animation complete. }); }); }); 

 .hidden-content { display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="menu"> <button data-content-reference="a">A</button> <button data-content-reference="b">B</button> <button data-content-reference="c">C</button> <button data-content-reference="d">D</button> <button data-content-reference="e">E</button> <button data-content-reference="f">F</button> </div> <div id="display"> content goes here! </div> <div class="hidden-content" id="content-a">some content from A</div> <div class="hidden-content" id="content-b">some content from B <br/>new line</div> <div class="hidden-content" id="content-c">some content from C <br/>new line <br/>new line</div> <div class="hidden-content" id="content-d">some content from D <br/>new line <br/>new line <br/>another one</div> <div class="hidden-content" id="content-e">some content from E</div> <div class="hidden-content" id="content-f">some content from F</div> 

Answer 4

Sorry if I misunderstood ( jsfiddle , as adeneo mentioned above, would be very helpful), but it looks like you just need to call fadeOut() with fadeIn() as a line callback:

 // try it out on http://jsfiddle.net/XyUps/1/ $(document).ready(function() { $("button").click(function() { $(".active").fadeOut(1000, function() { $(this).siblings("div").addClass("active").fadeIn(); $(this).removeClass("active"); }); }); }); 

Here, the second argument to fadeOut() is the callback, the function that executes when the animation finishes: this is a good way to make animations sequential in jQuery (just their subsequent lines will start them at the same time, which is probably not what you want).

Once you have mastered the basic principle, you can animate more / different properties in the same way using the animate() function ( fadeOut is short for animate({display: 'none'}) , etc.).