title: How can I toggle a div to reveal content with CSS
body: <p>So I've got a div that should expand to reveal a list when toggled. The before and after states can be seen here <a href="http://reversl.net/box/" rel="nofollow noreferrer">http://reversl.net/box/</a> but what do I need to add to my styling to make this happen? I'd like to use css transitions for added effect. I'm not worried about browser compatibility because it's just for learning purposes. Any tips?</p>
  
  <pre><code>&lt;div class="box"&gt;&lt;img src="http://www.placehold.it/250x300" alt="" /&gt;
          &lt;div class="section progress"&gt;
              &lt;h4&gt;
                  &lt;a href="#"&gt;Div Before&lt;/a&gt;
              &lt;/h4&gt;
              &lt;div class="metrics"&gt;
                  &lt;div class="meter"&gt;
                      &lt;span style="width: 75%"&gt;&lt;/span&gt;
                  &lt;/div&gt;&lt;!--.meter--&gt;
              &lt;/div&gt;&lt;!--.metrics--&gt;
          &lt;/div&gt;&lt;!--.section-progress--&gt;
  &lt;/div&gt;&lt;!--.box--&gt;
  
  &lt;div class="box"&gt;&lt;img src="http://www.placehold.it/250x300" alt="" /&gt;
          &lt;div class="section progress"&gt;
              &lt;h4&gt;
                  &lt;a href="#"&gt;Div After&lt;/a&gt;
              &lt;/h4&gt;
              &lt;div class="metrics"&gt;
                  &lt;div class="meter"&gt;
                      &lt;span style="width: 75%"&gt;&lt;/span&gt;
                  &lt;/div&gt;&lt;!--.meter--&gt;
              &lt;/div&gt;&lt;!--.metrics--&gt;
          &lt;/div&gt;&lt;!--.section-progress--&gt;
          &lt;div class="sub_section"&gt;
              &lt;ul class="list"&gt;
                  &lt;li&gt;Item 1&lt;/li&gt;
                  &lt;li class="last"&gt;Item 2&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!--.sub_section--&gt;
  &lt;/div&gt;&lt;!--.box--&gt;
  
  .boxes {
  width: 100%;
  padding: 1%;
  }
  
  .box {
  width: 20%;
  padding: 1%;
  background: #fff;
  -moz-box-shadow: 2px 3px 4px 0px #e9e9e9;
  -webkit-box-shadow: 2px 3px 4px 0px #e9e9e9;
  box-shadow: 2px 3px 3px 0px #e9e9e9;
  display: inline-block;
  margin-top: 1em;
  }
  
  .box img {
  margin-bottom: 1%;
  }
  
  .progress a {
  margin: 0;
  padding: 0;
  color: #999;
  text-decoration: none;
  }
  
  .metrics {
  margin: -1em 0 0 0;
  padding: 0;
  background: #c0c0c0;
  
  }
  .accordion .progress .meter {
  background: #555;
  width: 100%;
  position: relative;
  }
  
  .meter &gt; span {
  height: 10px;
  display: block;
  background-color: #777;
  position: relative;
  overflow: hidden;
  }
  
  .sub_section {
  margin-top: 1em;
  border-bottom: none;
  }
  
  .list {
  padding: 0;
  margin: 0;
  }
  
  .list li {
  background: #dcdcdc url('http://placehold.it/40x40') no-repeat;
  font-size: 11px;
  color: #999;
  list-style: none;
  padding: 1.3em 1em 1.3em 4.5em;
  margin-bottom: 5px;
  }
  
  .list .last {
  border-bottom: none;
  }
  </code></pre>