shoorick/accordion-horizontal-css3-transition.html

## accordion-horizontal-css3-transition.html
<!DOCTYPE html>
<html>
    <head>
        <title>CSS3 Transition - Accordion sample</title>
        <!-- 2012-01-12 - 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: 100%;
            }

            h2 a {
                color: #030;
                background-color: #cec;
                display: block;
                text-align: center;
                width: 120px;
                height: 20px;
                position: absolute;
                text-decoration: none;
                -webkit-transform: translate(-50px,50px) rotate(-90deg);
                   -moz-transform: translate(-50px,50px) rotate(-90deg);
                    -ms-transform: translate(-50px,50px) rotate(-90deg);
                     -o-transform: translate(-50px,50px) rotate(-90deg);
                        transform: translate(-50px,50px) rotate(-90deg);
            }

            div:target h2 a {
                color: #efd;
                background-color: #090;
            }

            h2 a:hover {
                color: #fff;
                background-color: #060;
            }

            div {
                background-color: #dfd;
                -webkit-transition: background-color 1s, width 1s;
                   -moz-transition: background-color 1s, width 1s;
                    -ms-transition: background-color 1s, width 1s;
                     -o-transition: background-color 1s, width 1s;
                        transition: background-color 1s, width 1s;
                margin: 0;
                padding: 0;
                border-top: 1px solid white;
                width: 20px;
                height: 120px;
                overflow: hidden;
                float: left;
            }

            div:target {
                background-color: #9f3;
                width: 400px;
            }

            div p {
                margin: 0;
                width: 360px;
                color: #678;
                -webkit-transition: color 1s;
                   -moz-transition: color 1s;
                    -ms-transition: color 1s;
                     -o-transition: color 1s;
                        transition: color 1s;
                padding: 10px 5px 10px 30px;

            }

            div:target p {
                color: #353;
            }

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

        <section>
        <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>
        </section>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>CSS3 Transition - Accordion sample</title>
	<!-- 2012-01-12 - 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: 100%;
	}

	h2 a {
	color: #030;
	background-color: #cec;
	display: block;
	text-align: center;
	width: 120px;
	height: 20px;
	position: absolute;
	text-decoration: none;
	-webkit-transform: translate(-50px,50px) rotate(-90deg);
	-moz-transform: translate(-50px,50px) rotate(-90deg);
	-ms-transform: translate(-50px,50px) rotate(-90deg);
	-o-transform: translate(-50px,50px) rotate(-90deg);
	transform: translate(-50px,50px) rotate(-90deg);
	}

	div:target h2 a {
	color: #efd;
	background-color: #090;
	}

	h2 a:hover {
	color: #fff;
	background-color: #060;
	}

	div {
	background-color: #dfd;
	-webkit-transition: background-color 1s, width 1s;
	-moz-transition: background-color 1s, width 1s;
	-ms-transition: background-color 1s, width 1s;
	-o-transition: background-color 1s, width 1s;
	transition: background-color 1s, width 1s;
	margin: 0;
	padding: 0;
	border-top: 1px solid white;
	width: 20px;
	height: 120px;
	overflow: hidden;
	float: left;
	}

	div:target {
	background-color: #9f3;
	width: 400px;
	}

	div p {
	margin: 0;
	width: 360px;
	color: #678;
	-webkit-transition: color 1s;
	-moz-transition: color 1s;
	-ms-transition: color 1s;
	-o-transition: color 1s;
	transition: color 1s;
	padding: 10px 5px 10px 30px;

	}

	div:target p {
	color: #353;
	}

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

	<section>
	<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>
	</section>
	</body>
	</html>