pure css accordion

CSS#container{
  width: 400px;
  height: auto;
  margin: 0 auto;
  margin-top: 3%;
  border-top: 1px solid #bdbdbd;
  border-left: 1px solid #bdbdbd;
  border-right: 1px solid #bdbdbd;
}
.accordion label{
  display:block;
  background-color: #eeeeee;
  padding: 10px;
  color: #424242;
  text-shadow: 0 0 2px rgba(255,255,255,0.6);
  cursor: pointer;
  border-bottom: 1px solid #bdbdbd;
  border-top: 1px solid #ffffff;
}

.accordion p{
  color: #424242;
  padding: 10px;
  font-size: 0.8em;
  line-height: 1.7em;
  border-bottom: 1px solid #bdbdbd;
  visibility: hidden;
  opacity: 0;
  display: none;
  text-align: left;
  background-color: #fff;
  margin-top: 0px;
}

#tm:checked ~ .hiddentext{
  display: block;
  visibility: visible;
  opacity: 1;
}

input#tm{
  display: none;
  position: relative;
}

#tn:checked ~ .hiddentext{
  display: block;
  visibility: visible;
  opacity: 1;
}

input#tn{
  display: none;
  position: relative;
}

#to:checked ~ .hiddentext{
  display: block;
  visibility: visible;
  opacity: 1;
}

input#to{
  display: none;
  position: relative;
}

View another examples Add Own solution

Awgiedawgie 440220 points

                                    HTML&lt;div id=&quot;container&quot;&gt;
&lt;!-- Item 1 --&gt;
  &lt;div class=&quot;accordion&quot;&gt;
    &lt;label for=&quot;tm&quot; class=&quot;accordionitem&quot;&gt;
    &lt;h2&gt;Item 1 &lt;span class=&quot;arrow&quot;&gt;&raquo;&lt;/span&gt;&lt;/h2&gt;&lt;/label&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;tm&quot;/&gt;
    &lt;p class=&quot;hiddentext&quot;&gt;One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed  into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;!-- Item 2 --&gt;
  &lt;div class=&quot;accordion&quot;&gt;
    &lt;label for=&quot;tn&quot; class=&quot;accordionitem&quot;&gt;
    &lt;h2&gt;Item 2 &lt;span class=&quot;arrow&quot;&gt;&raquo;&lt;/span&gt;&lt;/h2&gt;&lt;/label&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;tn&quot;/&gt;
    &lt;p class=&quot;hiddentext&quot;&gt;One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;!-- Item 3 --&gt;
  &lt;div class=&quot;accordion&quot;&gt;
    &lt;label for=&quot;to&quot; class=&quot;accordionitem&quot;&gt;
    &lt;h2&gt;Item 3 &lt;span class=&quot;arrow&quot;&gt;&raquo;&lt;/span&gt;&lt;/h2&gt;&lt;/label&gt;
    &lt;input type=&quot;checkbox&quot; id=&quot;to&quot;/&gt;
    &lt;p class=&quot;hiddentext&quot;&gt;One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections.&lt;/p&gt;
  &lt;/div&gt;
&lt;/div&gt;

Thank you! 8