CSS or jQuery: Which is Better for Hiding/Showing a Div Within Another Div?

Question

CSS or jQuery: Which is Better for Hiding/Showing a Div Within Another Div?

Show only class-A at the top of the page while hiding all other classes (x,x,c).
Hide only class-A while showing all other classes (x,x,c).

Is it possible to achieve this?

<div class="x">
    <div class="y">
        <div class="z"></div>
    </div>
</div>
<div class="A">
    <div class="y">
        <div class="z"></div>
    </div>
</div>
<div class="x">
    <div class="w">
        <div class="q"></div>
    </div>
</div>
<div class="C">
    <div class="p">
        <div class="s"></div>
    </div>
</div>

It would be ideal if the code contains only class-A without mention of other classes (x,c), as they may change dynamically.

I attempted this solution: http://jsfiddle.net/smilyface/qX546/

javascript jquery css html

Answer 1

Answer №1

Here is a simple solution you can implement:

const elementA = document.querySelector('div.A');
const otherElements = Array.from(document.querySelectorAll('div')).filter(element => !element.classList.contains('A') && !(element.parentElement.classList && element.parentElement.classList.contains('A')));
elementA.style.display = 'toggle';
otherElements.forEach(element => {
    element.style.display = 'toggle';
});

Check out the code example on JSFiddle

Answer 2

Here is a simple solution you can implement:

const elementA = document.querySelector('div.A');
const otherElements = Array.from(document.querySelectorAll('div')).filter(element => !element.classList.contains('A') && !(element.parentElement.classList && element.parentElement.classList.contains('A')));
elementA.style.display = 'toggle';
otherElements.forEach(element => {
    element.style.display = 'toggle';
});

Check out the code example on JSFiddle

Answer 3

Answer №2

Here is a way to verify:

if($('.A').is(":visible")){
  $('.A').hide();
  $("div:not('.A')").show();
}else if($("div:not('.A')").is(':visible')){

}

Hopefully this solution proves useful to you.

Answer 4

Here is a way to verify:

if($('.A').is(":visible")){
  $('.A').hide();
  $("div:not('.A')").show();
}else if($("div:not('.A')").is(':visible')){

}

Hopefully this solution proves useful to you.

Answer 5

Answer №3

If you prefer, you can achieve the same result using a toggle function, but first you need to ensure that class A is hidden when the page loads:

$('.A').hide();

$('#button').click(function(){
    $('.A').toggle();
    $('.x').toggle();
    $('.C').toggle();
});

Check out the code on jsfiddle for demonstration.

Answer 6

If you prefer, you can achieve the same result using a toggle function, but first you need to ensure that class A is hidden when the page loads:

$('.A').hide();

$('#button').click(function(){
    $('.A').toggle();
    $('.x').toggle();
    $('.C').toggle();
});

Check out the code on jsfiddle for demonstration.

Answer 7

Answer №4

To simplify the structure, I recommend grouping the three DIVs (a,x,c) within a single outer DIV.

<div class="x">
</div>
<div class="outer">
    <div class="A">
    </div>
    <div class="x">
    </div>
    <div class="C">
    </div>
</div>

In your CSS, you can initially set .outer to display:none.

.outer { display: none; }

Then, with jQuery, you can use $('.x').toggle() and $('.outer').toggle() to control visibility.

If you prefer an easier method, simply add a classname to both DIVs and call toggle() on that class.

<div class="x toggleMe">
</div>
<div class="toggleMe" style="display:none;">
    <div class="A">
    </div>
    <div class="x">
    </div>
    <div class="C">
    </div>
</div>

Using jQuery:

$('.toggleMe').toggle();

Answer 8

To simplify the structure, I recommend grouping the three DIVs (a,x,c) within a single outer DIV.

<div class="x">
</div>
<div class="outer">
    <div class="A">
    </div>
    <div class="x">
    </div>
    <div class="C">
    </div>
</div>

In your CSS, you can initially set .outer to display:none.

.outer { display: none; }

Then, with jQuery, you can use $('.x').toggle() and $('.outer').toggle() to control visibility.

If you prefer an easier method, simply add a classname to both DIVs and call toggle() on that class.

<div class="x toggleMe">
</div>
<div class="toggleMe" style="display:none;">
    <div class="A">
    </div>
    <div class="x">
    </div>
    <div class="C">
    </div>
</div>

Using jQuery:

$('.toggleMe').toggle();

Answer 9

Answer №5

It is completely feasible to achieve this.

To start, set display:none; as the default for class A, and leave the rest of your classes unaffected.

Then use jQuery to toggle both classes on and off.

For example:

//in css
.A {
   display: none;
 }

//in js

$('.A').toggle();
$('.X,.C').toggle();

Answer 10

It is completely feasible to achieve this.

To start, set display:none; as the default for class A, and leave the rest of your classes unaffected.

Then use jQuery to toggle both classes on and off.

For example:

//in css
.A {
   display: none;
 }

//in js

$('.A').toggle();
$('.X,.C').toggle();

CSS or jQuery: Which is Better for Hiding/Showing a Div Within Another Div?

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Retrieve the minimum and maximum values from a multi-dimensional array

Is it possible to use Ajax to prompt a pop-up window for basic authentication when logging in?

When building with Angular using the "ng build" command, the JavaScript file names are altered

Watching the Event Emitters emitted in Child Components?

What is the best way to connect a CSS file with multiple pages located within a specific folder in HTML/CSS?

Steps for updating a specific item within an object in an array of MongoDB document

Is there a way to use HTML and JS to draw custom lines connecting elements?

The problem with "em" in CSS: preventing it from scaling based on the font-size of a particular element

Build a nested block containing a div, link, and image using jQuery or vanilla JavaScript

"Upon calling an asynchronous method within another method, it appears that no progress is being displayed

What's the process for changing this arrow function into a regular function?

The error message "Unable to iterate over undefined property in Node.js using EJS and JavaScript" popped up

Ways to adjust the size of an HTML fieldset?

Struggling with passing the decoded user ID from Node Express() middleware to a route can be problematic

Error message stating that there is no property 'collection' in Firestore when using Firebase v9 modular syntax in Firebase Firestore

javascript create smooth transitions when navigating between different pages

Tips for capturing audio on a smartphone browser?

The command '.' is unable to be executed as an internal or external command, executable program, or batch file when using npm start -- -e=stag -c=it

Implement a loading spinner to display each time a computed method is invoked in a Vue.js

Using canvas to smoothly transition an object from one point to another along a curved path