Answers for "accordion css"

1

html faq

<html>
  <body bgcolor="E1C699">
  <ul>
    <li><strong>What is (WEBSITE)?</strong> <br> <br><em><strong>(WEBSITE)</strong> is a/an (DEATILS).</em><br></li>
    <br><li><strong>How do I post a (na)</strong> <br> <br><em>To create a (na), simply, go to the <strong>(website) homepage</strong> and click "Create a (na)"</em></li>
  </ul>
<style>
        body {
          background-color: navy;
        }
      </style>
  </body>
</html>
Posted by: Guest on June-21-2020
0

pure css accordion

HTML<div id="container">
<!-- Item 1 -->
  <div class="accordion">
    <label for="tm" class="accordionitem">
    <h2>Item 1 <span class="arrow">»</span></h2></label>
    <input type="checkbox" id="tm"/>
    <p class="hiddentext">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.</p>
  </div>
  
  <!-- Item 2 -->
  <div class="accordion">
    <label for="tn" class="accordionitem">
    <h2>Item 2 <span class="arrow">»</span></h2></label>
    <input type="checkbox" id="tn"/>
    <p class="hiddentext">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.</p>
  </div>
  
  <!-- Item 3 -->
  <div class="accordion">
    <label for="to" class="accordionitem">
    <h2>Item 3 <span class="arrow">»</span></h2></label>
    <input type="checkbox" id="to"/>
    <p class="hiddentext">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.</p>
  </div>
</div>
Posted by: Guest on October-26-2020
0

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;
}
Posted by: Guest on October-26-2020

Browse Popular Code Answers by Language