Bootstrap Snippets, Bootstrap Horizontal Accordion Menu

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Horizontal Accordion Menu</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>
<body>

.ftl-horizontal-accordion,
.ftl-horizontal-accordion > form > ul > li > div,
.ftl-horizontal-accordion > form > ul > li > label{
    overflow: hidden;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
 
.ftl-horizontal-accordion > form > ul,
.ftl-horizontal-accordion > form > ul > *{
    margin: 0;
    padding: 0;
    list-style: none;
}
 
.ftl-horizontal-accordion > form > ul,
.ftl-horizontal-accordion > form > ul > li > div{
    height: 159px;
}
 
.ftl-horizontal-accordion,
.ftl-horizontal-accordion > form > ul > li > input:checked + label{
    background: #F4F4F4;
}
.ftl-horizontal-accordion > form > ul > li > input,
.ftl-horizontal-accordion > form > ul > li > label{
    position: absolute;
}
.ftl-horizontal-accordion > form > ul > li,
.ftl-horizontal-accordion > form > ul > li:last-child{
    border: solid 1px rgba(255,255, 255, .75);
}
.ftl-horizontal-accordion > form > ul > li > div,
.ftl-horizontal-accordion > form > ul > li > input{
    opacity: 0;
}
.ftl-horizontal-accordion{
    width: 964px;
    font-family: Arial, Helvetica, Sans-serif;
    padding: 1px;
    cursor: default;
}
.ftl-horizontal-accordion > form > ul > li > label{
    display: block;
    width: 159px; 
    padding: 0 8px;
    letter-spacing: 1px;
    font: bold 14px/32px "Arial Rounded MT", Arial, Helvetica, Sans-serif;
    background: #ffae00;
    color: #ffffff;
    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;
}
.ftl-horizontal-accordion > form > ul > li > input:not(:checked) + label:hover{
    background: #ef7517;
}
.ftl-horizontal-accordion > form > ul > li > input:checked + label{
    border-bottom-color: transparent;
    color:#FFF;
	background:#ef7517;
}
.ftl-horizontal-accordion > form > ul > li{
    float: left;
    padding: 0 32px 0 0;
    border-right: 0;
}
.ftl-horizontal-accordion > form > ul > li > div{
    width: 0;
    font-size: 10px;
    color: #ffffff;
    margin: 0 -32px 0 32px;
    -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);
}
.ftl-horizontal-accordion > form > ul > li > input:checked ~ div{
    width: 763px;
    padding: 8px;
    overflow: auto;
    opacity: 1;
}
.ftl-horizontal-accordion > form > ul > li > div h3{
    font: inherit;
    font-size: 18px;
    border: 0;
	margin-top: 0px;
}
.ftl-horizontal-accordion > form > ul > li > div h3,
.ftl-horizontal-accordion > form > ul > li > div p{
    color: #263238;
}
.ftl-horizontal-accordion > form > ul > li > div p{
    font-size: 13px;
}
</style>

<div class="ftl-horizontal-accordion">
    <form action="" method="post">
        <ul>
            <li>
                <input type="radio" name="group-01" id="group-01-01" />
                <label for="group-01-01">HTML5</label>
                <div>
                    <h3>HTML5</h3>
                    <p>HTML5 (No space between "HTML" and "5")is a markup language 
					used for structuring and presenting content on the World Wide Web. 
					It is the fifth and current version of the HTML standard.</p>
                </div>
            </li>
            <li>
                <input type="radio" name="group-01" id="group-01-02" />
                <label for="group-01-02">CSS3</label>
                <div>
                    <h3>CSS3</h3>
                    <p>The CSS was started to develop around 1998. And till 2009, 
					it was under development. The first working draft of CSS3 came 
					in 19-01-2001. but it was initially declared early in the 
					June 1999. The main difference between css2 and css3 is Media 
					Queries, Namespaces, Selectors Level 3, Color.</p>
                </div>
            </li>
            <li>
                <input type="radio" name="group-01" id="group-01-03" checked="checked" />
                <label for="group-01-03">Bootstrap</label>
                <div>
                    <h3>Bootstrap</h3>
                    <p>Bootstrap is the most popular HTML, CSS and JavaScript 
					framework for developing responsive, mobile-first web sites. 
					Bootstrap is faster and easier web development.</p>
                </div>
            </li>
            <li>
                <input type="radio" name="group-01" id="group-01-04" />
                <label for="group-01-04">JavaScript</label>
                <div>
                    <h3>JavaScript</h3>
                    <p>JavaScript is the programming language of the Web. 
					Javascript Most commonly used websites this is client-side 
					script to interact with the user and make dynamic pages. 
					All modern web browsers on desktops, tablets, and smart 
					phones are using JavaScript.</p>
                </div>
            </li>
            <li>
                <input type="radio" name="group-01" id="group-01-05" />
                <label for="group-01-05">jQuery</label>
                <div>
                    <h3>jQuery</h3>
                    <p>jQuery is a set of (a rich bundle of) JavaScript libraries 
					that helps users apply dynamic functionality to web pages with great ease. 
					It is designed to simplify the client-side scripting of HTML.  
					jQuery provides several powerful features, including the ability
					to access a part of a webpage,..</p>
                </div>
            </li>
            <li>
                <input type="radio" name="group-01" id="group-01-06" />
                <label for="group-01-06">PHP</label>
                <div>
                    <h3>PHP</h3>
                    <p>PHP is an acronym for PHP: Hypertext Preprocessor it 
					is a widely-used open source(free).  PHP is a server-side 
					scripting language designed primarily for web development 
					and web applications. Originally created by Rasmus Lerdorf 
					in 1994.  PHP files have extension ".php".</p>
                </div>
            </li>
        </ul>
    </form>
</div>
</div>

</div>

</body>
</html>

We see you’re using an ad blocker.