How can I toggle style(s) of a class?

Question

I have a list of paragraphs in a chatbox:

<div id=chatbox>
    <p><i>15:21</i><b data-c=john>john</b>: hello jack</p>
    <p><i>15:22</i>i want to tell you something</p>
    <p><i>17:17</i><b data-c=jack>jack</b>: hi john.</p>
    <p class=hidden><i>20:15</i>Ο <span data-c=server>server</span> alex joined the chat</p>
    <p><i>17:17</i><b data-c=alex>alex</b>: hi all of you.</p>
</div>

and I want to have a toggle button in order to show/hide the hidden elements. Is there a way to toggle the style of hidden class from display:none to display:inline and backwards?

Notice that if i change all existing class=hidden to visible, when AJAX brings a new hidden line, it will still be hidden in contrast with previous elements. Is there a way to change the content of a class style?

nwalton's answer below is the way to go, since you can't directly edit the content of a CSS rule. That answer works in your added case, with AJAX bringing in new lines. — Nate Cook, Mar 06 '14 at 18:55

score 2 · Accepted Answer · answered Mar 06 '14 at 18:53

It's a really bad idea to make javascript iterate through all of the elements to change the display when you can do it really easily by just toggling a class on a parent element.

Here's the codepen demo

When the button is clicked, you can just toggle a showHidden class on the #chatbox element, and use CSS to hide or display all of the hidden items inside it.

CSS:

.hidden {
  display: none;
}

#chatbox.showHidden .hidden {
  display: inline;
}

jQuery:

$(document).ready( function() {

  $('.toggleButton').on('click', function(){
    $('#chatbox').toggleClass('showHidden');
  });

});

adeneo · Answer 2 · 2014-03-06T19:00:54.490

Add a button

<div id=chatbox>
    <p><i>15:21</i><b data-c=john>john</b>: hello jack</p>
    <p><i>15:22</i>i want to tell you something</p>
    <p><i>17:17</i><b data-c=jack>jack</b>: hi john.</p>
    <p class=hidden><i>20:15</i>Ο <span data-c=server>server</span> alex joined the chat</p>
    <p><i>17:17</i><b data-c=alex>alex</b>: hi all of you.</p>
</div>
<button id="show_hidden">Show Hidden</button>

change the style for that class, and any future elements with that class

var button = document.getElementById('show_hidden'),
    hidden = true;

button.addEventListener('click', function() {
    var st = document.getElementById('myStyle');

    if (st) {
        st.innerHTML = '.hidden { display: '+ (hidden?'block':'none') +'; }';
    }else{
        var css = '.hidden { display: block; }',
            head = document.head || document.getElementsByTagName('head')[0],
            style = document.createElement('style');

        style.type = 'text/css';
        style.id   = 'myStyle';

        if (style.styleSheet){
            style.styleSheet.cssText = css;
        } else {
            style.appendChild(document.createTextNode(css));
        }
        head.appendChild(style);
    }

    button.innerHTML = (hidden ? 'Hide' : 'Show');
    hidden = !hidden;
}, false);

FIDDLE

Yes, but if i change all class=hidden to display:block, when AJAX brings a new hidden line, it will still be hidden in contrast with previous elements. Is there a way to change the content of a class style? — volk, Mar 06 '14 at 18:51
This is probably more complicated than it needs to be. A simple style sheet rule removes the need for most of the javascript. — nwalton, Mar 06 '14 at 19:11
@nwalton - You're right, I just undeleted the answer to show how to use javascript to change the style for a class, also for future elements, as that was the question, even if attaching the styles to a parent element solves this in a much nicer way. — adeneo, Mar 06 '14 at 19:16

score -1 · Answer 3 · edited May 23 '17 at 11:57

-1

if using jquery look up .toggle here http://api.jquery.com/toggle/

also see here for javascript only answer: Jquery .toggle replacement code

edited May 23 '17 at 11:57

Community

1
1

answered Mar 06 '14 at 18:42

FGhilardi

337
1
7

How can I toggle style(s) of a class?

3 Answers3