shoorick/accordion-vertical-css3-transition.html

## accordion-vertical-css3-transition.html
<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 Transition - Accordion sample</title>
        <!-- 2012-01-10 - Alexander Sapozhnikov - http://shoorick.ru/ -->
        <style>
            body {
                font-family: "Liberation Sans",sans-serif;
                color: #000;
                background-color: #fff;
            }

            h2 {
                margin: 0;
                padding: 0;
                font-size: 111%;
            }

            div {
                background-color: #def;
                -moz-transition: background-color 1s;
                -ms-transition: background-color 1s;
                -o-transition: background-color 1s;
                -webkit-transition: background-color 1s;
                transition: background-color 1s;
                margin: 0;
                padding: 1em;
                border-top: 1px solid white;
            }

            div:target {
                background-color: #ff0;
            }

            div p {
                height: 0;
                margin: 0;
                color: #678;
                overflow: hidden;
                -moz-transition: height 1s, color 1s;
                -ms-transition: height 1s, color 1s;
                -o-transition: height 1s, color 1s;
                -webkit-transition: height 1s, color 1s;
                transition: height 1s, color 1s;

            }

            div:target p {
                height: 100px;
                color: maroon;
            }

        </style>
    </head>
    <body>
        <h1>CSS3 Transition - Accordion sample</h1>

        <div id="ave">
            <h2><a href="#ave">Ave verum</a></h2>
            <p>Ave verum corpus, natum de Maria Virgine, vere passum, immolatum in cruce pro homine,
            cuius latus perforatum unda fluxit et sanguine: esto nobis praegustatum in mortis examine.</p>
        </div>

        <div id="gaudeamus">
            <h2><a href="#gaudeamus">Gaudeamus</a></h2>
            <p>Gaudeamus igitur, Juvenes dum sumus!
            Post jucundam juventutem, Post molestam senectutem, Nos habebit humus!</p>
        </div>

        <div id="odi">
            <h2><a href="#odi">Odi et amo</a></h2>
            <p>Quare id faciam, fortasse requiris. Nescio, sed fieri sentio et excrucior.</p>
        </div>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS3 Transition - Accordion sample</title>
	<!-- 2012-01-10 - Alexander Sapozhnikov - http://shoorick.ru/ -->
	<style>
	body {
	font-family: "Liberation Sans",sans-serif;
	color: #000;
	background-color: #fff;
	}

	h2 {
	margin: 0;
	padding: 0;
	font-size: 111%;
	}

	div {
	background-color: #def;
	-moz-transition: background-color 1s;
	-ms-transition: background-color 1s;
	-o-transition: background-color 1s;
	-webkit-transition: background-color 1s;
	transition: background-color 1s;
	margin: 0;
	padding: 1em;
	border-top: 1px solid white;
	}

	div:target {
	background-color: #ff0;
	}

	div p {
	height: 0;
	margin: 0;
	color: #678;
	overflow: hidden;
	-moz-transition: height 1s, color 1s;
	-ms-transition: height 1s, color 1s;
	-o-transition: height 1s, color 1s;
	-webkit-transition: height 1s, color 1s;
	transition: height 1s, color 1s;

	}

	div:target p {
	height: 100px;
	color: maroon;
	}

	</style>
	</head>
	<body>
	<h1>CSS3 Transition - Accordion sample</h1>

	<div id="ave">
	<h2><a href="#ave">Ave verum</a></h2>
	<p>Ave verum corpus, natum de Maria Virgine, vere passum, immolatum in cruce pro homine,
	cuius latus perforatum unda fluxit et sanguine: esto nobis praegustatum in mortis examine.</p>
	</div>

	<div id="gaudeamus">
	<h2><a href="#gaudeamus">Gaudeamus</a></h2>
	<p>Gaudeamus igitur, Juvenes dum sumus!
	Post jucundam juventutem, Post molestam senectutem, Nos habebit humus!</p>
	</div>

	<div id="odi">
	<h2><a href="#odi">Odi et amo</a></h2>
	<p>Quare id faciam, fortasse requiris. Nescio, sed fieri sentio et excrucior.</p>
	</div>
	</body>
	</html>