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">
<a href="#Item1">Title 1</a>
<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)