Collapsing/Expanding link on click


I’m stuck with a folding menu here.

I managed to get my hands on a script that does exactly what I want but in kind of reverse. In the script the link is “Expanded” by default. I want my link to be contracted by default and when you click it, it expands.

Any help would be really appreciated! Thanks 🙂

.show {
  display: none;

.hide:focus + .show {
  display: inline;

.hide:focus {
  display: none;

.hide:focus ~ #list {
  display: none;

@media print {
  .hide, .show {
    display: none;
<html xmlns="">

    <p>Lorem ipsum...</p>
      <a href="#" class="hide">[Link]</a>
      <a href="#" class="show">[Link]</a>
      <ol id="list">
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>



Just invert the css:


#list, .show {display: none; }
.hide:focus + .show {display: inline; }
.hide:focus { display: none; }
.hide:focus ~ #list { display:block; }

Answered By – Abhitalks

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published