Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Tabs & Accordion >> Animated CSS3 Horizontal Accordion


Code Snippet </> Info


Snippet Name: Animated CSS3 Horizontal Accordion

Description: Add an Animated CSS3 Horizontal Accordion to your web page.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note: Change the tab content to your needs.

Author: Martin Ivanov

Last Modified: 2015-08-26 22:52:15

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<!DOCTYPE html> <!--[if lt IE 7]><html lang="en-us" class="ie6"><![endif]--> <!--[if IE 7]><html lang="en-us" class="ie7"><![endif]--> <!--[if IE 8]><html lang="en-us" class="ie8"><![endif]--> <!--[if gt IE 8]><!--><html lang="en-us"><!--<![endif]--> <head> <meta charset="utf-8" /> <title>Animated CSS3 Horizontal Accordion</title> <style> /* Begin Animated CSS3 Horizontal Accordion */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Martin Ivanov : http://wemakesites.net : Creative Commons License == */ .acidjs-horizontal-accordion, .acidjs-horizontal-accordion > form > ul > li > div, .acidjs-horizontal-accordion > form > ul > li > label { overflow: hidden; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .acidjs-horizontal-accordion > form > ul, .acidjs-horizontal-accordion > form > ul > * { margin: 0; padding: 0; list-style: none; } .acidjs-horizontal-accordion > form > ul, .acidjs-horizontal-accordion > form > ul > li > div { height: 159px; /* height of the accordion */ } .acidjs-horizontal-accordion, .acidjs-horizontal-accordion > form > ul > li > input:checked + label { background: #2f343a; } .acidjs-horizontal-accordion > form > ul > li > input, .acidjs-horizontal-accordion > form > ul > li > label { position: absolute; } .acidjs-horizontal-accordion > form > ul > li, .acidjs-horizontal-accordion > form > ul > li:last-child { border: solid 1px rgba(255,255, 255, .75); } .acidjs-horizontal-accordion { font-family: Arial, Helvetica, Sans-serif; padding: 1px; cursor: default; } .acidjs-horizontal-accordion > form > ul > li > label { display: block; width: 159px; /* height of the accordion button */ padding: 0 8px; letter-spacing: 1px; font: bold 14px/32px "Arial Rounded MT", Arial, Helvetica, Sans-serif; background: #e74c3c; color: #fff; text-align: right; cursor: pointer; text-shadow: 0 -1px 0 rgba(0, 0, 0, .5); text-overflow: ellipsis; white-space: nowrap; -webkit-transition: all .3s cubic-bezier(.09, .11, .24, .91); -moz-transition: all .3s cubic-bezier(.09, .11, .24, .91); -ms-transition: all .3s cubic-bezier(.09, .11, .24, .91); -o-transition: all .3s cubic-bezier(.09, .11, .24, .91); transition: all .3s cubic-bezier(.09, .11, .24, .91); -webkit-transform: translateX(-100%) rotate(-90deg); -moz-transform: translateX(-100%) rotate(-90deg); -ms-transform: translateX(-100%) rotate(-90deg); -o-transform: translateX(-100%) rotate(-90deg); transform: translateX(-100%) rotate(-90deg); -webkit-transform-origin: right top; -moz-transform-origin: right top; -ms-transform-origin: right top; -o-transform-origin: right top; transform-origin: right top; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .acidjs-horizontal-accordion > form > ul > li > input:not(:checked) + label:hover { background: #e02f1c; } .acidjs-horizontal-accordion > form > ul > li > input:checked + label { border-bottom-color: transparent; color: rgba(255, 255, 255, .5); } .acidjs-horizontal-accordion > form > ul > li { float: left; padding: 0 32px 0 0; border-right: 0; } .acidjs-horizontal-accordion > form > ul > li > input { opacity: 0; /* we hide the radio button with opacity and position: absolute in order to preserve the keyboard arrow navigation */ } .acidjs-horizontal-accordion > form > ul > li > div { width: 0; font-size: 10px; color: #fff; margin: 0 -32px 0 32px; -webkit-transition: width .3s cubic-bezier(.09, .11, .24, .91); -moz-transition: width .3s cubic-bezier(.09, .11, .24, .91); -ms-transition: width .3s cubic-bezier(.09, .11, .24, .91); -o-transition: width .3s cubic-bezier(.09, .11, .24, .91); transition: width .3s cubic-bezier(.09, .11, .24, .91); } .acidjs-horizontal-accordion > form > ul > li > input:checked ~ div { width: 220px; padding: 8px; overflow: auto; } </style> </head> <body> <div style="text-align:center;font-family:verdana,arial;"><h1>Animated CSS3 Horizontal Accordion</h1></div> <div class="html-chunk"> <div class="acidjs-horizontal-accordion"> <form> <ul> <li> <input type="radio" name="group-01" id="group-01-01" /> <label for="group-01-01">About Us</label> <div> <h3>About Us</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </li> <li> <input type="radio" name="group-01" id="group-01-02" checked="checked" /> <label for="group-01-02">Our Mission</label> <div> <h3>Our Mission</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </li> <li> <input type="radio" name="group-01" id="group-01-03" /> <label for="group-01-03">Customers</label> <div> <h3>Customers</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </li> <li> <input type="radio" name="group-01" id="group-01-04" /> <label for="group-01-04">Contact Us</label> <div> <h3>Contact Us</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </li> <li> <input type="radio" name="group-01" id="group-01-05" /> <label for="group-01-05">Achievements</label> <div> <h3>Achievements</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </li> <li> <input type="radio" name="group-01" id="group-01-06" /> <label for="group-01-06">Portfolio</label> <div> <h3>Portfolio</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </li> </ul> </form> </div> </div> <br /><br /> <div class="notes">Click the tabs above to preview the effect.</div> <br /><br /> <div class="notes"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_255.html">Animated CSS3 Horizontal Accordion Code Snippet</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library