Pure CSS Display Toggle

HTML

<section id='targ1'>
    <div id='targ2'>
        <a href='#targ2' class="expand">open</a>
        <a href='#targ1' class="collapse">closey</a>        
        <p>anything</p>
    </div>
</section>

CSS

/*link buttons */
a:hover.expand, a.expand,
a:hover.collapse, a.collapse {
    text-decoration: none;
}

.collapse {
    display: none;
}

div:target .expand {
    display: none;
}
div:target .collapse {
  display: inline;
}
div #targ2{background: back;}
section:target .expand {
    display: inline;
}
section:target .collapse {
    display: none;
}

/* conetnt */
p{
    display: none;
}
div:target p {
  display: block;
}

section:target p {
  display: none;
}

/*
#targ:target{
    display: none;
}

:target{
    display: block;
}

#targ:target .open{
    display: block;
}

:target .close{
    display: block;
}

a:target{
    display: none;
}*/