とにかく、やってみなはれ。やる前から諦める奴は、いちばんつまらん人間だ。3

Pure CSS Accordion with :checked

今更感がすごいのですが、CSS のみの accordion です。
WEBの業務に従事しているわけでもない素人の備忘録的な投稿です。

demo
code

HTML

    <div class="accordion-container">
        <input class="accordion-switch" type="checkbox" id ="accordion-switch">
        <div   class="accordion-header">
            <div   class="accordion-xxxxer-item">header1</div>
            <label class="accordion-sensor"                 for="accordion-switch">
                <span class="accordion-show">OPEN </span>
                <span class="accordion-hide">CLOSE</span>
            </label>
            <div   class="accordion-xxxxer-item">header2</div>
        </div>
        <div   class="accordion-window">
            contents
        </div>
        <div   class="accordion-footer">
            <div   class="accordion-xxxxer-item">footer1</div>
            <label class="accordion-sensor"                 for="accordion-switch">
                <span class="accordion-show">READ MORE</span>
                <span class="accordion-hide">CLOSE    </span>
            </label>
            <div   class="accordion-xxxxer-item">footer2</div>
        </div>
    </div>

CSS

/* --------------------------------------------------------------------------------------------------------
   Pure CSS Accordion
   ----------------------------------------------------------------------------------------------------- */
.accordion-switch {
    display: none;
}
.accordion-sensor {
    cursor: pointer;
    color: blue;
}
.accordion-window {
    position: relative;
    overflow: hidden;
    transition: max-height 1s;
    max-height: 0;
}
.accordion-switch:checked ~ .accordion-window {
    max-height: 100vh;
}
.accordion-window::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient( rgba(255,255,255,0), rgba(255,255,255,1) );
    pointer-events: none;
    transition: opacity 1s;
    opacity: 1;
}
.accordion-switch:checked ~ .accordion-window::after {
    opacity: 0;
}
/* ----------------------------------------------------------------------------------------------------- */
.accordion-switch         ~  .accordion-header .accordion-sensor .accordion-hide, 
.accordion-switch:checked ~  .accordion-header .accordion-sensor .accordion-show, 
.accordion-switch         ~  .accordion-footer .accordion-sensor .accordion-hide, 
.accordion-switch:checked ~  .accordion-footer .accordion-sensor .accordion-show, 
.accordion-switch         ~* .accordion-header .accordion-sensor .accordion-hide, 
.accordion-switch:checked ~* .accordion-header .accordion-sensor .accordion-show, 
.accordion-switch         ~* .accordion-footer .accordion-sensor .accordion-hide, 
.accordion-switch:checked ~* .accordion-footer .accordion-sensor .accordion-show {
    display: none;
}
.accordion-switch         ~  .accordion-header .accordion-sensor .accordion-show, 
.accordion-switch:checked ~  .accordion-header .accordion-sensor .accordion-hide, 
.accordion-switch         ~  .accordion-footer .accordion-sensor .accordion-show,
.accordion-switch:checked ~  .accordion-footer .accordion-sensor .accordion-hide, 
.accordion-switch         ~* .accordion-header .accordion-sensor .accordion-show, 
.accordion-switch:checked ~* .accordion-header .accordion-sensor .accordion-hide, 
.accordion-switch         ~* .accordion-footer .accordion-sensor .accordion-show,
.accordion-switch:checked ~* .accordion-footer .accordion-sensor .accordion-hide  {
    display: inline;
}
/* ----------------------------------------------------------------------------------------------------- */
                            .accordion-window.accordion-windowMinHeight100px { max-height: 100px; }
                            .accordion-window.accordion-windowMinHeight200px { max-height: 200px; }
                            .accordion-window.accordion-windowMinHeight300px { max-height: 300px; }
                            .accordion-window.accordion-windowMinHeight400px { max-height: 400px; }
                            .accordion-window.accordion-windowMinHeight500px { max-height: 500px; } /*
                            .accordion-window.accordion-windowMinYourSetting { max-height:        } */
.accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight100px { max-height: 100px; }
.accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight200px { max-height: 200px; }
.accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight300px { max-height: 300px; }
.accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight400px { max-height: 400px; }
.accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight500px { max-height: 500px; }
.accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight600px { max-height: 600px; }
.accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight700px { max-height: 700px; }
.accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight800px { max-height: 800px; }
.accordion-switch:checked ~ .accordion-window.accordion-windowMaxHeight900px { max-height: 900px; } /*
.accordion-switch:checked ~ .accordion-window.accordion-windowMaxYourSetting { max-height:        } */
/* --------------------------------------------------------------------------------------------------------
   Position
   ----------------------------------------------------------------------------------------------------- */
