When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Question

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Provided a set of elements (number unknown) where some elements should remain hidden:

<div id="root">
  <div>              1</div>
  <div class="hide"> 2</div>
  <div class="hide"> 3</div>
  <div class="hide"> 4</div>
  <div>              5</div>
  <div>              6</div>
  <div class="hide"> 7</div>
  <div>              8</div>
  <div class="hide"> 9</div>
  <div class="hide"> 10</div>
</div>

Hiding the elements with the hide class using CSS is straightforward (.hide { display: none; }). However, the objective is to replace each consecutive section of hidden elements with a replacement element, such as

<div>Some elements were hidden</div>

, or more precisely

<div>N elements hidden</div>

where N represents the number of hidden elements within that specific range (3, 1, and 2 in the provided example). Consequently, the final result would appear as follows:

1, 3 Elements hidden, 5, 6, 1 Element hidden, 8, 2 Elements hidden

Firstly, can this be accomplished exclusively through CSS? Although I cannot conceive of a direct method, there may be inventive individuals proficient in selector usage who could provide a solution :)

If resolved with only CSS is unattainable, does an alternative path exist by adding JavaScript classes + utilizing ::before/::after pseudo-elements? In other words, without modifying any actual DOM elements?

javascript css

Answer 1

Answer №1

If I were to tackle this issue, my preference would be to utilize Javascript. However, if you are determined to rely solely on CSS, there are a few clever tricks that can help you achieve the desired outcome:

.hide {
 counter-increment: hiddenElements;
 visibility: hidden;
 font-size: 0px; 
}

The use of

counter-increment: hiddenElements;

will automatically increment the value for each hidden element. The caveat is that this method does not function with display: none;. Therefore, I have resorted to employing visibility: hidden; and font-size: 0px; as alternative workarounds to produce a similar effect.

.hide + div:not(.hide):before {
  content: counter(hiddenElements) " element(s) hidden \A";
  white-space: pre;
}

This snippet outputs the number of hidden elements once it encounters a sequence of a hidden element followed by a visible one. It's crucial to have a final (potentially empty) <div></div> in place to ensure this triggers correctly.

.hide + div:not(.hide) + div {
  counter-reset: hiddenElements;
}

Following the display of the total hidden elements count, this code effectively resets the counter on the subsequent div.

A demonstration can be viewed below.

.hide {
 counter-increment: hiddenElements;
 visibility: hidden;
 font-size: 0px; 
}

.hide + div:not(.hide):before {
  content: counter(hiddenElements) " element(s) hidden \A";
  white-space: pre;
}

.hide + div:not(.hide) + div {
  counter-reset: hiddenElements;
}

<div id="root">
  <div>              1</div>
  <div class="hide"> 2</div>
  <div class="hide"> 3</div>
  <div class="hide"> 4</div>
  <div>              5</div>
  <div>              6</div>
  <div class="hide"> 7</div>
  <div>              8</div>
  <div class="hide"> 9</div>
  <div class="hide"> 10</div>
  <div></div>
</div>

While this approach indeed functions, it does come with some minor limitations. In my opinion, pursuing a JavaScript solution would be more advantageous. Feel free to post a question with the JavaScript tag, and I will gladly offer my support there as well.

Answer 2

If I were to tackle this issue, my preference would be to utilize Javascript. However, if you are determined to rely solely on CSS, there are a few clever tricks that can help you achieve the desired outcome:

.hide {
 counter-increment: hiddenElements;
 visibility: hidden;
 font-size: 0px; 
}

The use of

counter-increment: hiddenElements;

will automatically increment the value for each hidden element. The caveat is that this method does not function with display: none;. Therefore, I have resorted to employing visibility: hidden; and font-size: 0px; as alternative workarounds to produce a similar effect.

.hide + div:not(.hide):before {
  content: counter(hiddenElements) " element(s) hidden \A";
  white-space: pre;
}

This snippet outputs the number of hidden elements once it encounters a sequence of a hidden element followed by a visible one. It's crucial to have a final (potentially empty) <div></div> in place to ensure this triggers correctly.

.hide + div:not(.hide) + div {
  counter-reset: hiddenElements;
}

Following the display of the total hidden elements count, this code effectively resets the counter on the subsequent div.

A demonstration can be viewed below.

.hide {
 counter-increment: hiddenElements;
 visibility: hidden;
 font-size: 0px; 
}

.hide + div:not(.hide):before {
  content: counter(hiddenElements) " element(s) hidden \A";
  white-space: pre;
}

.hide + div:not(.hide) + div {
  counter-reset: hiddenElements;
}

<div id="root">
  <div>              1</div>
  <div class="hide"> 2</div>
  <div class="hide"> 3</div>
  <div class="hide"> 4</div>
  <div>              5</div>
  <div>              6</div>
  <div class="hide"> 7</div>
  <div>              8</div>
  <div class="hide"> 9</div>
  <div class="hide"> 10</div>
  <div></div>
