/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

3 votes193 views1 answer
Nav b5
Html
0 vote207 views1 answer
Ok siri
Html
0 vote175 views1 answer
Inline vuetify
Html
21 votes192 views4 answers
Link in markdown
Html
1 vote190 views1 answer
Html color black
Html
6 votes193 views1 answer
Make div clickable
Html
0 vote184 views2 answers
Signature template html
Html
0 vote206 views1 answer
Macbook boot in verbose mode
Html
0 vote205 views2 answers
How to hide youtube watermark from embedded video :2021
Html
1 vote216 views3 answers
Html button click url
Html