.accordion-sensor-left,   
.accordion-sensor-right,  
.accordion-sensor-center {
    display: flex;
}
.accordion-sensor-left   >                     .accordion-xxxxer-item:first-child { display: none;   }
.accordion-sensor-left   > .accordion-sensor + .accordion-xxxxer-item { flex: 1; text-align: right;  }
.accordion-sensor-left   > .accordion-sensor {                                   text-align: left;   }
.accordion-sensor-right  >                     .accordion-xxxxer-item { flex: 1; text-align: left;   }
.accordion-sensor-right  > .accordion-sensor + .accordion-xxxxer-item {             display: none;   }
.accordion-sensor-right  > .accordion-sensor {                                   text-align: right;  }
.accordion-sensor-center >                     .accordion-xxxxer-item { flex: 2; text-align: left;   }
.accordion-sensor-center > .accordion-sensor + .accordion-xxxxer-item { flex: 2; text-align: right;  }
.accordion-sensor-center > .accordion-sensor {                                   text-align: center; }
.accordion-sensor-wide-left   .accordion-xxxxer-item, 
.accordion-sensor-wide-right  .accordion-xxxxer-item, 
.accordion-sensor-wide-center .accordion-xxxxer-item {
    display: none;
}
.accordion-sensor-wide-left   .accordion-sensor { display: block; text-align: left;   }
.accordion-sensor-wide-right  .accordion-sensor { display: block; text-align: right;  }
.accordion-sensor-wide-center .accordion-sensor { display: block; text-align: center; }
/* --------------------------------------------------------------------------------------------------------
   Color
   ----------------------------------------------------------------------------------------------------- */
.accordion-header.accordion-black                    { color: white; background-color: black; }
.accordion-footer.accordion-black                    { color: white; background-color: black; }
.accordion-header.accordion-black  .accordion-sensor { color: white; background-color: black; }
.accordion-footer.accordion-black  .accordion-sensor { color: white; background-color: black; }
.accordion-header.accordion-black  .accordion-sensor { color: white; }
.accordion-footer.accordion-black  .accordion-sensor { color: white; }
.accordion-header.accordion-silver                   { color: black; background-color: gainsboro; }
.accordion-footer.accordion-silver                   { color: black; background-color: gainsboro; }
.accordion-header.accordion-silver .accordion-sensor { color: black; background-color: gainsboro; }
.accordion-footer.accordion-silver .accordion-sensor { color: black; background-color: gainsboro; }
.accordion-header.accordion-silver .accordion-sensor { color: black; }
.accordion-footer.accordion-silver .accordion-sensor { color: black; }
.accordion-header.accordion-red                      { color: white; background-color: firebrick; }
.accordion-footer.accordion-red                      { color: white; background-color: firebrick; }
.accordion-header.accordion-red    .accordion-sensor { color: white; background-color: firebrick; }
.accordion-footer.accordion-red    .accordion-sensor { color: white; background-color: firebrick; }
.accordion-header.accordion-red    .accordion-sensor { color: white; }
.accordion-footer.accordion-red    .accordion-sensor { color: white; }
.accordion-header.accordion-blue                     { color: white; background-color: navy; }
.accordion-footer.accordion-blue                     { color: white; background-color: navy; }
.accordion-header.accordion-blue   .accordion-sensor { color: white; background-color: navy; }
.accordion-footer.accordion-blue   .accordion-sensor { color: white; background-color: navy; }
.accordion-header.accordion-blue   .accordion-sensor { color: white; }
.accordion-footer.accordion-blue   .accordion-sensor { color: white; }
.accordion-header.accordion-teal                     { color: white; background-color: teal; }
.accordion-footer.accordion-teal                     { color: white; background-color: teal; }
.accordion-header.accordion-teal   .accordion-sensor { color: white; background-color: teal; }
.accordion-footer.accordion-teal   .accordion-sensor { color: white; background-color: teal; }
.accordion-header.accordion-teal   .accordion-sensor { color: white; }
.accordion-footer.accordion-teal   .accordion-sensor { color: white; }
.accordion-header.accordion-green                    { color: white; background-color: darkgreen; }
.accordion-footer.accordion-green                    { color: white; background-color: darkgreen; }
.accordion-header.accordion-green  .accordion-sensor { color: white; background-color: darkgreen; }
.accordion-footer.accordion-green  .accordion-sensor { color: white; background-color: darkgreen; }
.accordion-header.accordion-green  .accordion-sensor { color: white; }
.accordion-footer.accordion-green  .accordion-sensor { color: white; }
.accordion-header.accordion-orange                   { color: white; background-color: darkorange; }
.accordion-footer.accordion-orange                   { color: white; background-color: darkorange; }
.accordion-header.accordion-orange .accordion-sensor { color: white; background-color: darkorange; }
.accordion-footer.accordion-orange .accordion-sensor { color: white; background-color: darkorange; }
.accordion-header.accordion-orange .accordion-sensor { color: white; }
.accordion-footer.accordion-orange .accordion-sensor { color: white; }
.accordion-header.accordion-maroon                   { color: white; background-color: maroon; }
.accordion-footer.accordion-maroon                   { color: white; background-color: maroon; }
.accordion-header.accordion-maroon .accordion-sensor { color: white; background-color: maroon; }
.accordion-footer.accordion-maroon .accordion-sensor { color: white; background-color: maroon; }
.accordion-header.accordion-maroon .accordion-sensor { color: white; }
.accordion-footer.accordion-maroon .accordion-sensor { color: white; }
.accordion-header.accordion-gray                     { color: white; background-color: darkslategray; }
.accordion-footer.accordion-gray                     { color: white; background-color: darkslategray; }
.accordion-header.accordion-gray   .accordion-sensor { color: white; background-color: darkslategray; }
.accordion-footer.accordion-gray   .accordion-sensor { color: white; background-color: darkslategray; }
.accordion-header.accordion-gray   .accordion-sensor { color: white; }
.accordion-footer.accordion-gray   .accordion-sensor { color: white; }
:root .accordion-header.accordion-sensor-wide-left  { background-color: transparent; }
:root .accordion-header.accordion-sensor-wide-right { background-color: transparent; }
:root .accordion-header.accordion-sensor-wide-center{ background-color: transparent; }
:root .accordion-footer.accordion-sensor-wide-left  { background-color: transparent; }
:root .accordion-footer.accordion-sensor-wide-right { background-color: transparent; }
:root .accordion-footer.accordion-sensor-wide-center{ background-color: transparent; }
/* --------------------------------------------------------------------------------------------------------
   Color for Test
   ----------------------------------------------------------------------------------------------------- */
