Component Library
Sign out

Accordion 

<div class="acl-accordion">
    <div class="acl-accordion__panel">
        <input type="checkbox" id="chck1">
        <label class="acl-accordion__panel-label" for="chck1">Item 1</label>
        <div class="acl-accordion__panel-content">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
        </div>
    </div>
    <div class="acl-accordion__panel">
        <input type="checkbox" id="chck2">
        <label class="acl-accordion__panel-label" for="chck2">Item 2</label>
        <div class="acl-accordion__panel-content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!
        </div>
    </div>
    <div class="acl-accordion__panel">
        <input type="checkbox" id="chck3">
        <label class="acl-accordion__panel-label" for="chck3">Item 3</label>
        <div class="acl-accordion__panel-content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!
        </div>
    </div>
</div>
 
<div class="acl-accordion">
    <div class="acl-accordion__panel">
        <input type="checkbox" id="chck1">
        <label class="acl-accordion__panel-label" for="chck1">Item 1</label>
        <div class="acl-accordion__panel-content">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
        </div>
    </div>
    <div class="acl-accordion__panel">
        <input type="checkbox" id="chck2">
        <label class="acl-accordion__panel-label" for="chck2">Item 2</label>
        <div class="acl-accordion__panel-content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!
        </div>
    </div>
    <div class="acl-accordion__panel">
        <input type="checkbox" id="chck3">
        <label class="acl-accordion__panel-label" for="chck3">Item 3</label>
        <div class="acl-accordion__panel-content">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!
        </div>
    </div>
</div>
 
/* No context defined. */
  • Content: 
    .acl-accordion {
    overflow: hidden;

    input {
        position: absolute;
        opacity: 0;
        z-index: -1;
    }

    input:checked {
        ~ .acl-accordion__label .acl-accordion__cta {
            transform: rotate(90deg);
        }

        ~ .acl-accordion__label {
            background-color: rgba(70, 204, 194, 0.15);
            border-right: 3px solid #46ccc2;
        }
        ~ .acl-accordion__panel-content {
            max-height: 100vh;
            padding: 1em;
        }
    }
}

.acl-accordion__panel {
    width: 100%;
    overflow: hidden;

    &-label {
        display: flex;
        justify-content: space-between;
        padding: 1em;
        font-weight: bold;

        &::after {
            content: '\276F';
            width: 1em;
            height: 1em;
            text-align: center;
            transition: all 0.35s;
        }
    }
    &-content {
        max-height: 0;
        padding: 0 1em;
        background: white;
        transition: all 0.35s;
    }
    &-close {
        display: flex;
        justify-content: flex-end;
        padding: 1em;
        font-size: 0.75em;
        cursor: pointer;
    }
}
  • URL: /components/raw/accordion/acl-accordion.scss
  • Filesystem Path: src/components/accordion/acl-accordion.scss
  • Size: 1.2 KB

No notes defined.