4

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.

John29
  • 3,340
  • 3
  • 32
  • 50
  • can you make jsfiddle of your code ? It would be helpful – 5eeker May 15 '14 at 10:42
  • 1
    You shouldn't be making divs `inline`...use a `` instead, – Paulie_D May 15 '14 at 10:43
  • Just set it to { display: none; }. When you want to display it then add any other custom css... – dotnethaggis May 15 '14 at 10:43
  • Use span which is inline by default, not div. If you really need div, then float it and display:none. – viion May 15 '14 at 10:47
  • As mentioned by Paulie_D, use `span` instead of `div` and then keep `span.mydiv{ display: none;}` by default and then by using jquery do `$(elem).show()` whenever you want to show the element. – Mr_Green May 15 '14 at 10:49
  • 1
    Using `span` instead of `div` can make your HTML invalid if there are other block elements inside it. See also: http://stackoverflow.com/questions/6061869/are-block-level-elements-allowed-inside-inline-level-elements-in-html5 – GolezTrol May 15 '14 at 11:17
  • @GolezTrol Exactly. In my case I have other block elements inside, so `span` is not an option. Sorry, I guess I should've mentioned it. – John29 May 15 '14 at 11:32

8 Answers8

11

CSS:

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

HTML:

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

JS:

$(function(){
  $('.myDiv').removeClass('hidden');
  // do your business here
});
Vittore Gravano
  • 706
  • 6
  • 22
moonwave99
  • 21,957
  • 3
  • 43
  • 64
  • Thanks, it works. I tried the same code as you suggested before posting the question, but I had `.hidden{ display: none: }` before `.mydiv { display: inline; }` in my CSS, and for some reason it doesn't work, but reversing the order did the trick. – John29 May 15 '14 at 12:09
5

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

Ashif Nataliya
  • 912
  • 2
  • 13
  • 28
0

you have written wrong css

css:

div.mydiv { display: none; }

jquery

$('div.mydiv').css('display','inline');
siraj pathan
  • 1,455
  • 1
  • 14
  • 31
0

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

Sebsemillia
  • 9,366
  • 2
  • 55
  • 70
0

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 ?

Fix
  • 1
0

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");
 }
jeoj
  • 633
  • 6
  • 9
0

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.

Travis Knight
  • 301
  • 1
  • 4
  • 18
0

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.

viion
  • 365
  • 2
  • 10