What is this feature/code called?


#1

I am trying to add something to my website that I have seen used on other websites before. I have typed in google all kinds of keywords but I can not bring it back up again. The people of this forum are very knowledgeable about code so I figured if I described it someone could point me in the right direction.

I am looking to hide a comparison chart on my website with a click to reveal css slide. I have seen it where people hide content below what looks like tabs that when people click on them they slide down to reveal the contents. My comparison chart is always open upon site load and I think it is best hidden until someone wants to read it.

What are these things called? I was looking all over w3 schools and could not seem to find it. Thanks for any help!


#2

Hi cowsgonemadd3,

What you’re looking for is most likely called “accordion”.

Google that and you will find some tutorials here on Sitepoint too. :slight_smile:


#3

Hi there cowsgonemadd3,

here is an example…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>CSS "target" Test</title>

<!--<link rel="stylesheet" href="screen.css" media="screen">-->

<style media="screen">
body {
    background-color: #fcfcfc;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

#container {
    max-width: 50em;
    padding: 2em;
    margin: auto;
    border: 0.062em solid #999;
    background-color: #fff;
    text-align: right;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

h1 {
    text-align: center;
 }

h2, p {
    text-align: left;
 }

#nav {
    padding: 0;
    margin: 2em 0;
    list-style: none;
    text-align: center;
 }

#nav li {
    display: inline;
    margin: 0 1em;
 }

#nav a {
    color: #000;
 }

#link1, #link2, 
#link3, #link4 {
    display: none;
    padding: 2em;
    border: 0.062em solid #999;
 }

#link1:target, #link2:target, 
#link3:target, #link4:target {
    display: block;
    animation: highlight 3s forwards;
 }

@keyframes highlight {
from {
      background-color: rgba( 128, 128, 128, 0.4 );
  }
to   {
      background-color: rgba( 255, 255, 255, 0.0 );
  }
 }
</style>

</head>
<body> 

 <h1>Target Test</h1>
  <div id="container">
   <ul id="nav">
    <li><a href="#link1">one</a></li>
    <li><a href="#link2">two</a></li>
    <li><a href="#link3">three</a></li>
    <li><a href="#link4">four</a></li>
   </ul>
   <div id="link1">
    <h2>Content One</h2>
     <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
      bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
      posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
      Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
      sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
      nunc. Curabitur ornare tempor turpis.
    </p>
    <a href="#container">close</a>
   </div>
   <div id="link2">
    <h2>Content Two</h2>
     <p>
      Donec vehicula diam non leo efficitur, id euismod odio tincidunt. Vivamus auctor viverra 
      purus vitae lobortis. Sed et libero non diam tempor sagittis. Quisque vel egestas ipsum. 
      Integer sed elit eu orci blandit commodo in in erat. Donec blandit, mi at gravida varius, 
      nulla tellus vulputate ex, vitae euismod erat lectus rutrum diam. Cum sociis natoque 
      penatibus et magnis dis linkturient montes, nascetur ridiculus mus. 
    </p>
    <a href="#container">close</a>
   </div>
   <div id="link3">
    <h2>Content Three</h2>
     <p>
      Nam venenatis diam ante, et cursus elit porttitor at. Morbi mattis leo at ex vehicula, non 
      vestibulum ligula aliquam. Maecenas non nibh sollicitudin, porttitor odio in, elementum arcu. 
      Donec pulvinar orci enim. In pulvinar congue ante, ac rutrum odio bibendum volutpat. 
      Phasellus ac sem consequat lorem congue malesuada vitae vitae diam. Donec eu imperdiet 
      augue. Curabitur ullamcorper sit amet libero in ullamcorper. Donec sed laoreet quam. 
    </p>
    <a href="#container">close</a>
   </div>
   <div id="link4">
    <h2>Content Four</h2>
     <p>
      In sapien massa, feugiat ut magna eu, hendrerit porttitor justo. In vitae massa ipsum. 
      Aliquam feugiat tortor sed diam facilisis, et molestie dolor blandit. Pellentesque non lectus 
      odio. Curabitur pulvinar orci vitae lorem bibendum volutpat. Duis congue dignissim ante ut 
      consequat. Sed nec sagittis neque, quis vehicula urna. Fusce laoreet interdum ligula vel finibus.
     </p>
    <a href="#container">close</a>
   </div>
  </div>

</body>
</html>

coothead


#4

@coothead made you an example already, and I could have linked to an article here at Sitepoint. :blush:

You can find all kinds of useful articles here. E.g: Craig Buckler wrote about how to make CSS accordions in 2012:

EDIT)
An accessibility detail; I see that the tutorials above happen to omit a “Close” button (a link to “untarget” the open tab) that @coothead thoughtfully put in to be able to close the tab again.


#5

That is the stuff I am looking for. Thanks to all who replied. What a great community this is! Helps out newbie coders like myself! Now to make it work on my website :slight_smile: