Hide / Show Content

HTML

<h3><a class="expandlink" href="#Expando1">Click on this text to expand</a></h3>
<div class="expandtarget" id="Expando1">
<p>This is the text to show on expansion.</p>
        </div>
<h3><a class="expandlink" href="#Expando2">Click on this text to expand</a></h3>
<div class="expandtarget" id="Expando2">
<p>This is the second text to show on expansion.</p>
        </div>

CSS

.expandlink {
    padding: .33em 2em .33em .75em;
    margin-top: -.33em;
    margin-bottom: -.33em;
    background: url("plus sign.png") right .5em bottom 50% no-repeat #ededed;
    display: block;
    border-radius: .25em
}
.expandlink:active,
.expandlink:link,
.expandlink:visited {
    text-decoration: none
}
.expandlink.expandlinked {
    background-image: url("minus sign.png")
}
.expandlink.expandlinked:hover,
.expandlink:hover {
    background-color: #cedae2
}
.expandtarget {
    display: none
}
.expandtarget:target,
.expandtargeted {
    display: block
}