11

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.

Jim Peeters
  • 2,573
  • 9
  • 31
  • 53

4 Answers4

10

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: opcity, visibility) attribute relation.

  1. visibility
  2. opcity
  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">opticy</div>
  3
  <div class="three">transparent</div>
  4
</body>
</html>
Todd Mark
  • 1,847
  • 13
  • 25
5

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/

HoldOffHunger
  • 18,769
  • 10
  • 104
  • 133
Alessandro Incarnati
  • 7,018
  • 3
  • 38
  • 54
1

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
Timur Osadchiy
  • 5,699
  • 2
  • 26
  • 28
0

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

Athax
  • 200
  • 1
  • 12