CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Vaibhav Agarwal
Vaibhav Agarwal

Reputation: 1144

Changing Visibility of HTML elements

I want to change the visibility of HTML elements except some particular elements. I want the elements to be at the same positions and alignments and just the visibility of elements to be changed. Can somebody please help me doing that?

I tried doing the same using jquery by seeing the answer to How to hide all elements except one using jquery? but this changes the positions and alignments of elements.

$('body > :not(#averageCustomerReviews)').hide(); //this hid everything
$('#averageCustomerReviews').appendTo('body'); //but this changed the position

I currently have locators to elements like xpaths/CSS Selectors which I don't want to hide.

For e.g. I have this link. And I want to view only enter image description here at the place it is right now by hiding all other elements.

Upvotes: 1

Views: 4471

Answers (5)

damoiser
damoiser

Reputation: 6238

VISIBILITY USAGE

jQuery

$("#element").css("visibility", "hidden");

CSS

#element {
visibility: hidden;
}

If you want all the others elements than #element to be "invisible":

jQuery

$(":not(#element)").css("visibility", "hidden");

CSS

:not(#element) { 
visibility: hidden; 
}

ANSWERING YOUR 'AFTER' QUESTION - LET ALL INVISIBLE EXCEPT ONE

If you can't assign an 'invisible' class to the elements that should be invisibile (best solution), you can render visible only one child element in this manner, see JsFiddle.

That mean:

  • set all 'invisible': $("*").css("visibility", "hidden");
  • set visible the element you want to show: $("#element").css("visibility", "visible");

In your case the element you would like to show is a little 'nested' and you can do in this manner:

  // set all 'invisible'
  $("*").css("visibility", "hidden");

  // set visible the element with their 'sub-child'
  $("#averageCustomerReviews_feature_div, #averageCustomerReviews, #averageCustomerReviews a, .reviewCountTextLinkedHistogram, .reviewCountTextLinkedHistogram a, .a-popover-trigger, .a-popover-trigger i").css("visibility", "visible");

Not nice, but it works. Screenshot

With a html tree complex like this one and without any possibility to assign some custom class. I think that this is the only solution...

Upvotes: 5

Dryden Long
Dryden Long

Reputation: 10182

If you are looking to hide everything but #element then use this:

:not(#element) {
    visibility: hidden;
}

See here for more info on the :not() selector: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

UPDATE

You can also chain :not() selectors together to exclude multiple elements. For example, if you have #element1 and #element2 that should not be hidden from view, then do something like this:

:not(#element1):not(#element2) {
    visibility: hidden;
}

Upvotes: 1

user2511140
user2511140

Reputation: 1688

use this

jquery

 $("#elementid").onclick(function() {
  $('body').css({ 'visibility': 'hidden'});
    $('#elementid').css({ 'visibility': 'visible'});
});

Upvotes: 0

block14
block14

Reputation: 619

Use visibility: hidden;. Unlike display: none; the element will still be there.

Too apply to all elements except one use a style like this:

* {
    visibility: hidden;
}

#element {
    visibility:visible !important;
}

JSFiddle

Information on visibility.

Upvotes: 1

AAA
AAA

Reputation: 1384

You can set up in CSS, where class is the class that's on all the elements you want to hide:

.class {
  visibility: hidden;
}

and then

$('#element').css('visibility', 'visible');

Upvotes: 0

Related Questions