List of expanders

by Tim Ko

HTML

<div class='toggle'>
    <a href="#hide1" class="hide" id="hide1"><div>Here is a message</div></a>
    <a href="#show1" class="show" id="show1">Here is a message</a>
        <div class="list">
            <p>SECRET MESSAGE HERE!!!</p>
        </div>
</div>

<div class='toggle'>
    <a href="#hide2" class="hide" id="hide2">Here is a message</a>
    <a href="#show2" class="show" id="show2">Here is a message</a>
        <div class="list">
            <p>SECRET MESSAGE HERE!!!</p>
        </div>
</div>

<div class='toggle'>
    <a href="#hide3" class="hide" id="hide3">Here is a message</a>
    <a href="#show3" class="show" id="show3">Here is a message</a>
        <div class="list">
            <p>SECRET MESSAGE HERE!!!</p>
        </div>
</div>

<div class='toggle'>
    <a href="#hide4" class="hide" id="hide4">Here is a message</a>
    <a href="#show4" class="show" id="show4">Here is a message</a>
        <div class="list">
            <p>SECRET MESSAGE HERE!!!</p>
        </div>
</div>

CSS

.toggle { 
    display: inline-block;
    width: 100%;
    vertical-align: top; 
    height: auto; 
}
.list {
    display: none; 
    height: auto;
    margin: 0;
    float: left;
}
.show {
    display: none; 
}
.hide:target + .show {
    display: block; 
}
.hide:target {
    display: none; 
}
.hide:target ~ .list {
    display: block; 
}
.list p{
    height:auto;
    margin:0;
}