/Html/Collapsible accordion html+css only

Collapsible accordion html+css only

<div class="wrap-collabsible"> <input id="collapsible2" class="toggle" type="checkbox">
      <label for="collapsible2" class="lbl-toggle">About Lorem</label>
      <div class="collapsible-content">
        <div class="content-inner">
          <div class="article">
        <p>This tool is a simple yet powerful generator that will
          help you find a color palette to match your project. The color palette
          is based on the random selection of colors from the user’s input and
          preferences. &nbsp;</p>
        <p><br>
        </p>
        <p>Random color generators are helpful to designers because it allows
          them to have a variety of colors at their disposal and select the
          right one for their design, which will help them achieve a
          professional look.</p>
        <p><br>
        </p>
      </div>
        </div>
      </div>
    </div>
    
    
    ================================================================================
    
    input[type='checkbox'] {
     display: none;
}
 .wrap-collabsible {
     margin: 1.2rem 0;
}
 .lbl-toggle {
     display: block;
     font-weight: bold;
     font-family: monospace;
     font-size: 1.2rem;
     text-transform: none;
     text-align: center;
     padding: 1rem;
     color: #DDD;
     background: rgba(128, 128, 128, 0);
     cursor: pointer;
     border-radius: 7px;
     transition: all 0.25s ease-out;
}
 .lbl-toggle:hover {
     color: #FFF;
}
 .lbl-toggle::before {
     content: ' ';
     display: inline-block;
     border-top: 5px solid transparent;
     border-bottom: 5px solid transparent;
     border-left: 5px solid currentColor;
     vertical-align: middle;
     margin-right: .7rem;
     transform: translateY(-2px);
     transition: transform .2s ease-out;
}
 .toggle:checked+.lbl-toggle::before {
     transform: rotate(90deg) translateX(-3px);
}
 .collapsible-content {
     max-height: 0px;
     overflow: auto;
     transition: max-height .25s ease-in-out;
}
 .toggle:checked + .lbl-toggle + .collapsible-content {
     max-height: 350px;
}
 .toggle:checked+.lbl-toggle {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
}
 .collapsible-content .content-inner {
     background: grey(0, 105, 255, .2);
     border-bottom: 1px solid grey;
     border-bottom-left-radius: 7px;
     border-bottom-right-radius: 7px;
     padding: .5rem 1rem;
}
 .collapsible-content p {
     margin-bottom: 0;
}

Similar codes

0 vote197 views1 answer
Javascript moving text from left to right
Html
7 votes197 views2 answers
Html initial scale
Html
0 vote192 views1 answer
How to use ID in HTML
Html
32 votes185 views6 answers
Border class bootstrap
Html
11 votes179 views2 answers
Html input date format
Html
2 votes139 views1 answer
Vmware ubuntu
Html
48 votes189 views6 answers
Center div html
Html
269 votes505 views3 answers
Font asweome cdn
Html
0 vote187 views1 answer
<pre>; html tag that preserves spacing
Html
0 vote186 views1 answer
HTML starter template tags with bootstrap
Html