Conceal all components on a webpage with the exception of a designated div

Question

Conceal all components on a webpage with the exception of a designated div

I am looking to selectively hide elements on the page, revealing only the contents of div.k1. The page contains numerous elements. How can I achieve this using just CSS?

<div>1-this will be hidden</div>
<div class="k1">
  2-this div will be shown
  <p>3-this will be shown</p>
  <p>4-this div will be shown</p>
  <div>
    5-this will be shown
    <p>6-this will be shown</p>
    <div>
      7-this will be shown
      <p>8-this will be shown</p>
    </div>
  </div>
</div>
<div>9-this will be hidden</div>
<div>10-this will be hidden</div>

<div>1-this will be hidden</div>
<div class="k1">
  2-this div will be shown
  <p>3-this will be shown</p>
  <p>4-this div will be shown</p>
  <div>
    5-this will be shown
    <p>6-this will be shown</p>
    <div>
      7-this will be shown
      <p>8-this will be shown</p>
    </div>
  </div>
</div>
<div>9-this will be hidden</div>
<div>10-this will be hidden</div> 11,12,13..

html css

Answer 1

Answer №1

To hide all the specific elements within the body tag that are div's, excluding those with the class name k1, you can utilize the following JavaScript code snippet.

var items = document.querySelectorAll("body>div:not(.k1)");
for (var i = 0; i < items.length; i++) {
    items[i].style.display = 'none';
}

This script selects all the div tags directly under the body tag, except for those with the class name k1. It then loops through these selected elements and hides each one by setting its display property to 'none'.

If a CSS approach is preferred and the criteria remain the same as described above, you can achieve the same result using the following CSS rule.

body>div:not(.k1) {
    display: none;
}

If you wish to delve deeper into CSS selectors, I recommend exploring the topic on the W3 schools page.

Answer 2

To hide all the specific elements within the body tag that are div's, excluding those with the class name k1, you can utilize the following JavaScript code snippet.

var items = document.querySelectorAll("body>div:not(.k1)");
for (var i = 0; i < items.length; i++) {
    items[i].style.display = 'none';
}

This script selects all the div tags directly under the body tag, except for those with the class name k1. It then loops through these selected elements and hides each one by setting its display property to 'none'.

If a CSS approach is preferred and the criteria remain the same as described above, you can achieve the same result using the following CSS rule.

body>div:not(.k1) {
    display: none;
}

If you wish to delve deeper into CSS selectors, I recommend exploring the topic on the W3 schools page.

Answer 3

Answer №2

If you're looking for a quick solution to hide divs nested up to 2 layers deep, here's a simple approach. By targeting all div elements and checking their classNames and parent classNames, we can selectively hide them based on specified conditions. This method involves adding multiple conditional checks to ensure only the desired elements remain visible. For more complex nesting structures, additional parentNode references can be included in the script. However, it may be more efficient to assign specific classes for hiding elements and revealing others using IDs. This alternative strategy avoids modifying the original HTML structure.

Cheers!

Answer 4

If you're looking for a quick solution to hide divs nested up to 2 layers deep, here's a simple approach. By targeting all div elements and checking their classNames and parent classNames, we can selectively hide them based on specified conditions. This method involves adding multiple conditional checks to ensure only the desired elements remain visible. For more complex nesting structures, additional parentNode references can be included in the script. However, it may be more efficient to assign specific classes for hiding elements and revealing others using IDs. This alternative strategy avoids modifying the original HTML structure.

Cheers!

Conceal all components on a webpage with the exception of a designated div

Answer №1

Answer №2

Similar questions

Could anyone provide some insight into the reason behind this occurrence?

Could there possibly exist a counterpart to .cloneNode?

What is the process for adjusting the switch size in react-bootstrap?

Modify the hue of the div as soon as a button on a separate webpage is

Unchanging bottom section with changeable information

Tips on customizing the appearance of JavaScript output?

What are the steps to create a dynamic dropdown effect for navbar content using animations similar to transitions?

Troubleshooting issue with image dimensions in Angular within CKEditor content

Display a particular div upon clicking a specific link, while concealing the other divs

Utilizing CSS flex-end to position images

I am experiencing difficulty with my grid as it refuses to center elements

Tips for showing all percentages on a Google PieChart

Add color to the cells within the table

What is the best way to eliminate excess elements from overflow:hidden?

"Enhance your webpage with Flexslider and captivating stretched images

Apache conf file configured with CSP not functioning properly when serving PHP files

Tips on storing the amount of time a user devotes to answering questions on my form into a database

JavaScript accordions failing to open

What could be the reason for the padding not functioning properly on my Bootstrap 5.3 webpage?

Anomaly in Form Validation with Semantic-UI