Show Hide tag by class in javascript (with and without JQuery)

Question

UPADTED: After examining another working example, I decided to try a JQuery aproach. So I updated the code accordingly. I am sure there is a 3 lines way to get what I did with 300.

The first 3 anchors has a javascript functions that shows 3 texts: T1, T2 and T3, each one by time. The last 2 anchors shows and hides the tag class ET (extra text).

<style type="text/css">
.active{color:red;}
.T2,.T3{display:none;}
</style>

<ul>
<li><a href="#" id="mary">Show Text 1</a> | <a href="#" id="sonya">Show Text 2</a> | <a href="#" id="katty">Show Text 3</a></li>
<li><a href="#" id="short">Hide Text 4</a> | <a href="#" id="long">Show Text 4</a></li>
</ul>

<h1><span class="T1">Hi, I am Mary</span><span class="T2">Hi, I am Sonya</span><span class="T3">Hi, I am Katty</span></h1>
<h2><span class="T1">I love apples</span><span class="T2">I love oranges</span><span class="T3">I love bannanas</span></h2>
<h3><span class="T1">And singing</span><span class="T2">And swimming</span><span class="T3">And walking</span></h3>

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

<p><span class="ET">Vestibulum hendrerit justo eu leo.</span></p>

This is what I could picture without knowing JQuery at all:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#mary, #long').addClass('active');
    $('#mary').click(function(event){
        event.preventDefault();
        $('.T2, .T3').hide();
        $('.T1').show();
        $(this).addClass('active');
        $('#katty, #sonya').removeClass('active');
    });
    $('#sonya').click(function(event){
        event.preventDefault();
        $('.T1, .T3').hide();
        $('.T2').show();
        $(this).addClass('active');
        $('#mary, #katty').removeClass('active');
    });
    $('#katty').click(function(event){
        event.preventDefault();
        $('.T1, .T2').hide();
        $('.T3').show();
        $(this).addClass('active');
        $('#mary, #sonya').removeClass('active');
    });
    $('#short').click(function(event){
        event.preventDefault();
        $('.ET').hide();
        $(this).addClass('active');
        $('#long').removeClass('active');
    });
    $('#long').click(function(event){
        event.preventDefault();
        $('.ET').show();
        $(this).addClass('lumi');
        $('#short').removeClass('lumi');
    });
});
</script>

I see show('.TE') while in the document you use class="ET". If you want to use the show/hide methods this way, then you must define the class ".TE" in the stylesheet. If you just want to show or hide one specific element, then you can give that element an ID, and use document.getElementById(id).style.display = "none" to hide it. — Elian Ebbing
– Elian Ebbing, Commented Jan 19, 2011 at 18:59

gion_13 · Accepted Answer · 2011-01-20 08:46:46Z

2

I can't really seem to know what's wrong in your code, but may i ask why are you modifying the stylesheet? I mean ..if i were to do that, i would try a different approach : do not modify the stylesheet, but attach new styles to the element.
The thing is that you can have multiple stylsheets with multiple css declarations for the same element(s) that can overwrite each other. In that case, your functions won't have the tiniest chance of working.
I would implement something like :

function modifyDisplay(className,display){
//display is a boolean indicating weather to display the class or to hide it
  var el = document.getElementsByTagName('span');
  for(var i=0,l=el.length;i<l;i++)
    {
      var classes = el.getAttribute('class').split(' ');
      var hasClass = false;
      for(var c in classes)
        if(classes[c] == className)
          {
            el.style.display = display ? "inline" : "none";
            hasClass = true;
            break;
          }
      if(!hasClass)
        el.style.display = !display ? "inline" : "none";
    }
}

and then you could create "shortcuts" to hide & show :

var show = function(className){
   return modifyDisplay(className,true);
};
var hide = function(className){
   return modifyDisplay(className,false);
};

And, of course if you are willing to take a peak at what javascript libs can do, in jquery all this could be written as following :

function show(className){
  $('span').hide();
  $('.'+className).show();
}

Oh, and another thing, when you declare a function or a variable (with or without the "var" keyword) in a globals scope, it will automatically be attached to the "window" object. There is no need for you to explicitly do so.
Sorry if i got carried away; I hope that this was what you were looking for.

edited Jan 20, 2011 at 8:46

answered Jan 19, 2011 at 18:50

gion_13

41.5k10 gold badges99 silver badges111 bronze badges

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

2 Comments

Roger Over a year ago

You are shoing me a way of doing this that I have never seen before. Do you think this works with the main browsers?

gion_13 Over a year ago

it should work fine in all browsers, although you may need to change some things to work best for you: you should add a dummy class on all of your spans : "<span class='T1 dummyClass'>Hi, I'm mary</span>" in order to not affect the display of all the spans in your page, and change the line var el = document.getElementsByTagName('span'); with var el = document.getElementsByClassName('dummyClass');

Anthony Grist · Accepted Answer · 2011-01-19 16:13:31Z

0

It looks like you're attempting to prototype the Javascript Window object with some new functions, which I don't think is possible. Just define them as functions and you should get better results.

answered Jan 19, 2011 at 16:13

Anthony Grist

38.4k8 gold badges64 silver badges76 bronze badges

2 Comments

Elian Ebbing Over a year ago

defining function myFunc() at root level is the same effect as adding myFunc() to the window object.

gion_13 Over a year ago

i don't think he was trying to prototype the window... he just wanted to make sure that his functions are global.

Collectives™ on Stack Overflow

Show Hide tag by class in javascript (with and without JQuery)

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related