Toggle display none style with JavaScript

Question

I want to change the style  second line below  to remove the display  none  part when the user clicks on the  Show All Tags  link  If the user clicks the  Show All Tags  link again  I need the display  none  text added back in to the  style     statement     lt a href     title  Show Tags  gt Show All Tags lt  a gt   lt ul class  subforums  style  display  none  overflow-x  visible  overflow-y  visible    gt    I ve searched here and Google for an example I can apply to my situation  I ve found plenty of examples using 2 DIV blocks to show hide  I really need to do it this way  by modifying the html style element  Does anyone have an example  or provide a link to an example  that does this type of toggle wtih the display  none text

User · Answer

you can do this easily by using jquery using  css property    try this one  http   api jquery com css

User · Answer

You can do this through straight javascript and DOM  but I really recommend learning JQuery   Here is a function you can use to actually toggle that object   http   api jquery com toggle   EDIT   Adding the actual code   Solution   HTML snippet    lt a href     id  showAll  title  Show Tags  gt Show All Tags lt  a gt   lt ul id  tags  class  subforums  style  display none overflow-x  visible  overflow-y  visible    gt       lt li gt Tag 1 lt  li gt       lt li gt Tag 2 lt  li gt       lt li gt Tag 3 lt  li gt       lt li gt Tag 4 lt  li gt       lt li gt Tag 5 lt  li gt   lt  ul gt    Javascript code using JQuery from Google s Content Distribution Network   https   ajax googleapis com ajax libs jquery 1 7 1 jquery min js    function             showAll   click function       Adds click event listener               tags   toggle  slow       Toggles visibility   Use the  slow  parameter to add a nice effect                You can test directly from this link   http   jsfiddle net vssJr 5   Additional Comments on JQuery   Someone has suggested that using JQuery for something like this is wrong because it is a 50k Library    I have a strong opinion against that   JQuery is widely used because of the huge advantages it offers  like many other javascript frameworks    Additionally  JQuery is hosted by Content Distribution Networks  CDNs  like Google s CDN that will guarantee that the library is cached in the client s browser   It will have minimal impact on the client   Additionally  with JQuery you can use powerful selectors  adding event listener  and use functions that are for the most part guaranteed to be cross-browser   If you are a beginner and want to learn Javascript  please don t discount frameworks like JQuery   It will make your life so much easier

User · Answer

Others have answered your question perfectly  but I just thought I would throw out another way  It s always a good idea to separate HTML markup  CSS styling  and javascript code when possible  The cleanest way to hide something  with that in mind  is using a class  It allows the definition of  hide  to be defined in the CSS where it belongs  Using this method  you could later decide you want the ul to hide by scrolling up or fading away using CSS transition  all without changing your HTML or code  This is longer  but I feel it s a better overall solution   Demo  http   jsfiddle net ThinkingStiff RkQCF   HTML    lt a id  showTags  href     title  Show Tags  gt Show All Tags lt  a gt   lt ul id  subforms  class  subforums hide  gt  lt li gt one lt  li gt  lt li gt two lt  li gt  lt li gt three lt  li gt  lt  ul gt    CSS    subforms       overflow-x  visible       overflow-y  visible      hide       display  none       Script   document getElementById   showTags    addEventListener   click   function          document getElementById   subforms    toggleClass   hide        false     Element prototype toggleClass   function   className         if  this className split        indexOf  className      -1             this className     this className         className   trim          else           this className   this className replace  new RegExp      s       className       s              trim

User · Answer

Give your ul an id     lt ul id  yourUlId  class  subforums  style  display  none  overflow-x  visible  overflow-y  visible    gt    then do  var yourUl   document getElementById  yourUlId    yourUl style display   yourUl style display      none          none     IF you re using jQuery  this becomes   var  yourUl       yourUlId      yourUl css  display    yourUl css  display        none          none      Finally  you specifically said that you wanted to manipulate this css property  and not simply show or hide the underlying element   Nonetheless I ll mention that with jQuery      yourUlId   toggle      will alternate between showing or hiding this element

User · Answer

Give the UL an ID and use the getElementById function    lt html gt   lt body gt       lt script gt      function toggledisplay elementID                 function style                style display   style display      none          none              document getElementById elementID  style              lt  script gt    lt a href     title  Show Tags  onClick  toggledisplay  changethis     gt Show All Tags lt  a gt   lt ul class  subforums  id  changethis  style  overflow-x  visible  overflow-y  visible    gt       lt li gt Item 1 lt  li gt       lt li gt Item 2 lt  li gt       lt li gt Item 3 lt  li gt   lt  ul gt    lt  body gt   lt  html gt

[javascript] Toggle display:none style with JavaScript

Examples related to javascript

Examples related to html

Examples related to css