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.

<a href="#" title="Show Tags">Show All Tags</a>
<ul class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">

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.

Adam Rackis · Accepted Answer · 2011-12-10 03:37:39Z

127

Give your ul an id,

<ul id='yourUlId' class="subforums" style="display: none; overflow-x: visible; overflow-y: visible; ">

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.

edited Dec 10, 2011 at 3:37

answered Dec 10, 2011 at 3:17

Adam Rackis

83.5k57 gold badges281 silver badges402 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

benastan · Accepted Answer · 2011-12-10 11:02:29Z

19

Give the UL an ID and use the getElementById function:

<html>
<body>
    <script>
    function toggledisplay(elementID)
    {
        (function(style) {
            style.display = style.display === 'none' ? '' : 'none';
        })(document.getElementById(elementID).style);
    }
    </script>

<a href="#" title="Show Tags" onClick="toggledisplay('changethis');">Show All Tags</a>
<ul class="subforums" id="changethis" style="overflow-x: visible; overflow-y: visible; ">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

</body>
</html>

edited Dec 10, 2011 at 11:02

benastan

2,27815 silver badges14 bronze badges

answered Dec 10, 2011 at 3:36

marcocamejo

8281 gold badge8 silver badges21 bronze badges

Comments

ThinkingStiff · Accepted Answer · 2013-06-24 16:33:15Z

7

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:

<a id="showTags" href="#" title="Show Tags">Show All Tags</a>
<ul id="subforms" class="subforums hide"><li>one</li><li>two</li><li>three</li></ul>

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();
    };
};

edited Jun 24, 2013 at 16:33

answered Dec 10, 2011 at 6:26

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

3 Comments

jeromej Over a year ago

What about document.getElementById('#potato').classList.toggle('hide') instead of creating a prototype?

ThinkingStiff Over a year ago

@JeromeJ .toggle() is not a Javascript function (there is a jQuery .toggle()). Also, .getElementById() will not take hash notation (also jQuery).

jeromej Over a year ago

oups about the hash! Though, the .toggle() DOES exist in JavaScript (I use it on my website) but it has the same effect has toggleClass from jQuery, so it is not to be confound with the jQuery's .toggle(). jQuery to js alternatives: toddmotto.com/…

Pedro404 · Accepted Answer · 2022-09-07 20:56:45Z

4

LEVEL - I

document.querySelector('.my-btn').addEventListener('click', myFunction);

function myFunction() {
  document.querySelector('.subforums').classList.toggle("off");
}

.off {
  display: none;
}

<a href="#" title="Show Tags" class="my-btn">Show All Tags</a>
<div class="subforums off">My text...</div>

LEVEL - II

Toggle hide element Id end className...

function toggleElem(newElem) {
    var elem = document.getElementById('' + newElem + '');
    var eIdent = (elem != null) ? ('#' + newElem) : ('.' + newElem);
    elem = document.querySelector('' + eIdent + '');
    elem.style.display = (elem.style.display != 'none') ? 'none' : 'block';
}

You can test directly from this link: https://codepen.io/pedro404/pen/VwmPBee

edited Sep 7, 2022 at 20:56

answered Mar 8, 2021 at 20:29

Pedro404

1785 bronze badges

1 Comment

Machavity Over a year ago

This works fine... unless you've got an element that doesn't take well to display:block.

agarcian · Accepted Answer · 2011-12-10 13:42:17Z

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.

Collectives™ on Stack Overflow

Toggle display:none style with JavaScript

5 Answers 5

Comments

Comments

3 Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related