Menu
I'm putting together a website. I need help creating the following feature:
I want the "About" link to expand into a panel when clicked, and retract when the user presses "hide" in the panel. I've attached a diagram below to clarify what it should look like. When the user presses About in (1), it becomes (2), and when the user presses hide in (2), it becomes (1) again.
I would like to do this in pure HTML/CSS, if possible. Does anyone know how I can do this?
859
To create a collapsible panel in Bootstrap, use the panel-collapse class. You can try to run the following code to create a collapsible panel
To make an animated collapsible, add max-height: 0, overflow: hidden and a transition for the max-height property, to the panel class. Then, use JavaScript to slide down the content by setting a calculated max-height, depending on the panel's height on different screen sizes:
And here’s the HTML markup for it: If you want a collapsible to be opened by default, simply set the checked attribute on the checkbox: Note that each label should be associated with the correct checkbox, so each checkbox element needs a unique id and each label’s for attribute should point to the corresponding checkbox’s id.
Create a Collapsed Sidepanel 1 Step 1) Add HTML:#N#Example#N#<div id="mySidepanel" class="sidepanel">#N#<a href="javascript:void (0)" class="closebtn"... 2 Step 2) Add CSS:#N#Example#N#/ 3 The sidepanel menu 4 /#N#.sidepanel {#N#height: 250px; / 5 Specify a height 6 /#N#width: 0; / 7 0... 8 Step 3) Add JavaScript: More ...
This answer explains how it can be achieved in full: Pure CSS collapse/expand div
Here is a quick rundown:
<div class="FAQ"> <a href="#hide1" class="hide" id="hide1">+</a> <a href="#show1" class="show" id="show1">-</a> <div class="question"> Question Question Question Question Question Question Question Question Question Question Question? </div> <div class="list"> <p>Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer </p> </div> </div> CSS
/* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */ .FAQ { vertical-align: top; height: auto; } .list { display:none; height:auto; margin:0; float: left; } .show { display: none; } .hide:target + .show { display: inline; } .hide:target { display: none; } .hide:target ~ .list { display:inline; } /*style the (+) and (-) */ .hide, .show { width: 30px; height: 30px; border-radius: 30px; font-size: 20px; color: #fff; text-shadow: 0 1px 0 #666; text-align: center; text-decoration: none; box-shadow: 1px 1px 2px #000; background: #cccbbb; opacity: .95; margin-right: 0; float: left; margin-bottom: 25px; } .hide:hover, .show:hover { color: #eee; text-shadow: 0 0 1px #666; text-decoration: none; box-shadow: 0 0 4px #222 inset; opacity: 1; margin-bottom: 25px; } .list p { height:auto; margin:0; } .question { float: left; height: auto; width: 90%; line-height: 20px; padding-left: 20px; margin-bottom: 25px; font-style: italic; } And the working jsFiddle:
http://jsfiddle.net/dmarvs/94ukA/4/
Again none of the above is my work just to clarify, but it just goes to show how easy it is to find it on Google!!
115
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
