Toggle Content Visibility Using Pure CSS

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.

Asif Mughal

I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences.
I truly enjoy what I’m doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.