jQuery: show() keeps adding display:block

Question

I'm having a little issue right now that has turned into a festering wound.

I've recreated Google Business Hours for setting which hours during the week that a company is open, or whether they are closed on that day. Now, if they are closed, the user can select a checkbox and the times DIV hides. Right now I'm using .show() and .hide()

Now, let's say that a user closes the fist day and decides to "apply all" to the rest of the days of the week... I loop through and close the remaining 6 days. However, if a user has modified a day in the middle of the week, the .show() or .hide() functions automatically add "display: block" ... this messes up the loop.

Why is jQuery adding this styling when it was never there originally, and is there a clean way of removing it within a loop before I apply the .show() or .hide()?

Answer 1

http://api.jquery.com/show/

The matched elements will be revealed immediately, with no animation. This is roughly equivalent to calling .css('display', 'block'), except that the display property is restored to whatever it was initially. If an element has a display value of inline, then is hidden and shown, it will once again be displayed inline.

Do you have an original css display property set?

Answer 2

Use jQuery's addClass() and removeClass() if you're not happy with the effect of show() and hide(), and attach a class to change the visibility, for example.

Answer 3

Jquery uses 'display:none' to hide().I use this and show() quite frequently but I haven't had any problem yet probably because display:block hasn't hurt my formatting.

Here's a quick remedy for your situation

$("#mydiv").show().css("display","inline")

Use the div setting you want instead of inline (while inline will probably work for you considering block isn't.