.accordion-container.accordion-test-color {                          background: #cccccc; color: #000000; }
.accordion-container.accordion-test-color .accordion-header {        background: #ffe0e0; color: #000000; }
.accordion-container.accordion-test-color .accordion-window {        background: #e0ffe0; color: #000000; }
.accordion-container.accordion-test-color .accordion-window::after { background: linear-gradient( rgba(224,255,224,0), rgba(224,255,224,1) ); }
.accordion-container.accordion-test-color .accordion-footer {        background: #e0e0ff; color: #000000; }
.accordion-container.accordion-test-color .accordion-sensor {        background: #ffff00; color: #ff0000; }
/* --------------------------------------------------------------------------------------------------------
   Shape
   ----------------------------------------------------------------------------------------------------- */
.accordion-header.accordion-sensor-rounded .accordion-sensor, 
.accordion-footer.accordion-sensor-rounded .accordion-sensor {
    border: solid  .1em;
    border-radius: .2em;
}
.accordion-header.accordion-sensor-angular .accordion-sensor, 
.accordion-footer.accordion-sensor-angular .accordion-sensor {
    border: solid  .1em;
    border-radius: 0;
}
/* --------------------------------------------------------------------------------------------------------
   Size
   ----------------------------------------------------------------------------------------------------- */
.accordion-header.accordion-size-x1, 
.accordion-footer.accordion-size-x1 {
    font-size: 1rem;
}
.accordion-header.accordion-size-x2, 
.accordion-footer.accordion-size-x2 {
    font-size: 2rem;
}
.accordion-header.accordion-size-x3, 
.accordion-footer.accordion-size-x3 {
    font-size: 3rem;
}
/* --------------------------------------------------------------------------------------------------------
   Decoration
   ----------------------------------------------------------------------------------------------------- */
.accordion-header.accordion-decoration-01 {
    margin-bottom: .2em;
}
.accordion-footer.accordion-decoration-01 {
    margin-top: .2em;
}
.accordion-header.accordion-decoration-01, 
.accordion-footer.accordion-decoration-01 {
    padding:  .5em 1em .5em 1em;
}
.accordion-header.accordion-decoration-01.accordion-sensor-wide-left, 
.accordion-footer.accordion-decoration-01.accordion-sensor-wide-left, 
.accordion-header.accordion-decoration-01.accordion-sensor-wide-right, 
.accordion-footer.accordion-decoration-01.accordion-sensor-wide-right, 
.accordion-header.accordion-decoration-01.accordion-sensor-wide-center, 
.accordion-footer.accordion-decoration-01.accordion-sensor-wide-center {
    padding:  0 0 0 0;
}
/* ----------------------------------------------------------------------------------------------------- */

関連記事