Menu
I have a pure CSS collapsable div which is based on someone else's code who uses the :target psuedoclass. What I am trying to set up is a page with 12+ questions, and when you click on the + button the answer div expands beneath. I cannot figure out how to make multiple collapsing div elements on this page without writing a ton of extra CSS. Anyone have suggestions on how to write this so my CSS code is minimized? (i.e., so i dont have to input a bunch of unique selectors for each of the 12+ questions).
I cannot use Javascript since this is going on a wordpress.com site which does not allow JS.
Here is my jfiddle: http://jsfiddle.net/dmarvs/94ukA/4/
<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> /* source: http://www.ehow.com/how_12214447_make-collapsing-lists-java.html */ .FAQ { vertical-align: top; height:auto !important; } .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; } 
432
The . collapse class indicates a collapsible element (a <div> in our example); this is the content that will be shown or hidden with a click of a button. To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element.
Just add data-toggle="collapse" and a data-target to element to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element. If you'd like it to default open, add the additional class in.
There are many ways to prevent the parent of floated elements from collapsing in CSS: Method 1 (Using Overflow Property): We can use the overflow property of CSS to prevent the parents from collapsing. Set the value of the overflow property as “auto” for the parent and it will not collapse any more.
Depending on what browsers/devices you are looking to support, or what you are prepared to put up with for non-compliant browsers you may want to check out the <summary> and <detail> tags. They are for exactly this purpose. No css is required at all as the collapsing and showing are part of the tags definition/formatting.
I've made an example here:
<details> <summary>This is what you want to show before expanding</summary> <p>This is where you put the details that are shown once expanded</p> </details> Browser support varies. Try in webkit for best results. Other browsers may default to showing all the solutions. You can perhaps fallback to the hide/show method described above.
147
<summary> and <details> Using <summary> and <details> elements is the simplest but see browser support as current IE is not supporting it. You can polyfill though (most are jQuery-based). Do note that unsupported browser will simply show the expanded version of course, so that may be acceptable in some cases.
/* Optional styling */ summary::-webkit-details-marker { color: blue; } summary:focus { outline-style: none; }<details> <summary>Summary, caption, or legend for the content</summary> Content goes here. </details>See also how to style the <details> element (HTML5 Doctor) (little bit tricky).
The :target selector has a pretty good browser support, and it can be used to make a single collapsible element within the frame.
.details, .show, .hide:target { display: none; } .hide:target + .show, .hide:target ~ .details { display: block; }<div> <a id="hide1" href="#hide1" class="hide">+ Summary goes here</a> <a id="show1" href="#show1" class="show">- Summary goes here</a> <div class="details"> Content goes here. </div> </div> <div> <a id="hide2" href="#hide2" class="hide">+ Summary goes here</a> <a id="show2" href="#show2" class="show">- Summary goes here</a> <div class="details"> Content goes here. </div> </div>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
