Toggle Content Visibility Using Pure CSS

Toggle Content Visibility Using Pure CSS
Code Snippet:Pure CSS: show/hide content (use :not(), :has() and animation-timeline)
Author: Andrej Sharapov
Published: March 21, 2024
Last Updated: March 21, 2024
Downloads: 84
License: MIT
Edit Code online: View on CodePen
Read More

This code implements a feature to toggle the visibility of content using pure CSS. It hides and shows additional cards. This method helps create collapsible sections or expand content lists without JavaScript.

You can use this code on websites to create collapsible sections or expandable content lists. It’s beneficial because it doesn’t require JavaScript, reducing page load times. This makes the website more efficient and improves user experience.

How to Toggle Content Visibility Using Pure CSS

1. Start by setting up your HTML structure. You’ll need a container element to hold your content, checkboxes to trigger the visibility toggle, and the content you want to hide or show.

<div class="container">
  <!-- hidden action-->
  <input id="more" type="checkbox"/>
  <!-- visible content-->
  <div class="cards">
    <div class="card">
      <div>card #1</div>
    </div>
    <div class="card">
      <div>card #2</div>
    </div>
    <div class="card">
      <div>card #3</div>
    </div>
    <div class="card">
      <div>card #4</div>
    </div>
    <div class="card">
      <div>card #5</div>
    </div>
    <div class="card">
      <div>card #6</div>
    </div>
  </div>
  <!-- visible action-->
  <div class="show-more-cards">
    <label for="more">show more</label>
  </div>
  <!-- hidden content-->
  <div class="cards more">
    <div class="card">
      <div>card #1</div>
    </div>
    <div class="card">
      <div>card #2</div>
    </div>
    <div class="card">
      <div>card #3</div>
    </div>
    <div class="card">
      <div>card #4</div>
    </div>
    <div class="card">
      <div>card #5</div>
    </div>
    <div class="card">
      <div>card #6</div>
    </div>
    <div class="card">
      <div>card #7</div>
    </div>
    <div class="card">
      <div>card #8</div>
    </div>
    <div class="card">
      <div>card #9</div>
    </div>
    <div class="card">
      <div>card #10</div>
    </div>
    <div class="card">
      <div>card #11</div>
    </div>
    <div class="card">
      <div>card #12</div>
    </div>
    <div class="card">
      <div>card #13</div>
    </div>
    <div class="card">
      <div>card #14</div>
    </div>
    <div class="card">
      <div>card #15</div>
    </div>
    <div class="card">
      <div>card #16</div>
    </div>
    <div class="card">
      <div>card #17</div>
    </div>
    <div class="card">
      <div>card #18</div>
    </div>
    <div class="card">
      <div>card #19</div>
    </div>
    <div class="card">
      <div>card #20</div>
    </div>
    <div class="card">
      <div>card #21</div>
    </div>
    <div class="card">
      <div>card #22</div>
    </div>
    <div class="card">
      <div>card #23</div>
    </div>
    <div class="card">
      <div>card #24</div>
    </div>
  </div>
</div>

2. Next, apply CSS to hide the checkbox input visually. You can achieve this by setting its display property to “none” or positioning it off-screen while ensuring it remains accessible for screen readers.

Utilize CSS selectors and the :checked pseudo-class to toggle the visibility of the hidden content when the checkbox input is checked. This can be achieved by targeting the adjacent sibling or child elements of the checkbox input.

html,
body {
  scrollbar-gutter: stable;
}

.container #more {
  display: none;
}
.container .more .card {
  animation: view-cards both linear;
  animation-timeline: view(y 90dvh auto);

}
.container:not(:has(input[type=checkbox]:checked)) .more {
  display: none;
}

@keyframes view-cards {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/*
 *
 * demo
 * 
*/
body{
  margin: 0;
  font-family: sans-serif;
}

.container {
  max-width: 80vw;
  margin-block: 10vh;
  margin-inline: auto;
}
.container .cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.container .cards .card {
  min-height: 25dvh;
  display: grid;
  place-content: center;
  background-color: var(--stop-color-2);
 background: #fff;
  color: #666;
  transition: scale 200ms;
  /* 			img {
  	display: block;
  	object-fit: cover;
  } */
}
.container .cards .card:hover {
  scale: 1.1;
  z-index: 1;
}
.container .show-more-cards {
  margin-block: 1rem;
  text-align: center;
}
.container .show-more-cards label {
  display: inline-flex;
  padding: 0.75rem 1.2rem;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: bold;
  background-color: #ffffff1a;
  color: #fff;
  border: 2px solid #ffffff66;
  border-radius: 0.35rem;
  transition: scale 200ms;
}
.container .show-more-cards label:hover {
  scale: 1.4;
}

If desired, you can enhance the user experience by adding animation effects to the content transition. CSS keyframes or transitions can be applied to create smooth transitions when revealing or hiding content.

Customize the styles of your toggle feature to match your website’s design aesthetic. You can adjust colors, fonts, and spacing to ensure consistency with the overall theme of your website.

That’s all! hopefully, you have successfully created Toggle Content Visibility Using Pure Css. If you have any questions or suggestions, feel free to comment below.

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

About CodeHim

Free Web Design Code & Scripts - CodeHim is one of the BEST developer websites that provide web designers and developers with a simple way to preview and download a variety of free code & scripts. All codes published on CodeHim are open source, distributed under OSD-compliant license which grants all the rights to use, study, change and share the software in modified and unmodified form. Before publishing, we test and review each code snippet to avoid errors, but we cannot warrant the full correctness of all content. All trademarks, trade names, logos, and icons are the property of their respective owners... find out more...

Please Rel0ad/PressF5 this page if you can't click the download/preview link

X