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

Error encountered while using VueJS: The Register component was not recognized as a

Which kinds of data are ideal for storage within the Vuex (Flux) pattern?

The animation-play-state is set to 'running', however, it refuses to start playing

Steps to create a dynamic Datatable using Jquery

Converting long date format to short date format: yyyy-mm-dd

Finding text outside of a HTML tag with jsoup

Create a functional component in React.js and Material-UI to display data

Restricting the amount of requests per user within a single hour [Node.js]

Is there an alternative, more efficient method to invoke this JavaScript code received through an AJAX request?

What is the process of integrating hegel.js with a React application created using create-react-app?

Looking for Sha1 encryption functionality in jQuery or JavaScript?

Error: Firebase encountered an issue (auth/invalid-api-key) while deploying on Netlify

Ways to combine two arrays using dual requests in JavaScript with Mailchimp

Use a route segment as the callback argument

working with html data in a bootstrap modal using javascript

Unable to transmit an object using ExpressJS

The jQuery `.load` function appears to be malfunctioning

Error in jQuery: the variable has not been defined

Having difficulty naming the request while using ajax to send data to a local server

Using AngularJS to show content based on a callback function