<html><head> <title>CSS Accordion Slider: A tool for generating accordion sliders</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta property="fb:app_id" content="1572955209632845"> <meta property="fb:admins" content="1011855517"> <meta property="og:url" content="http://accordionslider.com/"> <meta property="og:type" content="website"> <meta property="og:title" content="CSS Accordion Slider"> <meta property="og:description" content="Make pure css horizontal and vertical accordion sliders in seconds."> <meta name="description" content="Make pure css horizontal and vertical accordion sliders in seconds."> <script async="" src="//www.google-analytics.com/analytics.js"></script><script async="" src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=7e13c32551/cloudflare.min.js"></script><script type="text/javascript">
//<![CDATA[
try{if (!window.CloudFlare) {var CloudFlare=[{verbose:0,p:0,byc:0,owlid:"cf",bag2:1,mirage2:0,oracle:0,paths:{cloudflare:"/cdn-cgi/nexp/dok3v=1613a3a185/"},atok:"f7cd7a668dc9b953dc4220f91fe14ae5",petok:"8c556492d525c13d47f02239d4a39cf5328991a9-1432389786-1800",zone:"accordionslider.com",rocket:"0",apps:{}}];CloudFlare.push({"apps":{"ape":"848684c8a1b5ca3d49ebe704361b2403"}});!function(a,b){a=document.createElement("script"),b=document.getElementsByTagName("script")[0],a.async=!0,a.src="//ajax.cloudflare.com/cdn-cgi/nexp/dok3v=7e13c32551/cloudflare.min.js",b.parentNode.insertBefore(a,b)}()}}catch(e){};
//]]>
</script>
<link rel="canonical" href="http://accordionslider.com/"> <link rel="shortcut icon" href="favicon.ico?v=1430977809631" type="image/x-icon"> <link type="text/css" rel="stylesheet" href="http://accordionslider.com/css/min.css?v=1430977809631"> <style id="style-container">.accordion {
 -webkit-box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
 -moz-box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
 box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
 font-family: Arial, Helvetica, sans-serif;
 border-color: #505050;
 border-style: solid;
 border-width: 0px;
 border-radius: 8px;
 margin: 0 auto;
 height: 290px;
 width: 864px;
}

.accordion > ul > li,
.accordion-title,
.accordion-content,
.accordion-separator {
 float: left;
}</style> <style id="style-content">.accordion-content {
 background-color: #3e3e3e;
 color: #f5f2f0;
 height: 234px;
 width: 644px;
 padding: 28px;
}

.accordion-title,
.accordion-select:checked ~ .accordion-content {
 margin-right: 1px;
 margin-bottom: 1px;
}</style> <style id="style-title">.accordion-title,
.accordion-select {
 background-color: #2d2d2d;
 color: #ffffff;
 width: 40px;
 height: 290px;
 font-size: 15px;
}

.accordion-title span {
 margin-bottom: 20px; 
 margin-left: 20px;
}</style> <style id="style-title-hover">.accordion-select:hover ~ .accordion-title,
.accordion-select:checked ~ .accordion-title {
 background-color: #3068cc;
}</style> <style id="style-item">.accordion > ul > li {
 background-color: #1f1f1f;
 margin-right: -700px;
 margin-bottom: -0px;
}

.accordion-select:checked ~ .accordion-separator {
 margin-right: 700px;
 margin-bottom: 0px;
}</style> <style id="style-rotation">.accordion-title span { 
 transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -ms-writing-mode: lr-bt;
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 margin-left: 0px;
 line-height: 40px;
}</style> <style id="style-core">/* Do not change following properties, they aren't 
generated automatically and are common for each slider. */
.accordion {
 overflow: hidden;
}

.accordion > ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 101%;
}

.accordion > ul > li,
.accordion-title {
    position: relative;
}

.accordion-select {
    cursor: pointer;
    position: absolute;
    opacity: 0;
    top: 0;
    left: 0;
    margin: 0;
    z-index: 1;
}

.accordion-title span {
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    white-space: nowrap;
}

.accordion-content {
    position: relative;
    overflow: auto;
}

