CSS; Vertical & Horizontal Accordion

Vertical Version

CODE

<div class="verticalaccordion"> <ul> <li> <h3>Header</h3> <div> TEXT </div> </li> <li> <h3>Header</h3><div> TEXT </div></li> </ul> </div>



CSS

.verticalaccordion>ul { margin: 0; padding: 0; list-style:none; width: 100%; } .verticalaccordion>ul>li { display:block; overflow: hidden; margin: 0; padding: 0; list-style:none; height:40px; width: 100%; background-color:#332e3c; transition: height 1s ease-in-out; -moz-transition: height 1s ease-in-out; -webkit-transition: height 1s ease-in-out; -o-transition: height 1s ease-in-out; } .verticalaccordion>ul>li>h3 { display:block; margin: 0; padding:10px; height:19px; font-family: Arial, Helvetica, sans-serif; text-decoration:none; font-weight: bold; color: #62697d; background: #2e2936; font-size: 11px; } .verticalaccordion>ul>li>div { margin:0; overflow: auto; padding:10px; height:220px; } .verticalaccordion>ul>li:hover { height: 200px; } .verticalaccordion:hover>ul>li:hover>h3 { color:#577082; } .verticalaccordion>ul>li>h3:hover { cursor:pointer; }





Horizontal Version

CODE

<div class="horizontalaccordion"><ul><li><h3>Header</h3><div> TEXT </div> </li> <li><h3>Header</h3><div> TEXT </div></li></ul></div>



CSS

.horizontalaccordion>ul {margin: 0; padding: 0; list-style:none; height: 300px;} .horizontalaccordion>ul>li {display:block; overflow: hidden; float:left; margin: 0; padding: 0;list-style:none; width:40px;height: 300px; background:#f0f0f0;transition: width 0.3s ease-in-out;-moz-transition: width 0.3s ease-in-out;-webkit-transition: width 0.3s ease-in-out;-o-transition: width 0.3s ease-in-out;}.horizontalaccordion>ul>li>h3 {display:block; float:left; margin: 0; padding:10px; height:19px; width:280px; border-left:#f0f0f0 1px solid; font-family: Arial, Helvetica, sans-serif; text-decoration:none; text-transform:uppercase; color: #000; background:#cccccc; white-space:nowrap; -moz-transform: rotate(90.0deg) translate(-40px,0px);-moz-transform-origin: 0 100%;-o-transform: rotate(90.0deg) translate(-40px,0px); -o-transform-origin: 0 100%; -webkit-transform: rotate(90.0deg) translate(-40px,0px);-webkit-transform-origin: 0 100%; transform: rotate(90.0deg) translate(-40px,0px);transform-origin: 0 100%; filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0); -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)";} .horizontalaccordion>ul>li>div {display:none;float:left; overflow: auto; position:relative; top:-40px; left:40px; *top:0px; *left:0px;margin:0; width:320px; height:280px; padding:10px;}.horizontalaccordion>ul>li:hover {overflow: hidden;width: 380px;}.horizontalaccordion:hover>ul>li:hover>div {display:block;}.horizontalaccordion:hover>ul>li:hover>h3 {color:#fff;background:#000000;}




Flatsoda's picture

track dis

track dis

^

^
mkeene123's picture

This deserves a bump and a

This deserves a bump and a track
“I like the night. Without the dark, we'd never see the stars.”


-Stephenie Meyer, Twilight
MageOfMind's picture

track for future *_*

track for future *_*
edj's picture

interesting.

interesting.
myf's picture

tracking :3

tracking :3
 photo fawn_zps0f453f4e.png
myf's picture

tracking :3

tracking :3
 photo fawn_zps0f453f4e.png
myf's picture

Crap. 0_0 sorry guys.

Crap. 0_0 sorry guys.
 photo fawn_zps0f453f4e.png