/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

-2 votes263 views2 answers
$bodyBg: #030018; $purple: #292477; $green: #13693B; $magenta: #AD2266; $blue: #1a28b3; html { box-sizing: border-box; font-size: 100%; } *, *:before, *:after { box-sizing: inherit; } body { margin: 0;
Html
28 votes272 views4 answers
Responsive meta tag
Html
0 vote245 views1 answer
Ionic checkbox value by function
Html
0 vote247 views1 answer
Tamanho fonts H1, H2, H3...
Html
0 vote255 views1 answer
Align table in middle of page
Html
0 vote279 views1 answer
How to add logo next to title html
Html
0 vote247 views1 answer
Python regex in html
Html
0 vote252 views6 answers
CSRF token in js
Html
0 vote245 views1 answer
Javascript access collections of elements
Html
5 votes281 views1 answer
Html use js variable as text
Html