Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS3 onclick activate another DIV's animation

Tags:

css

click

I've got a menu bar that links to anchors on my page. At the moment there's content within the page which is animated to fade in using CSS3 on the initial page load but I'd like instead for them to fade in after the certain anchor link in the menu bar is clicked. How do I do that?

Eg. About is pressed then .aboutinfo CSS animation is activated.

like image 975
EdzJohnson Avatar asked Dec 04 '22 11:12

EdzJohnson


1 Answers

Here is a demo to have an onclick even with CSS only (no javascript) http://jsfiddle.net/kevinPHPkevin/K8Hax/

CSS

#box1 {
    display:none;
}
#box1:target {
    display:block;
}

HTML

<a href="#box1">Click Me</a>
<div id="box1">test test</div>
like image 150
Kevin Lynch Avatar answered Jan 11 '23 04:01

Kevin Lynch