Hide a div following css animation on button click

Subah

New Member
As the current time, I have CSS3 Animations being triggered on button click, and all works well. Its an animation to represent the plant life cycle, working in 5 stages, each stage shows an image and corresponding text.However, if i click stage 1, then stage 2, and want to click stage 1 again to view the supporting text again, whilst hiding the image from stage two, I cannot seem to be able to do it.JSFiddle for your convinience: http://jsfiddle.net/YUC3d/Live View of current stage:http://www.mattmeadows.info/MFTW2/howplantsgrow.htmlJavascript:\[code\]$(function() { $("#stage1").click(function() { $("#Seed1,#infoBox1").toggleClass("animate") }); $("#stage2").click(function() { $("#Seed2,#infoBox2").toggleClass("animate") }); $("#stage3").click(function() { $("#Seed3,#infoBox3").toggleClass("animate") }); $("#stage4").click(function() { $("#Seed4,#infoBox4").toggleClass("animate") }); $("#stage5").click(function() { $("#Seed5,#infoBox5").toggleClass("animate") });}); \[/code\]HTML Segment being animated:\[code\]<div id="Seed1" class="target"></div> <!-- end of Seed1 --><div id="infoBox1">Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1 Text for stage 1 </div>\[/code\](There are 5 of these div combinations in totalCSS:\[code\]@-webkit-keyframes show{ 0% { opacity: 0; } 100% { opacity: 1; }}#Seed1{opacity:0;}#Seed1.animate{-webkit-animation-name: show;-webkit-animation-duration: 2s;-webkit-animation-timing-function: ease;-webkit-animation-iteration-count: 1; -webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;}#infoBox1{width: 400px;height: 100px;background:white;position: absolute;bottom: 425px;margin-left: 25px;border-radius: 10px;opacity:0;}#infoBox1.animate{-webkit-animation-name: show;-webkit-animation-duration: 2s;-webkit-animation-timing-function: ease;-webkit-animation-iteration-count: 1; -webkit-animation-direction: normal;-webkit-animation-delay: 0;-webkit-animation-play-state: running;-webkit-animation-fill-mode: forwards;}\[/code\]
 
Top