CODEWITHSUNDEEP
javascript
Roger
Roger

Reputation: 8576

How to show / hide all tags with the same class with Java Script?

I need a javascrit function that shows/hides all span tags with a specific class (t1, t2 or t3) in a HTML document. Example:

<script type="text/javascript">
<!--
    function sh(t){//show_hide(text number class)
       //???
    }
//-->
</script>

<div id='C'>
 <p>
  <span class="P">
   Normal allways visible text. 
   <span class="t1">Text 1</span> 
   <span class="t2">Text 2</span> 
   <span class="t3">Text 3</span> 
   Normal allways visible text.
  </span>
 </p>
 <p>
  <span class="P">
   Normal allways visible text. 
   <span class="t1">Text 1</span> 
   <span class="t2">Text 2</span> 
   <span class="t3">Text 3</span> 
   Normal (allways visible text.
  </span>
 </p>
 <p><span>Normal allways visible text.</span></p>
</div>

The function sh (show hide) could be trigerred like this:

<p>Show: <a href="#" onclick="sh('t1');">text 1</a> | <a href="#" onclick="sh(t2);">text 2</a> | <a href="#" onclick="sh(t3);">text 3</a></p>

An important detail is that when the span class t1 is visible, all other span class t2 and t3 are hidden. The default is to have all span class t1 visible at the first load.

Thanks a lot.

The folks have already got what I needed. There are two solutions:

Pure Javascript: http://jsfiddle.net/4DREQ/

With the help of JQuery: http://jsfiddle.net/v3vWM/3/

Upvotes: 1

Views: 1316

Answers (5)

Šime Vidas
Šime Vidas

Reputation: 185883

jQuery solution: http://jsfiddle.net/tEUYC/

Updated solution: http://jsfiddle.net/tEUYC/1/

Updated again: http://jsfiddle.net/tEUYC/2/

Upvotes: 1

Divi
Divi

Reputation: 1

JQuery is simpler and uses less code. Download Jquery from here and include in your project http://docs.jquery.com/Downloading_jQuery

Upvotes: -1

Elian Ebbing
Elian Ebbing

Reputation: 19027

You can modify the style definitions directly in javascript. It is a bit messy and you should check it on different browsers but it would look like this:

function findRule(selectorText)
{
    for(var i=0; i<document.styleSheets.length; i++)
    {
        // IE uses "rules", all other browsers use "cssRules".
        var rules = document.styleSheets[i].cssRules || document.styleSheets[i].rules;

        for(var j=0; j<rules.length; j++)
        {
            if(rules[j].selectorText == selectorText)
                return rules[j];
        }
    }
}

And then you can use something like:

findRule(".t1").style.backgroundColor = "Blue";

to change the definition of the style. This will reflect on all elements that use the css class "t1".

On the other hand, with jQuery you need only one line of code :-)

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 816282

As not all browsers support the all methods (e.g. IE does not support getElementsByClassName, I suggest to use a library like jQuery that makes cross-browser DOM access very easy.

But luckily, getElementsByTagName is supported by all browsers, so you could do:

var spans = document.getElementsByTagName('span');

function sh(cls) {
    for (var i = spans.length; i--;) {
        var element = spans[i];
        if (element.className.match(RegExp('\\b' + cls + '\\b'))) {
            element.style.display = (element.style.display === 'none') ? '' : 'none';
        }
    }
}

I don't know which spans you want to hide or show, so I just assume you are going to toggle the visibility of one group. If you are going to get the span elements only once like I did, then you have to put the script after the content (before the closing <body> tag). Otherwise the span element won't be found.

DEMO

If supported, using document.querySelectorAll might be even better. You could do:

window.sh = (function() {
    function toggleVisibility(element) {
        element.style.display = (element.style.display === 'none') ? '' : 'none';
    }

    if(typeof document.querySelectorAll === 'function') {
        return function(cls) {
            var spans = document.querySelectorAll('span.' + cls);
            for (var i = spans.length; i--;) {
                toggleVisibility(spans[i]);
            }
        };
    }
    else {
        var spans = document.getElementsByTagName('span');
        return function(cls) {
            for (var i = spans.length; i--;) {
                var element = spans[i];
                if (element.className.match(RegExp('\\b' + cls + '\\b'))) {
                    toggleVisibility(element);
                }
            }
       };
    } 
}());

This checks once whether querySelectorAll is supported creates an appropriate sh function.

DEMO 2

Upvotes: 3

Cameron Skinner
Cameron Skinner

Reputation: 54276

I recommend jQuery. You can do this in a single line of code:

$(".t1").hide();

For your case it sounds like you also want to take a look at the "accordion" widget in jQueryUI.

Upvotes: 0

Related Questions