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

Hyperlink -> Boundary

CSS Flexibility in Action

Is there a way to ensure that the header is centered at the top and the footer is centered at the bottom of every printed page, even when

Tips for eliminating flutter for static menu with easyResponsiveTabs.js

CORS issue encountered by specific user visiting the hosted website

Aligning the stars with CSS

Tips for transitioning from custom CSS to Material UI's CSS in JS

Get rid of the <h1> tag surrounding the Wordpress logo

Guidelines for aligning a form in the middle of the screen (positioned between the navigation bar and footer

Unexpected issue with sliding menu toggle implementation

Attempting to save MongoDB data into a variable for integration with Handlebars.js

CSS - Retain z-index until the transition is complete

Issue with AnimeJS Motion Path causing element to deviate from desired SVG path

Issues with the menu pop-up functionality arise when utilizing the CSS class .active

Is there a way to delay rendering the html until all the content has been fully downloaded?

The webpage failed to show the hamburger menu

Filter search results to display only posts

Use JavaScript to generate an HTML element that has an attribute mirroring its text content

I need to adjust the alignment of the text within my list item that includes a time element

AInspector WCAG evaluation found that mat-select does not meet level A compliance standards