Author: | MattH22 |
---|---|
Views Total: | 10,902 views |
Official Page: | Go to website |
Last Update: | June 6, 2014 |
License: | Unknown |
Preview:

Description:
In this post we’re going to creating a stylish accordion menu that allows you to toggle hidden panels by clicking the title bar.
How to use it:
Markup Html structure.
<div class="togglebox"> <div> <input id="radio1" type="radio" name="toggle" checked="checked"/> <label for="radio1">Title 1</label> <div class="content"> <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p> <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p> </div> </div> <div> <input id="radio2" type="radio" name="toggle"/> <label for="radio2">Title 2</label> <div class="content"> <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p> <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p> </div> </div> <div> <input id="radio3" type="radio" name="toggle"/> <label for="radio3">Title 3</label> <div class="content"> <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p> <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p> </div> </div> <div> <input id="radio4" type="radio" name="toggle"/> <label for="radio4">Title 4</label> <div class="content"> <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p> <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p> </div> </div> <div> <input id="radio5" type="radio" name="toggle"/> <label for="radio5">Title 5</label> <div class="content"> <p>Cupcake ipsum dolor sit. Amet candy chocolate bar croissant marzipan toffee danish. Chocolate cake jujubes liquorice topping marzipan.</p> <p>Macaroon bonbon sugar plum macaroon I love I love liquorice marzipan. Lemon drops I love caramels cheesecake croissant.</p> </div> </div> </div>
The CSS/CSS3. Font Awesome 4 is required for toggle arrows.
@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.css"); * { margin: 0; padding: 0; box-sizing: border-box; } :before, :after { content: ''; display: block; position: absolute; box-sizing: border-box; } html, body { height: 100%; font: 16px/1 'Open Sans', sans-serif; color: #555; background: #4a6a8a; } body { padding: 50px; } .togglebox { width: 300px; height: 400px; margin: 0 auto; background: #3c566f; } input[type="radio"] { position: absolute; opacity: 0; } label { position: relative; display: block; height: 50px; line-height: 50px; padding: 0 20px; font-size: 14px; font-weight: bold; color: rgba(255, 255, 255, 0.5); background: #2e4155; cursor: pointer; } label:hover { background: #1f2d3a; } label:after { content: '\f078'; top: 0px; right: 20px; font-family: fontawesome; } .content { height: 0; overflow: hidden; } input[type="radio"]:checked ~ label { color: rgba(255, 255, 255, 0.8); } input[type="radio"]:checked ~ label:after { transform: rotate(90deg); -moz-transform: rotate(90deg); -o-transform: rotate(90deg); -ms-transform: rotate(90deg); -webkit-transform: rotate(90deg); } input[type="radio"]:checked ~ .content { height: 150px; } p { margin: 15px 0; padding: 0 20px; font-size: 11px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); }
Great script, thank you so much. Of course I gave you credit on my website! Given your hard work, I am not including the link as I find this disrespective to your credit. Once my website is uploaded, I can sent proof of my credit page in a private message.