Changing Visibility of HTML elements

Question

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.

You can also use `opacity` to change the visibility of the elements. — cssyphus, Dec 10 '13 at 21:48
Please do not include links, but rather your actual code. This insures that future readers will understand the context of the question. — Dryden Long, Dec 10 '13 at 22:04
Here are a few examples of using the opacity css method: [w3](http://www.w3schools.com/cssref/css3_pr_opacity.asp), [SO](http://stackoverflow.com/questions/4386714/css3-cross-browser-opacity), [another SO](http://stackoverflow.com/questions/7546555/css-opacity-internet-explorer) — cssyphus, Dec 10 '13 at 22:29

damoiser · Answer 1 · 2013-12-11T09:03:59.477

5

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...

edited Dec 11 '13 at 09:03

answered Dec 10 '13 at 21:47

damoiser

6,058
3
40
66

I want all the other elements than `#element` to be hidden. – Vaibhav Agarwal Dec 10 '13 at 21:47
But it also hides `#element`. Is it because it is nested under other divs? – Vaibhav Agarwal Dec 10 '13 at 21:53
@VaibhavAgarwal can be, maybe there is a parent div that is affected to the "invisibility", then the child is affected too – damoiser Dec 10 '13 at 21:54
So, how do I prevent that from happening? – Vaibhav Agarwal Dec 10 '13 at 21:56
2

@VaibhavAgarwal I think that the better way to do this is to assign a class to all the elements that should have the visibility: hidden. Then you can call it with one of the example above. – damoiser Dec 10 '13 at 21:57
1

@VaibhavAgarwal Without seeing your markup, we'd have no way to tell you exactly how to do this. What damoiser suggested about assigning a class to all of the elements that should be hidden is probably your best bet. – Dryden Long Dec 10 '13 at 21:59
@VaibhavAgarwal re-re-updated with a working solution (tested) – damoiser Dec 11 '13 at 09:06

block14 · Answer 2 · 2013-12-10T21:53:09.613

1

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.

edited Dec 10 '13 at 21:53

answered Dec 10 '13 at 21:48

block14

617
1
8
26

Dryden Long · Answer 3 · 2013-12-10T22:06:43.310

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;
}

score 0 · Answer 4 · answered Dec 10 '13 at 21:50

0

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');

answered Dec 10 '13 at 21:50

AAA

1,364
1
10
15

user2511140 · Answer 5 · 2013-12-10T22:01:24.940

0

use this

jquery

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

edited Dec 10 '13 at 22:01

answered Dec 10 '13 at 21:51

user2511140

1,658
3
26
32

Changing Visibility of HTML elements

5 Answers5