Pure CSS Accordion Issue

Question

I'm playing around with a pure CSS accordion http://reversl.net/accordion/ I can get the basic functionality to work (headings 2 & 3 both toggle) But I can't get heading 1 to toggle if I add the same UL to it. Because Heading 1 is styled differently the problem (I think) lies within naming/targeting it's + div ?

Please note: I removed the UL from Heading 1 for the sake of the demo because it was preventing Headings 2 & 3 from toggling.

Answer 1

This is because the class "progress" assigned to the div id="one" that keeps constant the size of the div with the content.

Answer 2

You made several mistakes. Too many to count:

Here is a working example: Try and see, what I changed
http://jsfiddle.net/HerrSerker/ASqE9/

HTML

<div id="wrap">

<div class="accordion">

    <div id="two" class="section">
        <h4>
            <a href="#two">Heading 2</a>
        </h4>
        <div class="sub_section">
            <ul class="list">
                <li>Sample Text 1</li>
                <li class="last">Sample Text 2</li>
            </ul>
        </div>    
    </div><!--#two-->

    <div id="four" class="section progress">
        <h4>
            <a href="#four">Heading 4 (With Progress Bar)</a>
        </h4>
        <div class="metrics">
            <div class="meter">
                <span style="width: 75%"></span>
            </div><!--.meter-->
        </div><!--.metrics-->
        <div class="sub_section">
            <ul class="list">
                <li>Sample Text 1</li>
                <li class="last">Sample Text 2</li>
            </ul>
        </div><!--.sub_section-->
    </div><!--#one-->


</div><!--accordian-->
</div>​

---

CSS

  #wrap {
      width: 320px;
      background: #f0f0f0;
      margin: auto;
  }

  .accordion {
      clear: both;
      padding: 0;
      margin: 0 auto;
  }

  .accordion h4 {
      margin: 0;
  }

  .accordion h4 a {
      padding: 1em;
      color: #999;
      display: block;
      font-weight: normal;
      text-decoration: none;
  }

  .accordion h4 a:hover {
      text-decoration: none;
      background: #111;
  }

  .accordion .section {
      background: #222;
       border-bottom: 1px solid #000;
  }

  .accordion .sub_section {
       border-bottom: none;
       background: #f0f0f0;
  }

  .list {
      padding: 0;
      margin: 0;
  }

  .list li {
      background: url('http://www.placehold.it/40x40') no-repeat;
      color: #999;
      list-style: none;
      padding: .7em .7em .7em 4em;
      border-bottom: 1px solid #fff;
  }

  .list .last {
      border-bottom: none;
  }

  .accordion .sub_section {
      height: 0;
      overflow: hidden;
      -webkit-transition: height 0.3s ease-in;
      -moz-transition: height 0.3s ease-in;
      -o-transition: height 0.3s ease-in;
      -ms-transition: height 0.3s ease-in;
      transition: height 0.3s ease-in;
  }

    .accordion :target h4 a {
      text-decoration: none;
      font-weight: bold;
  }

  .accordion :target .sub_section {
      height: 80px;
  }

  .accordion .section.large:target h4 + div {
      overflow: auto;
  }

  .accordion p {
      color: #646464;
  }

  .accordion .progress .meter {
     width: 90%;
     height: 2px;
     position: relative;
     background: #555;
     margin: -.9em auto .5em auto;
     padding: 1px;
  }

  .meter > span {
      height: 2px;
      display: block;
      background-color: #f0f0f0;
      position: relative;
      overflow: hidden;
  }



  ​