CODEWITHSUNDEEP
jquery
dcolumbus
dcolumbus

Reputation: 9722

jQuery: show() keeps adding display:block

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 first 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" and 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()?

Upvotes: 6

Views: 8750

Answers (5)

ishouldbepainting
ishouldbepainting

Reputation: 19

Like Cyril Gupta's and Jimmy Kane's answers, use this on a hidden div:

$("#hiddenDiv").css("display","");

This simply clears the "none" from display, your stylesheet should take over from there.

Upvotes: 0

Jimmy Kane
Jimmy Kane

Reputation: 16825

On an element that you haven't defined the display, after unhidding it, JQUERY will add display block to the element.

You can remove it afterwards.

$("#myrow").show().removeAttr( 'style' )

This includes all dynamic styling so please watch out if you depend on this.

Upvotes: 6

Cyril Gupta
Cyril Gupta

Reputation: 13723

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.

Upvotes: 2

ScottE
ScottE

Reputation: 21630

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.

Upvotes: 4

jcolebrand
jcolebrand

Reputation: 16025

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?

Upvotes: 2

Related Questions