.accordion-separator {
 transition: margin 0.3s ease 0.1s;
 -o-transition: margin 0.3s ease 0.1s;
 -moz-transition: margin 0.3s ease 0.1s;
 -webkit-transition: margin 0.3s ease 0.1s;
}</style> <script type="text/javascript">!function(e,a,t,n,c,o,s){e.GoogleAnalyticsObject=c,e[c]=e[c]||function(){(e[c].q=e[c].q||[]).push(arguments)},e[c].l=1*new Date,o=a.createElement(t),s=a.getElementsByTagName(t)[0],o.async=1,o.src=n,s.parentNode.insertBefore(o,s)}(window,document,"script","//www.google-analytics.com/analytics.js","ga"),ga("create","UA-61900787-1","auto"),ga("send","pageview");</script><style type="text/css"></style><style type="text/css">.cf-hidden { display: none; } .cf-invisible { visibility: hidden; }</style><script async="" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script></head><body> <div class="section header"> <h1 class="logo">CSS Accordion Slider</h1> <div class="social-container"> <div class="social-buttons" style="display:none"> <a id="fb-share-button" href="https://www.facebook.com/sharer/sharer.php?u=http://accordionslider.com/">Share on Facebook</a> <a id="tweet-button" href="https://twitter.com/intent/tweet?original_referer=http://accordionslider.com/&amp;source=tweetbutton&amp;text=Make%20pure%20css%20horizontal%20and%20vertical%20accordion%20sliders%20in%20seconds&amp;url=http://accordionslider.com/">Tweet</a> </div> </div> </div> <div class="section" id="editor"> <div class="editor-header"> <h2 id="horizontal-button" class="selected">Horizontal accordion slider</h2> <h2 id="vertical-button" style="display:none">Vertical accordion slider</h2> <input id="class-name-input" spellcheck="false" placeholder="class name"> <div class="colors"> <div id="title-bg-color" class="color" title="Title background" style="background-color: rgb(45, 45, 45);"> <div id="colorpicker"><div class="picker-title"></div><input type="text" class="picker-input" spellcheck="false"><div class="picker-arrow"></div><div class="picker-wrapper"><div class="picker"></div><div class="picker-indicator" style="pointer-events: none;"></div></div><div class="slide-wrapper"><div class="slide"></div><div class="slide-indicator" style="pointer-events: none;"></div></div></div> </div> <div id="title-bg-hover-color" class="color" title="Title hover/selected" style="background-color: rgb(48, 104, 204);"></div> <div id="title-font-color" class="color" title="Title text color" style="background-color: rgb(255, 255, 255);"></div> <div id="gap-color" class="color" title="Gap color" style="background-color: rgb(31, 31, 31);"></div> <div id="content-bg-color" class="color" title="Content background" style="background-color: rgb(62, 62, 62);"></div> <div id="content-font-color" class="color" title="Content text color" style="background-color: rgb(245, 242, 240);"></div> <div id="border-color" class="color" title="Border color" style="background-color: rgb(80, 80, 80);"></div> </div> </div> <div class="editor-item"> <div class="editor-item-title"> Number of decks: 4 </div> <input type="range" id="count-range" min="3" max="12"> <div class="editor-item-title"> Gap size: 1px </div> <input type="range" id="gap-size-range" min="0" max="5"> </div> <div class="editor-item"> <div> <div class="editor-item-title"> Title width: 40px </div> <input type="range" id="title-width-range" min="30" max="100" step="5"> </div> <div style="display:none"> <div class="editor-item-title"> Title height: px </div> <input type="range" id="title-height-range" min="30" max="100" step="5"> </div> <div class="editor-item-title"> Title font size: 15px </div> <input type="range" id="title-fontSize-range" min="10" max="50"> </div> <div class="editor-item"> <div class="editor-item-title"> Content width: 700px </div> <input type="range" id="width-range" min="40" max="1200" step="10"> <div class="editor-item-title"> Content height: 290px </div> <input type="range" id="height-range" min="40" max="500" step="10"> </div> <div class="editor-item"> <div class="editor-item-title"> Border radius: 8px </div> <input type="range" id="borderRadius-range" min="0" max="50"> <div class="editor-item-title"> Border size: 0px </div> <input type="range" id="borderSize-range" min="0" max="100"> </div> <div class="editor-item" id="themes"><div class="theme" id="theme0"></div><div class="theme" id="theme1"></div><div class="theme" id="theme2"></div><div class="theme" id="theme3"></div><div class="theme" id="theme4"></div><div class="theme" id="theme5"></div><div class="theme" id="theme6"></div><div class="theme" id="theme7"></div><div class="theme" id="theme8"></div><div class="theme" id="theme9"></div><div class="theme" id="theme10"></div><div class="theme" id="theme11"></div><div class="theme" id="theme12"></div><div class="theme" id="theme13"></div><div class="theme" id="theme14"></div></div> </div> <div class="accordion"> <ul> <li> <input type="radio" name="select" class="accordion-select" checked="checked"> <h3 class="accordion-title"> How it works? </h3> <div class="accordion-content"> <ul class="content" style="margin-bottom:15px"> <li>Play the css settings above, change colors, deck count, slider dimensions etc.</li> <li>When you are happy with the final result, click "Get Html Code" and copy generated code.</li> <li>The generated accordion slider is pure CSS and HTML and there is no JavaScript.</li> <li>The slider can be used as a gallery, product tour, portfolio showcase, content slider etc.</li> <li>This is a free tool and all the code you generate can be used without any license issues.</li> <li>Supports Chrome 4+, Safari 4+, Opera 10.5+, Firefox 4+ and IE9+.</li> <li>Feel free to drop a comment if you have any more questions.</li> </ul> </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select"> <h3 class="accordion-title"> Tips </h3> <div class="accordion-content"> <ul class="content"> <li>Add a "class name" for each accordion to support pages that have multiple different accordions.</li> <li>You can also make an accordion menu. Just include a menu structure in content section.</li> <li>Don't restrict yourself with flat colors. Use css shadows or gradients to make the accordion more attractive.</li> </ul> </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select"> <h3 class="accordion-title"> Get CSS Code </h3> <pre class="accordion-content code language-css"> <button id="select-css">Select All</button>
<code id="css-code" class=" language-css">.accordion {
 -webkit-box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
 -moz-box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
 box-shadow: 0px 75px 35px -55px rgba(10, 30, 65, 0.6);
 font-family: Arial, Helvetica, sans-serif;
 border-color: #505050;
 border-style: solid;
 border-width: 0px;
 border-radius: 8px;
 margin: 0 auto;
 height: 290px;
 width: 864px;
}

