"CSS ACCORDIAN SLIDE"
Semantic UI 2.2.10 Snippet by steelerbaby

<link href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.10/semantic.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Create your snippet's HTML, CSS and Javascript in the editor tabs</h2> </div> </div> <!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> .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: #191d23; border-style: solid; border-width: 39px; border-radius: 19px; margin: 0 auto; height: 504px; width: 830px; } .accordion > ul > li, .accordion-title, .accordion-content, .accordion-separator { float: none; } .accordion > ul > li { background-color: #353332; margin-right: -0px; margin-bottom: -210px; } .accordion-select:checked ~ .accordion-separator { margin-right: 0px; margin-bottom: 210px; } .accordion-title, .accordion-select { background-color: #4c5157; color: #ffffff; width: 830px; height: 40px; font-size: 28px; } .accordion-title span { margin-bottom: 25px; margin-left: 20px; } .accordion-select:hover ~ .accordion-title, .accordion-select:checked ~ .accordion-title { background-color: #5689b2; } .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; } .accordion-content { background-color: #ffffff; color: #4c5157; height: 144px; width: 764px; padding: 33px; } .accordion-title, .accordion-select:checked ~ .accordion-content { margin-right: 2px; margin-bottom: 2px; } /* 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> </head> <body> <div class="accordion"> <ul> <li> <input type="radio" name="select" class="accordion-select" checked /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select" /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select" /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select" /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select" /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select" /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> <li> <input type="radio" name="select" class="accordion-select" /> <div class="accordion-title"> <span>Title</span> </div> <div class="accordion-content"> Content </div> <div class="accordion-separator"></div> </li> </ul> </div> <div style="text-align:center;margin-top:50px;"> <a href="http://accordionslider.com/" style="color:#568EEA;text-decoration:none;"> Css Accordion Slider Generator </a> </div> </body> </html>
.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: #191d23; border-style: solid; border-width: 39px; border-radius: 19px; margin: 0 auto; height: 504px; width: 830px; } .accordion > ul > li, .accordion-title, .accordion-content, .accordion-separator { float: none; } .accordion > ul > li { background-color: #353332; margin-right: -0px; margin-bottom: -210px; } .accordion-select:checked ~ .accordion-separator { margin-right: 0px; margin-bottom: 210px; } .accordion-title, .accordion-select { background-color: #4c5157; color: #ffffff; width: 830px; height: 40px; font-size: 28px; } .accordion-title span { margin-bottom: 25px; margin-left: 20px; } .accordion-select:hover ~ .accordion-title, .accordion-select:checked ~ .accordion-title { background-color: #5689b2; } .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; } .accordion-content { background-color: #ffffff; color: #4c5157; height: 144px; width: 764px; padding: 33px; } .accordion-title, .accordion-select:checked ~ .accordion-content { margin-right: 2px; margin-bottom: 2px; } /* 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; }

Related: See More


Questions / Comments: