Tips for achieving seamless expansion and eliminating grid row gaps by utilizing hidden elements in CSS

Question

Tips for achieving seamless expansion and eliminating grid row gaps by utilizing hidden elements in CSS

I'm currently developing a web design that includes a section with both visible and hidden content. I've added a button to smoothly reveal the hidden content using a transition effect. However, I'm encountering a couple of challenges:

Even though the expandable feature is functional, the transition effect isn't as seamless as I'd prefer. I've utilized a CSS transition to modify the grid-template-rows property, but it's not delivering the level of smoothness I desire. How can I enhance the transition effect when revealing the hidden content?

Grid Row-Gap Reservation: The hidden content is organized in a grid layout, and despite being hidden, the row-gap seems to be reserving unnecessary space, resulting in a visual gap in the design. I aim to avoid this row-gap reservation for hidden elements. How can I adjust my CSS to ensure that the row-gap only applies to visible elements and not hidden ones?

Here is a simplified version of the HTML, CSS, and JavaScript code I'm working with: https://codepen.io/korneliuszburian/pen/LYaqyvN

javascript html css grid

Answer 1

Answer №1

When you added display: grid to .cards--hidden, it transitioned to .cards--visible, causing the container to change to block. As a result, grid-template-rows: 1fr lost its effect and transitioned as well.

To resolve this issue, you can transfer these rules to the general selector .cards for the transition to function as intended.

.cards {
  display: grid;
  transition: grid-template-rows 300ms ease-in-out;
}

document.addEventListener("DOMContentLoaded", () => {
  const button = document.querySelector(".btn__expand");
  let currentIndex = 0;
  let hiddenGroups = document.querySelectorAll(".cards--hidden");

  button.addEventListener("click", function() {
    if (currentIndex < hiddenGroups.length) {
      hiddenGroups[currentIndex].classList.remove("cards--hidden");
      hiddenGroups[currentIndex].classList.add("cards--active");
      currentIndex++;
    }

    if (currentIndex >= hiddenGroups.length) {
      button.style.display = "none";
    }
  });
});

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  padding: 20px;
}

.visible,
.cards--hidden {
  padding: 15px;
  background-color: #fff;
  border: 1px solid #000;
  box-shadow: 5px 5px 0px #000;
}

.wrapper {
  border: 2px solid #000;
  padding: 10px;
  min-height: 0;
  overflow: hidden;
}

.items {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #e0e0e0;
  border: 1px solid #000;
}

.item__title h2 {
  font-size: 20px;
  margin: 0 0 5px 0;
  color: #000;
}

.item__title p {
  font-size: 16px;
  margin: 0;
  color: #333;
}

.cards {
  display: grid;
  transition: grid-template-rows 300ms ease-in-out;
}

.cards--hidden {
  grid-template-rows: 0fr;
  overflow: hidden;
}

.btn__expand {
  cursor: pointer;
  margin-top: 20px;
}

/* hide the wrapper content */
.cards--hidden .wrapper {
  padding: 0;
  border: none;
}

/* add gap to visible items */
.visible, .cards--active {
  grid-template-rows: 1fr;
  margin-bottom: 20px;
}

<section>
  <div class="visible">
    <div class="wrapper">
      <div class="items">
        <div class="item__title">
          <h2>Visible Item 1 Title</h2>
          <p>Description for Visible Item 1</p>
        </div>
      </div>
      <div class="items">
        <h2>Visible Item 2 Title</h2>
        <p>Description for Visible Item 2</p>
      </div>
      <div class="items">
        <h2>Visible Item 3 Title</h2>
        <p>Description for Visible Item 3</p>
      </div>
    </div>
  </div>
  <div class="cards cards--hidden">
    <div class="wrapper">
      <div class="items">
        <div class="item__title">
          <h2>Hidden Item 1 Title</h2>
          <p>Description for Hidden Item 1</p>
        </div>
      </div>
      <div class="items">
        <h2>Hidden Item 2 Title</h2>
        <p>Description for Hidden Item 2</p>
      </div>
      <div class="items">
        <h2>Hidden Item 3 Title</h2>
        <p>Description for Hidden Item 3</p>
      </div>
    </div>
  </div>
  <div class="cards cards--hidden">
    <div class="wrapper">
      <div class="items">
        <div class="item__title">
          <h2>Hidden Item 1 Title</h2>
          <p>Description for Hidden Item 1</p>
        </div>
      </div>
      <div class="items">
        <h2>Hidden Item 2 Title</h2>
        <p>Description for Hidden Item 2</p>
      </div>
      <div class="items">
        <h2>Hidden Item 3 Title</h2>
        <p>Description for Hidden Item 3</p>
      </div>
    </div>
  </div>
  <div class="btn__expand">
    <span class="btn__label">Expand all data</span>
  </div>
</section>

Answer 2

When you added display: grid to .cards--hidden, it transitioned to .cards--visible, causing the container to change to block. As a result, grid-template-rows: 1fr lost its effect and transitioned as well.