</div>

While this approach indeed functions, it does come with some minor limitations. In my opinion, pursuing a JavaScript solution would be more advantageous. Feel free to post a question with the JavaScript tag, and I will gladly offer my support there as well.

Answer 3

Answer №2

While the question was not originally tagged with jQuery, I wanted to offer a solution that utilizes it:

$('#container div').each(function() {
  if ($(this).hasClass('hide')) {
    var count = $(this).nextUntil(':not(.hide)').addBack().length;
    $(this).html( count + ' elements hidden')
    $(this).next('.hide').hide()
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="container">
  <div> 1</div>
  <div class="hide"> 2</div>
  <div class="hide"> 3</div>
  <div class="hide"> 4</div>
  <div> 5</div>
  <div> 6</div>
  <div class="hide"> 7</div>
  <div> 8</div>
  <div class="hide"> 9</div>
  <div class="hide"> 10</div>
</div>

Answer 4

While the question was not originally tagged with jQuery, I wanted to offer a solution that utilizes it:

$('#container div').each(function() {
  if ($(this).hasClass('hide')) {
    var count = $(this).nextUntil(':not(.hide)').addBack().length;
    $(this).html( count + ' elements hidden')
    $(this).next('.hide').hide()
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<div id="container">
  <div> 1</div>
  <div class="hide"> 2</div>
  <div class="hide"> 3</div>
  <div class="hide"> 4</div>
  <div> 5</div>
  <div> 6</div>
  <div class="hide"> 7</div>
  <div> 8</div>
  <div class="hide"> 9</div>
  <div class="hide"> 10</div>
</div>

Answer 5

Answer №3

Have you considered utilizing the css counter technique?
Explore more about using CSS counters here

#root {
  counter-reset: section;
}

#root > div.hide {
  counter-increment: section;
  width: 0;
  height: 0;
  overflow: hidden;
}

#root > .hide + div:not(.hide):before {
  color: red;
  display: block;
  height: 100%;
  width: 100%;
  content: counter(section) " element hidden";
}

#root > .hide + div:not(.hide) + div {
  counter-reset: section;
}

Check out this live example on JSFiddle

Oops, my bad for misinterpreting the question..
Leaving my previous answer here for reference.

How do you feel about this little hack?

.hide {
  transform: scale(0.0001);
  line-height: 80%;
}

.hide:before {
  content: 'This is hidden';
  transform: scale(10000);
  width: 100%;
  height: 100%;
  display: block;
}

Demo available at: Take a look at this demo link

Answer 6

Have you considered utilizing the css counter technique?
Explore more about using CSS counters here

#root {
  counter-reset: section;
}

#root > div.hide {
  counter-increment: section;
  width: 0;
  height: 0;
  overflow: hidden;
}

#root > .hide + div:not(.hide):before {
  color: red;
  display: block;
  height: 100%;
  width: 100%;
  content: counter(section) " element hidden";
}

#root > .hide + div:not(.hide) + div {
  counter-reset: section;
}

Check out this live example on JSFiddle

Oops, my bad for misinterpreting the question..
Leaving my previous answer here for reference.

How do you feel about this little hack?

.hide {
  transform: scale(0.0001);
  line-height: 80%;
}

.hide:before {
  content: 'This is hidden';
  transform: scale(10000);
  width: 100%;
  height: 100%;
  display: block;
}

Demo available at: Take a look at this demo link

When consecutive DOM elements are hidden, a message saying "Hiding N elements" will be displayed

Answer №1

Answer №2

Answer №3

Similar questions

Reactivating a React hook following the execution of a function or within a function in ReactJS

Main menu items failing to display sub menu options

Distance Calculator for Geolocation WatchPosition

What is the best way to showcase a full-screen overlay directly inside an iFrame?

ReactJS implementation for selecting names from a dropdown menu

Iterate through the array to verify that the specified conditions are satisfied for each individual item

Is it more efficient to have a single global event listener or multiple event listeners of the same type in each component for productivity?

Perform activities within a component responsible for displaying a flatlist

Is the auto-import feature in the new VSCODE 1.18 compatible with nodelibs installed via npm?

Show a modal component from another component in Angular 2

Tips for assigning an event to a variable in JavaScript

Learn how to connect a Firebase account that was created using a phone number

Error has occurred: Unable to assign a value to an undefined property using axios

The dropdown list is not getting populated with data retrieved from an HTTP response

The state change in React-Redux does not trigger a re-render

What is the best way to interact with my component in React?

Can the parameters in a .slice() be customized within a v-for loop?

Is it possible to create an input field exclusively for tags using only CSS?

Tips for maintaining the original value of a state variable on a child page in ReactJS. Keeping the initial value passed as props from the parent page

Verify the ability to view a webpage