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

The Vue v-for directive encountered an unrecognized property during rendering

Can someone explain the inner workings of the Typescript property decorator?

Is it possible to simultaneously center and display an iframe inline?

Error: an empty value cannot be treated as an object in this context when evaluating the "businesses" property

Real-time Property Availability Widget

Unexpected JSON response from jQuery AJAX call

ReactJS encountering issue with sending POST request, blocked by CORS preflight options

Obtaining variable content from a JavaScript function

Looking to optimize the JavaScript code for improved performance speed

Center-align the text within the dropdown menu

Sending state information through props in a Vuex environment

The process of implementing sticky headers that stay in place while scrolling in a React application

Looking to add a dynamic divider between two columns that can be adjusted in width by moving the mouse left and right?

A more efficient method for refreshing Discord Message Embeds using a MessageComponentInteraction collector to streamline updates

Overlaying a div on top of an iframe

A guide on updating URLs that are not enclosed within an anchor tag using JavaScript

The download handler (php code) is being triggered multiple times within a single request

Troubleshooting AJAX issues in Firefox with window.location.assign function

What are some effective methods to completely restrict cursor movement within a contenteditable div, regardless of any text insertion through JavaScript?

Navigate through FAQ items with sliders using Owl Carousel 2 - Easily switch between different chapters