/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

35 votes212 views7 answers
Meta
Html
0 vote238 views1 answer
Html schriftart einbinden
Html
18 votes221 views3 answers
Html email links
Html
0 vote227 views1 answer
Does redux has a unidirectional data flow?
Html
2 votes210 views3 answers
Coronavirus tips
Html
0 vote210 views1 answer
Tailwind CSS tabs
Html
0 vote245 views1 answer
A column inside another column bootstrap html
Html
5 votes205 views2 answers
Innerhtml angular
Html
0 vote210 views1 answer
Html make page not zoomable
Html
0 vote211 views1 answer
OpenGraph 4
Html