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 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:

<a href="#" id="showAll" title="Show Tags">Show All Tags</a>
<ul id="tags" class="subforums" style="display:none;overflow-x: visible; overflow-y: visible; ">
    <li>Tag 1</li>
    <li>Tag 2</li>
    <li>Tag 3</li>
    <li>Tag 4</li>
    <li>Tag 5</li>
</ul>

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

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

User · Answer

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

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

[javascript] Toggle display:none style with JavaScript

Examples related to javascript

Examples related to html

Examples related to css