CSS Expander with only CSS - css

Question

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:
#news > .panel > .panel-heading > .panel-title > .label{
float: right;
}
#news > .panel > .panel-body {
display: none;
}
#news > .panel > panel-heading > panel-title > a:visited < .panel-title < .panel-heading < .panel > .panel-body {
display: block;
}
<div id="news" class="tab-pane active">
{% for announcement in server.announcements.all %}
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">{{ announcement.title }} <span class="label label-default">By {{ announcement.writer.get_username }} at {{ announcement.date_created }}</span></h3>
</div>
<div class="panel-body">
{{ announcement.content|safe_html }}
</div>
</div>
{% endfor %}
</div>

Answer 1

You need to make some changes
First, you will never (at current CSS3 capablity) be able to get what you desire using pure CSS using the :visited psuedo-class for two reasons: (1) the a element is not at the sibling level of the .panel-body, so it cannot control .panel-body through css, and (2) the :visited pseudo-class has severe restrictions on what it allows a designer to control (for privacy reasons).
So what can you do? Use :target instead.
But that will (1) limit you to allowing only one news item open at a time, and (2) requires you to set id properties on your .panel-body elements to match the href of the a tag controlling it. So you would need html structure like this:
<div id="news" class="tab-pane active">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">
Title 1
<span class="label label-default">By writer name</span>
</h3>
</div>
<div class="panel-body" id="Item1">
Panel 1 body
</div>
</div>
</div>
Where each a has a unique href that is tied to the id of the .panel-body of the item. Then you can get the functionality similar to what you seek by this CSS for the display:
#news > .panel > .panel-body {
display: none;
}
#news > .panel > .panel-body:target {
display: block;
}
You can see how this works in this fiddle example, and to see how it would work with multiple news items, take a look at this fiddle example.
This solution is only CSS3 compatible, so older browsers with javascript disabled would not be able to see any news items (with javascript you can use that to expand)

Answer 2

Graceful degradation:
I would show all news in a container with internal scrollbar (constrained in height) as in : http://jsfiddle.net/Py2HU/1/
And when JS available would add a Show/Hide button, hide N last news and show/hide them after a click (or add Previous/Next buttons to allow scrolling news one by one)
CSS
.news-wrapper {
width: 300px;
max-height: 400px;
overflow: auto;
border: 1px solid #000;
}
HTML
<div class="news-wrapper">
<ul class="news">
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
<li class="news-item">Lorem ipsum </li>
</ul>
</div>
Compatibility: IE7+ and easily with IE6 (as simple as .ie6 .news-wrapper { height: 400px } if anyone cares)

Answer 3

This answer is for people who are looking for Single expander only with CSS3.
Bootstrap reference is given only to use Glyph-icons(Up/Down).
check Plunker
HTML
<div class="expandercheckbox">
<input id="e1" type="checkbox" checked="checked" />
<label for="e1" class="expanderheader">Click me to Expand/Collpase</label>
<div class="expandercontainer">
I am in container. I am visible. Click above to make be collpase.
</div>
</div>
CSS
body{
padding:50px;
background: #484848;
color:#fff;
}
.expandercheckbox input[type="checkbox"] {
display: none;
}
.expandercheckbox .expanderheader {
cursor: pointer;
}
.expandercheckbox input[type="checkbox"] + .expanderheader {
color: #fff;
font-weight: bold;
font-size: 12px;
white-space: nowrap;
user-select:none;
-webkit-user-select:none;
}
.expandercheckbox input[type="checkbox"] + .expanderheader:before {
content: "\e113";
display: inline-block;
font: 14px/1em Glyphicons Halflings;
height: 20px;
width: 20px;
border-radius: 20px;
margin: -2px 0.25em 0 0;
padding: 1.5px 3.5px;
vertical-align: top;
background: #717171;
/* Old browsers */
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:before {
content: "\e114";
padding: 2.5px;
}
.expandercheckbox input[type="checkbox"]:checked + .expanderheader:after {
font-weight: bold;
color:#000;
}
.expandercontainer{
background:#000;
padding:15px;
}
.expandercheckbox input[type="checkbox"]:checked ~ .expandercontainer {
display: block;
}
.expandercheckbox input[type="checkbox"]:not(:checked) ~ .expandercontainer {
display: none;
}