.accordion &gt; ul &gt; li,
.accordion-title,
.accordion-content,
.accordion-separator {
 float: left;
}

.accordion &gt; ul &gt; li {
 background-color: #1f1f1f;
 margin-right: -700px;
 margin-bottom: -0px;
}

.accordion-select:checked ~ .accordion-separator {
 margin-right: 700px;
 margin-bottom: 0px;
}

.accordion-title,
.accordion-select {
 background-color: #2d2d2d;
 color: #ffffff;
 width: 40px;
 height: 290px;
 font-size: 15px;
}

.accordion-title span {
 margin-bottom: 20px; 
 margin-left: 20px;
}

.accordion-select:hover ~ .accordion-title,
.accordion-select:checked ~ .accordion-title {
 background-color: #3068cc;
}

.accordion-title span { 
 transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -ms-writing-mode: lr-bt;
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 margin-left: 0px;
 line-height: 40px;
}

.accordion-content {
 background-color: #3e3e3e;
 color: #f5f2f0;
 height: 234px;
 width: 644px;
 padding: 28px;
}

.accordion-title,
.accordion-select:checked ~ .accordion-content {
 margin-right: 1px;
 margin-bottom: 1px;
}

/* Do not change following properties, they aren't 
generated automatically and are common for each slider. */
.accordion {
 overflow: hidden;
}

.accordion &gt; ul {
 margin: 0;
 padding: 0;
 list-style: none;
 width: 101%;
}

.accordion &gt; ul &gt; li,
.accordion-title {
 position: relative;
}

.accordion-select {
 cursor: pointer;
 position: absolute;
 opacity: 0;
 top: 0;
 left: 0;
 margin: 0;
 z-index: 1;
}

.accordion-title span {
 display: block;
 position: absolute;
 bottom: 0px;
 width: 100%;
 white-space: nowrap;
}

.accordion-content {
 position: relative;
 overflow: auto;
}