To resolve this issue, you can transfer these rules to the general selector .cards for the transition to function as intended.

.cards {
  display: grid;
  transition: grid-template-rows 300ms ease-in-out;
}

document.addEventListener("DOMContentLoaded", () => {
  const button = document.querySelector(".btn__expand");
  let currentIndex = 0;
  let hiddenGroups = document.querySelectorAll(".cards--hidden");

  button.addEventListener("click", function() {
    if (currentIndex < hiddenGroups.length) {
      hiddenGroups[currentIndex].classList.remove("cards--hidden");
      hiddenGroups[currentIndex].classList.add("cards--active");
      currentIndex++;
    }

    if (currentIndex >= hiddenGroups.length) {
      button.style.display = "none";
    }
  });
});

body {
  background-color: #f0f0f0;
  font-family: Arial, sans-serif;
  padding: 20px;
}

.visible,
.cards--hidden {
  padding: 15px;
  background-color: #fff;
  border: 1px solid #000;
  box-shadow: 5px 5px 0px #000;
}

.wrapper {
  border: 2px solid #000;
  padding: 10px;
  min-height: 0;
  overflow: hidden;
}

.items {
  margin-bottom: 10px;
  padding: 10px;
  background-color: #e0e0e0;
  border: 1px solid #000;
}

.item__title h2 {
  font-size: 20px;
  margin: 0 0 5px 0;
  color: #000;
}

.item__title p {
  font-size: 16px;
  margin: 0;
  color: #333;
}

.cards {
  display: grid;
  transition: grid-template-rows 300ms ease-in-out;
}

.cards--hidden {
  grid-template-rows: 0fr;
  overflow: hidden;
}

.btn__expand {
  cursor: pointer;
  margin-top: 20px;
}

/* hide the wrapper content */
.cards--hidden .wrapper {
  padding: 0;
  border: none;
}

/* add gap to visible items */
.visible, .cards--active {
  grid-template-rows: 1fr;
  margin-bottom: 20px;
}

<section>
  <div class="visible">
    <div class="wrapper">
      <div class="items">
        <div class="item__title">
          <h2>Visible Item 1 Title</h2>
          <p>Description for Visible Item 1</p>
        </div>
      </div>
      <div class="items">
        <h2>Visible Item 2 Title</h2>
        <p>Description for Visible Item 2</p>
      </div>
      <div class="items">
        <h2>Visible Item 3 Title</h2>
        <p>Description for Visible Item 3</p>
      </div>
    </div>
  </div>
  <div class="cards cards--hidden">
    <div class="wrapper">
      <div class="items">
        <div class="item__title">
          <h2>Hidden Item 1 Title</h2>
          <p>Description for Hidden Item 1</p>
        </div>
      </div>
      <div class="items">
        <h2>Hidden Item 2 Title</h2>
        <p>Description for Hidden Item 2</p>
      </div>
      <div class="items">
        <h2>Hidden Item 3 Title</h2>
        <p>Description for Hidden Item 3</p>
      </div>
    </div>
  </div>
  <div class="cards cards--hidden">
    <div class="wrapper">
      <div class="items">
        <div class="item__title">
          <h2>Hidden Item 1 Title</h2>
          <p>Description for Hidden Item 1</p>
        </div>
      </div>
      <div class="items">
        <h2>Hidden Item 2 Title</h2>
        <p>Description for Hidden Item 2</p>
      </div>
      <div class="items">
        <h2>Hidden Item 3 Title</h2>
        <p>Description for Hidden Item 3</p>
      </div>
    </div>
  </div>
  <div class="btn__expand">
    <span class="btn__label">Expand all data</span>
  </div>
</section>

Tips for achieving seamless expansion and eliminating grid row gaps by utilizing hidden elements in CSS

Answer №1

Similar questions

What could be causing my search function to not recognize special characters?

Webpack Is Having Trouble Parsing My JavaScript Code

I'm looking for a solution to correct the array output from my function in node

Shatter a connection into pieces across various lines

Retrieve all entries in MongoDB using Mongoose where a particular date falls within a specified date range

What is the best way to identify a specific list item from a dropdown menu and determine its position on

Is it possible to use display:grid with a parent element set to a height of 100%

Adjusting Picture Sizes to Fit the Dimensions of a Photo Frame

BeautifulSoup: A guide on retrieving information following a designated HTML element

Information is not appearing in the dropdown menu

Trouble with CSS Class Showing Up Only When Hovered

Using Python to retrieve data from MySQL and display it in HTML

Sending data from JavaScript to PHP using the POST method

Discover more in React about using ellipses (...) with dangerouslySetInnerHTML

Once the grunt build process is complete, execute "heroku run fileName" to launch the

Creating automatic page additions using Node.js on Heroku?

The image slideshow on W3 Schools displays images in a stacked formation

How to retrieve the same value from multiple selections using Vanilla JavaScript and multiple select options?

Issues arise when setting a delay for CSS transitions to occur due to the

Troubleshooting an HTML Design Flaw: How to create a 3x3 table with