CODEWITHSUNDEEP
htmlcss
user310291
user310291

Reputation: 38190

Pure CSS nested accordion doesn't work as expected

I'm trying to make this pure CSS accordion.

My version

Why it does not work? What do I need to change to make it work?

I tried this:

HTML without CSS:

      <h1>CSS + HTML only Accordion Element</h1>
  <ul>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Languages Used</h2>
      <p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>How it Works</h2>
      <p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
    </li>
    <li>
      <input type="checkbox" checked>
      <i></i>
      <h2>Points of Interest</h2>
      <p>
                <ul>
              <li>
                <input type="checkbox" checked>
                <i></i>
                <h2>Languages Used</h2>
                <p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>
              </li>
              <li>
                <input type="checkbox" checked>
                <i></i>
                <h2>How it Works</h2>
                <p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>
              </li>
              <li>
                <input type="checkbox" checked>
                <i></i>
                <h2>Points of Interest</h2>
                <p></p>
              </li>
            </ul>
      </p>
    </li>
  </ul>

HTML with CSS:

    <head>
      <meta charset="utf-8">
      <title>

      </title>
      <link rel="stylesheet" href="interlocuteurs/css/layout_1_column.css">
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

      <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Titillium+Web:300,700,300italic'>

          <style>
          /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
          .transition, p, ul li i:before, ul li i:after {
      transition: all 0.25s ease-in-out;
    }

    .flipIn, h1, ul li {
      animation: flipdown 0.5s ease both;
    }

    .no-select, h2 {
      -webkit-tap-highlight-color: transparent;
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -khtml-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    html {
      width: 100%;
      height: 100%;
      perspective: 900;
      overflow-y: scroll;
      background-color: #dce7eb;
      font-family: "Titillium Web", sans-serif;
      color: rgba(48, 69, 92, 0.8);
    }

    body {
      min-height: 0;
      display: inline-block;
      position: relative;
      left: 50%;
      margin: 90px 0;
      transform: translate(-50%, 0);
      box-shadow: 0 10px 0 0 #008ae6 inset;
      background-color: #fefffa;
      max-width: 80%;
      padding: 30px;
    }
    @media (max-width: 550px) {
      body {
        box-sizing: border-box;
        transform: translate(0, 0);
        max-width: 100%;
        min-height: 100%;
        margin: 0;
        left: 0;
      }
    }

    h1, h2 {
      color: #008ae6;
    }

    h1 {
      text-transform: uppercase;
      font-size: 36px;
      line-height: 42px;
      letter-spacing: 3px;
      font-weight: 100;
    }

    h2 {
      font-size: 26px;
      line-height: 34px;
      font-weight: 300;
      letter-spacing: 1px;
      display: block;
      background-color: #fefffa;
      margin: 0;
      cursor: pointer;
    }

    p {
      color: rgba(48, 69, 92, 0.8);
      font-size: 17px;
      line-height: 26px;
      letter-spacing: 1px;
      position: relative;
      overflow: hidden;
      max-height: 800px;
      opacity: 1;
      transform: translate(0, 0);
      margin-top: 14px;
      z-index: 2;
    }

    ul {
      list-style: none;
      perspective: 900;
      padding: 0;
      margin: 0;
    }
    ul li {
      position: relative;
      padding: 0;
      margin: 0;
      padding-bottom: 4px;
      padding-top: 18px;
      border-top: 1px dotted #dce7eb;
    }
    ul li:nth-of-type(1) {
      animation-delay: 0.5s;
    }
    ul li:nth-of-type(2) {
      animation-delay: 0.75s;
    }
    ul li:nth-of-type(3) {
      animation-delay: 1s;
    }
    ul li:last-of-type {
      padding-bottom: 0;
    }
    ul li i {
      position: absolute;
      transform: translate(-6px, 0);
      margin-top: 16px;
      right: 0;
    }
    ul li i:before, ul li i:after {
      content: "";
      position: absolute;
      background-color: #008ae6;
      width: 3px;
      height: 9px;
    }
    ul li i:before {
      transform: translate(-2px, 0) rotate(45deg);
    }
    ul li i:after {
      transform: translate(2px, 0) rotate(-45deg);
    }
    ul li input[type=checkbox] {
      position: absolute;
      cursor: pointer;
      width: 100%;
      height: 100%;
      z-index: 1;
      opacity: 0;
    }
    ul li input[type=checkbox]:checked ~ p {
      margin-top: 0;
      max-height: 0;
      opacity: 0;
      transform: translate(0, 50%);
    }
    ul li input[type=checkbox]:checked ~ i:before {
      transform: translate(2px, 0) rotate(45deg);
    }
    ul li input[type=checkbox]:checked ~ i:after {
      transform: translate(-2px, 0) rotate(-45deg);
    }

    @keyframes flipdown {
      0% {
        opacity: 0;
        transform-origin: top center;
        transform: rotateX(-90deg);
      }
      5% {
        opacity: 1;
      }
      80% {
        transform: rotateX(8deg);
      }
      83% {
        transform: rotateX(6deg);
      }
      92% {
        transform: rotateX(-3deg);
      }
      100% {
        transform-origin: top center;
        transform: rotateX(0deg);
      }
    }

        </style>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
    </head>

Upvotes: 0

Views: 871

Answers (2)

Asons
Asons

Reputation: 87191

Here is an updated codepen that works, with the following updated CSS and markup, where the trick is to only target the first div on each input (also swapped p for div for a valid sub structure)

What I did was to add a class for each level (lev1/lev2), applied to both the input and the div, which makes it possible show/hide one level at the time, and then use the very same in the CSS

After a second thought I saw a class per level was not necessary so I simplified it

CSS

input[type=checkbox]
  position: absolute
  cursor: pointer
  width: 100%
  height: 100%
  z-index: 1
  opacity: 0

  &:checked

    &~div
      margin-top: 0
      max-height: 0
      opacity: 0
      transform: translate( 0 , 50% )

HTML

  <li>
    <input type="checkbox" checked>
    <i></i>
    <h2>Points of Interest</h2>
    <div>
      <ul>
        <li>
          <input type="checkbox" checked>
          <i></i>
          <h2>Sub 1 Points of Interest</h2>
          <div>....</div>
        </li>
        <li>
          <input type="checkbox" checked>
          <i></i>
          <h2>Sub 2 Points of Interest</h2>
          <div>....</div>
        </li>
      </ul>
    </div>
  </li>

Upvotes: 1

b.doe
b.doe

Reputation: 134

Remove that weird ul tag, and write 

<p>Lorem ipsum dolor</p>

, there shouldn't be that at all.

Just remove it and keep HTML markup as it was in original codepen example. And your pen will work perfectly (except animation on loading, because you didn't set for all li childrens, only for 3).

Upvotes: 0

Related Questions