/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 vote317 views1 answer
Bootstrap form-control inline
Html
3 votes325 views1 answer
Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.
Html
0 vote320 views1 answer
Thymeleaf for each limit size
Html
14 votes332 views6 answers
Html date input
Html
0 vote338 views1 answer
Symfony twig form value
Html
8 votes317 views2 answers
Numbered list bootstrap
Html
0 vote336 views3 answers
How to Create a “Sticky” Floating Footer Bar in WordPress
Html
0 vote327 views1 answer
Background image html mdn
Html
13 votes314 views5 answers
Bootstrap align right
Html
2 votes320 views2 answers
Whatsapp html code for website
Html