CODEWITHSUNDEEP
javascriptjqueryhtmlcss
kesong
kesong

Reputation: 329

how to create a hidden element as well as inline-block

I have a div and I want to be both inline-block and display none, but I have to choose one of them.

My HTML:

.like_user_wrapper{
    margin-top:20px;
    padding:5px; 
    height:55px;
    box-shadow:1px 1px 10px #f0f0f0;
    background:white;
    display:inline-block;
    display:none;
}

It's not a good idea to have the div just hide using JavaScript

Upvotes: 2

Views: 5746

Answers (2)

Wilf
Wilf

Reputation: 743

Just use visibility: hidden;

#like_user_wrapper{
    margin-top:20px;
    padding:5px; 
    height:55px;
    box-shadow:1px 1px 10px #f0f0f0;
    background:white;
    display:inline-block;
    visibility: hidden;
}

Note this is using a custom ID (#...) , not a class (....)

If you want is to become visible at some point, you can use this JavaScript property with that ID:

document.getElementById('like_user_wrapper').style.visibility='visible';

This can be included in a onmouseover="", or a javascript function etc, so it appears when you want it to. This can be implemented in html like this:

<!DOCTYPE HTML>
<html>
<head>
<style>
#like_user_wrapper {
    margin-top:20px;
    padding:5px; 
    height:55px;
    box-shadow:1px 1px 10px #f0f0f0;
    background:white;
    display:inline-block;
    visibility: hidden;
}
#hover {
    width: 80px;
    height: 50px;
    background-color: red;
}
</style>
</head>
<body style="background-color:blue;">
<div id="like_user_wrapper">Like User Wrapper</div>
<br><br>
<div id="hover" onmouseover="document.getElementById('like_user_wrapper').style.visibility='visible';" onmouseout="document.getElementById('like_user_wrapper').style.visibility='hidden';">Hover over me</div>
</body>
</html>

Help page on the visibility CSS property here

N.B. In most browsers, by default a DIV has the display property block, so you might not need inline-block - you could just wrap it in a <div> with that property anyway.

Upvotes: 3

DanC
DanC

Reputation: 8805

If you are trying to hide and show the element using jQuery, to display it back avoid using jQuery.show().

Instead do $('.like_user_wrapper').css({'display': 'inline-block'}); to display the element.

On the other hand, to hide it is ok to just do $('.like_user_wrapper').hide();

And remove the display: inline-block from your css.

Upvotes: 1

Related Questions