jQuery CSS - Remove Add display none

Question

I have a div with this class     news    width 710px     float left    border-bottom 1px  000000 solid    font-weight bold    display none      And I d like with some jQuery methods remove that display none   so the div will showed  and than add it again  so the div will shadow    How can I do it  Cheers

User · Answer

In JavaScript      getElementById  id   style display   null    In jQuery       id   css  display

User · Answer

The only way to remove an inline  display none  via jQuery s css-api is by resetting it with the empty string  null does NOT work btw      According to the jQuery docu this is the general way to  remove  a once set inline style property       mydiv   css  display        or      mydiv   css  display        should do the trick properly   IMHO there is a method missing in jQuery that could be called  unhide  or  reveal  which instead of just setting another inline style property unsets the display value properly as described above  Or maybe hide   should store the initial inline value and show   should restore that

User · Answer

Use toggle to show and hide       mydiv   toggle     Check working example at http   jsfiddle net jNqTa

User · Answer

i d suggest adding a class to display hide elements    hide   display none      and then use jquery s  toggleClass   to show hide the element       news   toggleClass  hide

User · Answer

If you have a lot of elements you would like to  hide   or  show    you are going to waste a lot of resources to do what you want - even if use  hide 0  or  show 0  - the 0 parameter is the duration of the animation   As opposed to Prototype js  hide   and  show   methods which only used to manipulate the display attribute of the element  jQuery s implementation is more complex and not recommended for a large number of elements   In this cases you should probably try  css  display   none   to hide and  css  display      to show   css  display   block   should be avoided  especially if you re working with inline elements  table rows  actually any table elements  etc

User · Answer

You re not giving us much information but in general this might be a solution      div news   css  display    block

User · Answer

To hide the div      news   hide      or      news   css  display   none      and to show the div       news   show      or      news   css  display   block

User · Answer

Considering lolesque s comment to best answer you can add either an attribute or a class to show hide elements with display properties that differs from what it normally has  if your site needs backwards compatibility I would suggest making a class and adding removing it to show display the element   news-show   display inline-block      news-hide   display none      Replace inline-block with your preferred display method of your choice and use jquerys addclass https   api jquery com addclass  and removeclass https   api jquery com removeclass  instead of show hide  if backwards compatibility is no problem you can use attributes like this    news data-news-visible show    display inline-block      news data-news-visible hide    display none      And use jquerys attr   http   api jquery com attr  to show and hide the element   Whichever method you prefer it makes you able to easily implement css3 animations when showing hiding elements this way

User · Answer

For some reason  toggle didn t work for me  and I received the error uncaught type error toggle is not a function when inspecting the element in browser  So I used the following code and it started working for me     quot  trigger quot   click function              news   attr  style    display none        Used jquery script file jquery-2 1 3 min js

User · Answer

So  let me give you sample code    lt div class  news  gt  Blah  blah  blah  I m hidden   lt  div gt    lt a class  trigger  gt Hide Show News lt  a gt    The link will be the trigger to show the div when clicked  So your Javascript will be       trigger   click function            news   toggle          You re almost always better off letting jQuery handle the styling for hiding and showing elements   Edit  I see people above are recommending using  show and  hide for this   toggle allows you to do both with just one effect  So that s cool

User · Answer

jQuery provides you with       news   hide        news   show      You can then easily show and hide the element s

User · Answer

Using show   adds display block in place of display hide which might break things    To avoid that  you can have a class with property display none and toggle that class for that element with toggleClass      x000D   x000D     button   on  click   function event       div   toggleClass  hide        x000D   hide  x000D     display none  x000D    x000D   x000D  div  x000D     width 40px  x000D     height 40px  x000D     background  000  x000D     margin-bottom 20px  x000D    x000D   lt script src  https   cdnjs cloudflare com ajax libs jquery 3 3 1 jquery min js  gt  lt  script gt  x000D   lt div gt  lt  div gt  x000D   lt button gt Toggle Box lt  button gt  x000D   x000D   x000D    None of the answers mentioned this

User · Answer

jQuery s  show   and  hide   functions are probably your best bet

[jquery] jQuery & CSS - Remove/Add display:none

Examples related to jquery

Examples related to css