.accordion-separator {
 transition: margin 0.3s ease 0.1s;
 -o-transition: margin 0.3s ease 0.1s;
 -moz-transition: margin 0.3s ease 0.1s;
 -webkit-transition: margin 0.3s ease 0.1s;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="accordion"&gt;
 &lt;ul&gt;
 &lt;li&gt;
 &lt;input type="radio" name="select" class="accordion-select" checked /&gt;
 &lt;div class="accordion-title"&gt;
 &lt;span&gt;Title&lt;/span&gt;
 &lt;/div&gt;
 &lt;div class="accordion-content"&gt;
 Content
 &lt;/div&gt;
 &lt;div class="accordion-separator"&gt;&lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;input type="radio" name="select" class="accordion-select" /&gt;
 &lt;div class="accordion-title"&gt;
 &lt;span&gt;Title&lt;/span&gt;
 &lt;/div&gt;
 &lt;div class="accordion-content"&gt;
 Content
 &lt;/div&gt;
 &lt;div class="accordion-separator"&gt;&lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;input type="radio" name="select" class="accordion-select" /&gt;
 &lt;div class="accordion-title"&gt;
 &lt;span&gt;Title&lt;/span&gt;
 &lt;/div&gt;
 &lt;div class="accordion-content"&gt;
 Content
 &lt;/div&gt;
 &lt;div class="accordion-separator"&gt;&lt;/div&gt;
 &lt;/li&gt;
 &lt;li&gt;
 &lt;input type="radio" name="select" class="accordion-select" /&gt;
 &lt;div class="accordion-title"&gt;
 &lt;span&gt;Title&lt;/span&gt;
 &lt;/div&gt;
 &lt;div class="accordion-content"&gt;
 Content
 &lt;/div&gt;
 &lt;div class="accordion-separator"&gt;&lt;/div&gt;
 &lt;/li&gt;
 &lt;/ul&gt;
&lt;/div&gt;
&lt;div style="text-align:center;margin-top:50px;"&gt;
 &lt;a href="http://accordionslider.com/" style="color:#568EEA;text-decoration:none;"&gt;
 Css Accordion Slider Generator
 &lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;</code>
 </pre> <div class="accordion-separator"></div> </li> </ul> <ul id="preview"></ul> </div> <div class="section footer clearfix"> <div class="ads"> <ins class="adsbygoogle" style="display:inline-block;width:336px;height:280px" data-ad-client="ca-pub-0557027827812402" data-ad-slot="8823533246"></ins> <script>(adsbygoogle=window.adsbygoogle||[]).push({});</script></div><div class="toolbox"> <iframe src="http://webarti.com/projects/?ref=accordionslider" width="350" height="300"></iframe> </div> </div> <script id="style-vertical-rotation" type="prism-css-markup">.accordion-title span { 
 transform: rotate(0deg);
 -o-transform: rotate(0deg);
 -moz-transform: rotate(0deg);
 -webkit-transform: rotate(0deg);
 -ms-writing-mode: lr-tb;
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0);
 margin-bottom: 0px;
 line-height: 40px;
}</script> <script id="style-horizontal-rotation" type="prism-css-markup">.accordion-title span { 
 transform: rotate(-90deg);
 -o-transform: rotate(-90deg);
 -moz-transform: rotate(-90deg);
 -webkit-transform: rotate(-90deg);
 -ms-writing-mode: lr-bt;
 filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
 margin-left: 0px;
 line-height: 40px;
}</script> <script id="html-main-template" type="prism-html-markup"><div class="accordion">
 <ul>
 {{items}}
 </ul>
</div></script> <script id="bundle-template" type="text"><!DOCTYPE html>
<html>
<head>
<title>CSS Accordion Slider</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
{{css}}
</style>
</head>
<body>
{{html}}
</body>
</html></script> <script id="html-item-template" type="prism-html-markup"><li>
 <input type="radio" name="select" class="accordion-select" />
 <div class="accordion-title">
 Title
 </div>
 <div class="accordion-content">
 Content
 </div>
 <div class="accordion-separator"></div>
 </li></script> <script type="text/javascript" src="http://accordionslider.com/js/min.js?v=1430977809631"></script></body></html>

↺