CODEWITHSUNDEEP
htmlcss
Jim Peeters
Jim Peeters

Reputation: 2853

How can I hide an element with css while still keeping it on the page?

I am trying to hide an element on my page but I still want it to be there. I want a button that still can be clicked but I want it to be invisible.

Upvotes: 13

Views: 15123

Answers (5)

Todd Mark
Todd Mark

Reputation: 1885

There are three ways to hidden elements and keep the page position. You can get more information about between Normal flow and css style(ie: opacity, visibility) attribute relation.

  1. visibility
  2. opacity
  3. transparent

$('div').click(function (){
  alert(this.innerHTML)
})
div{
  border: 1px solid #000;
}
.one{
  visibility:hidden;
}
.two{
  opacity: 0;
}
.three{
  background: transparent;
  color: transparent;
}
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  1
  <div class="one">visibility</div>
  2
  <div class="two">opacity</div>
  3
  <div class="three">transparent</div>
  4
</body>
</html>

Upvotes: 12

محمد البوليفي
محمد البوليفي

Reputation: 1

Using display:none removes an element from the HTML, but an alternative solution is using the opacity property with a value of 0%:

.ex_opacity {
  opacity: 0%;
}
<div class="ex_opacity">opacity</div>

Upvotes: 0

Alessandro Incarnati
Alessandro Incarnati

Reputation: 7248

Use opacity:0, if you want still to access the children elements of the div you need to be invisible. 

 .opacityZero {
  opacity:0; 
}

To clarify, below an explanation of the 3 properties:

Visibility

Using the visibility property in CSS, you can toggle the visibility of an element using the values hidden or visible. If you make the element hidden, it will be hidden from the user and user can't access it's child, but still in the DOM, the space of the element will be consumed.

Opacity

If you use opacity:0 to hide an element, at first glance it looks like hidden, but still the user can access the child element. It also consume the space of the element in the DOM. If you have a link as a child element it will be still clickable if you set opacity to 0. This is the way to go for you.

Display

If you use display:none, the browser will consider as if the element is not available in the DOM as the result it won't consume the space.


DEMO 

$(".opacityZero, .visibilityHidden").click(function() {
  alert("Button is clicked");
});
.opacityZero {
  opacity:0; 
}

.visibilityHidden {
  visibility:hidden;
  margin-top:20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="opacityZero">
<button >I am invisible</button>
</div><span>↑ Click above (Opacity:0 - children clickable</span>
 
<div class="visibilityHidden">
<button>I am invisible</button>
</div><span>↑ Click above (Visibility hidden - children not clickable</span>

JSFIDDLE http://jsfiddle.net/a_incarnati/gna7r4L8/6/

Upvotes: 5

Athax
Athax

Reputation: 182

Just add an background/color: rgba(0,0,0,0); border: none; to the css properties.

Upvotes: 0

Timur Osadchiy
Timur Osadchiy

Reputation: 6209

Just make your button transparent:

$("#invisible").click(function() {
  alert("Invisible is clicked");
});
#invisible {
  background: transparent;
  color: transparent;
  border: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="invisible">I am invisible</button> <- Click here

Upvotes: 1

Related Questions