Hide inline div using CSS

Question

I have an inline div which I need to make hidden by default and then use jQuery's show() and hide() functions on it.

I tried this, but it doesn't work:

div.mydiv { display: inline none; }

If I remove none and just use jQuery's hide() function, it works. But this way the elements are not hidden until the page is loaded and JavaScript code is executed.

Edit I have other block elements inside the div, so I can't use span.

Answer 1

CSS:

.mydiv { display: inline; }
.hidden{ display: none; }

HTML:

<div class="mydiv hidden"></div>

JS:

$(function(){
  $('.myDiv').removeClass('hidden');
  // do your business here
});

Answer 2

why dont you try inline css with display none? like <div style="display:none;">abc</div>

Answer 3

you have written wrong css

css:

div.mydiv { display: none; }

jquery

$('div.mydiv').css('display','inline');

Answer 4

Just use display: none;. This way it will be hidden from the beginning and you can show it again via .show() for example.

Answer 5

The display property can't be both inline (which is visible) and none (which is hidden) at the same time.

What happens if you remove the inline, part ?

Answer 6

It would be a lot easier just to code up in the function used to display / not display this div tag a section which alters the display variable from inline to none, and vice versa.

You can not have both inline and none set at the same time.

Answer 7

You've had a fair amount of responses so I am going to put in my 2 cents about what you've had:

You should switch your divs to , these are inline by default and will behave how you would expect with the .show() and .hide() functions. If you really must keep div then you could float them, but this changes how layout is done and you will have to expect this.

<style>
span.myspan { display: none }
</style>

<span class="myspan">test</span>
<span class="myspan">test</span>
<span class="myspan">test</span>

<script>
$('span.myspan').click(function()
{
    $(this).hide();
})
</script>

• You cannot assign inline and non to display, they contradict each other.

• @moonwave99 is probably best method, you keep consistent with styles, you keep your divs (although you shouldn't, if you want inline, use an inline tag) and you have your show/hide functionality.

• @jeoj suggested visibility, visibility takes up space, so if your div is 30x30 px, even if visibility is hidden, it will take up 30x30 of html space, where as hide() / display:none will not, you might not be expecting/wanting this.

• @Sebsemillia response is correct, but your div will not be inline as you want, the show() would make it show as block as its a div and that is its default style.

• @siraj pathan response is nice but you will have to do the either the same approach or 2 different ones for when you want to hide, making it pretty inconsistent.

• @Akie suggests inline, don't do this, inline CSS is not good.

Answer 8

Maybe http://jsfiddle.net/Y5ddh/ will work?

CSS:

.hidden {
    visibility: hidden;
}

.inline {
    display: inline;
    background: red;
}

HTML:

<div class="hidden inline">
    <p>Lorem ipsum</p>
</div>
<div class="inline">
    <p>Lorem ipsum</p>
</div>

<button type="button" onclick="toggle()">Toggle</button> <!-- for demo -->

The first div is hidden, but still takes its space as an inline element. Is that what you wanted?

JS:

 function toggle() {
   var hidden = document.getElementById("hidden");

   if(hidden.getAttribute("class") == "hidden inline")
     hidden.setAttribute("class", "inline");
   else
     hidden.setAttribute("class", "hidden inline");
 }