title: CSS Expander with only CSS
body: <p>i don't want to flood my visitors display with all news, so i want to use expanders for each news. But i want to support vistors with JavaScript disabled too.
  My try:</p>
  
  <pre><code>#news &gt; .panel &gt; .panel-heading &gt; .panel-title &gt; .label{
     float: right;
  }
  
  #news &gt; .panel &gt; .panel-body {
      display: none;
  }
  
  #news &gt; .panel &gt; panel-heading &gt; panel-title &gt; a:visited &lt; .panel-title &lt; .panel-heading &lt;         .panel &gt; .panel-body {
     display: block;
  }
  
  
          &lt;div id="news" class="tab-pane active"&gt;
                  {% for announcement in server.announcements.all %}
                      &lt;div class="panel panel-default"&gt;
                          &lt;div class="panel-heading"&gt;
                              &lt;h3 class="panel-title"&gt;&lt;a href="#"&gt;{{ announcement.title }} &lt;/a&gt;&lt;span class="label label-default"&gt;By {{ announcement.writer.get_username }} at {{ announcement.date_created }}&lt;/span&gt;&lt;/h3&gt;
                          &lt;/div&gt;
                          &lt;div class="panel-body"&gt;
  
                              {{ announcement.content|safe_html }}
                          &lt;/div&gt;
                      &lt;/div&gt;
                  {% endfor %}
          &lt;/div&gt;
  </code></pre>