I have a pure CSS collapsable div which is based on someone else&#39;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: &lt;http://jsfiddle.net/dmarvs/94ukA/4/&gt;

    &lt;div class=&quot;FAQ&quot;&gt;
        &lt;a href=&quot;#hide1&quot; class=&quot;hide&quot; id=&quot;hide1&quot;&gt;+&lt;/a&gt;
        &lt;a href=&quot;#show1&quot; class=&quot;show&quot; id=&quot;show1&quot;&gt;-&lt;/a&gt;
        &lt;div class=&quot;question&quot;&gt; Question Question Question Question Question Question Question Question Question Question Question? &lt;/div&gt;
            &lt;div class=&quot;list&quot;&gt;
                &lt;p&gt;Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer Answer &lt;/p&gt;
            &lt;/div&gt;
    &lt;/div&gt;

&lt;!-- --&gt;

    /* 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;
    }


All Collapsable Solutions on Gang of Coders

Total of 1 Collapsable Solutions

Pure CSS collapse/expand div