spinnatosa / TargetUse

Simple way to create an accordion with CSS3.

TargetUse

TargetUse is a simple accordion created with CSS-only.
Why do we use Javascript when we can use CSS?

So I wanna show how TargetUse works.

HTML

<main class="targetUse">

  <section id="section-1">
    <a href="#section-1">
      Primo Accordion
    </a>
    <article>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ex eu nulla posuere porttitor. 
    </article>
  </section>
  
  <section id="section-2">
    <a href="#section-2">
      Primo Accordion
    </a>
    <article>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut ex eu nulla posuere porttitor. 
    </article>
  </section>
  
</main>

CSS/SCSS

$space : 10px;

.targetUse {
  padding: $space*3;
  
  section {
    margin: $space*3 0;

    a {
      transition: color .5s ease;
      color: black;
      text-decoration: none;
      border-bottom: 1px solid black;
      padding-bottom: $space/2;
      display: inline-block;
      margin-bottom: $space;
    }
    
    article {
      max-height: 0;
      overflow:hidden;
      transition: all 1s ease;
    }
  
  // OPEN ACCORDION
    &:target {

      a {
        color: grey;
        border-bottom: 1px solid grey
      }
      
      article {
        max-height: $space*3;
      }
    }
  }
}

I used ":target" pseudo-class to do it.
The :target pseudo-class is supported by all browsers.
You can see a demo here.