CSS3 vs. JavaScript - css

Question

So I'm trying to create an animation on a webpage and am trying to figure out a way to do it using CSS3, but am quite confused as to how I can do it.
What I need to have happen is when users click on a link element I want a div to expand and be populated with content specific to the link element clicked. For example, when a user clicks on a link titled "About", a div below the link element will expand and have some content appear. THEN, when they click another link, say "Contact", the content specific to "About" will disappear and content specific to "Contact" will appear as the div re-sizes to fit the new content.
I think I can do this pretty easily with Javascript, but can someone tell me if it might be easier to do/possible with CSS3?
Thanks all.

Answer 1

As already mentioned, JavaScript is your best friend for this. But since you asked if it would be possible with CSS3 I had to give it a try. Basically what I’ve done is I’ve used the target selector to trigger the animation. So when you click a link, a div expands with some content and if you click another link a new div, with some new content (positioned in the same place) expands, creating the illusion that it’s the same div expanding.
It’s not an optimal solution and I made this example really quick so it’s not working exactly as you wanted, but it gives you at least a picture on how it could be done with just CSS.
Hope that helps!
Here's a demo and here's the code from my example:
HTML
Box<br />Box two
<div id="box">Hello</div>
<div id="boxtwo">Hello again,</div>
CSS
#box, #boxtwo{
position: absolute;
top: 50px;
left: 50px;
width: 0px;
height: 0px;
background-color: #e3e3e3;
color: transparent;
}
#box:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#boxtwo:target {
-webkit-animation: expand 1.0s ease-in forwards;
}
#-webkit-keyframes expand {
0% {width: 0px; height: 0px; color: transaprent;}
50% {width: 100px; height: 100px; color: transparent;}
100% {width: 100px; height: 100px; color: #000000;}
}

Answer 2

The simplest way for a click to trigger an animation is to add a CSS class to an object upon the click and have an CSS3 transition or animation configured for any object with that class.
Your second class to hide the item can then remove that class name from the same object.
All the details of the animation/transition would be specified in CSS3 style rules. Only the add/remove of the class name would be done with javascript.
CSS3 all by itself can trigger animations/transitions with the :hover pseudo selector, but isn't a lot more capable than that and can't trigger an animation based on a click.

Answer 3

I don't think this is a CSS3 vs. JavaScript question. Even if you use CSS3 for the animations, you're likely to need JavaScript to trigger the animations based on a click event.
Based on what you need to do, I see a couple of main options:
As #jfriend00 said, add or remove CSS classes which perform the animation.
Use jQuery's show, hide, fadeIn, fadeOut, and animate APIs.

Answer 4

What you need is some juery to spice up whatever you are developing... If am not wrong you want some thing like this: CSS3 vs Jquery
Get the jquery library and reference it in your page.
here is a snippet to jump start you.
<a id="home" href="home.html">Home</a>
<a id="about" href="about.html">About</a>
<div id="home_div"></div>
<div id="about_div"></div>
<script type="text/javascript">
$('#home').click(function () {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().show('slow');
$('#about_div').animate().fadeOut('slow');
return false;
});
$('#about').click(function () {
$('html').animate({ scrollTop: 500 }, 1000);
$('#home_div').animate().fadeOut('slow');
$('#about_div').animate().show('slow');
return false;
});
</script>
You can change the effects to other available ones.