显示/隐藏具有相同类名的Div - Javascript

Question

I am trying to replicate something similar to what the Google Javascript from the Ground up Accomplishes

http://code.google.com/edu/submissions/html-css-javascript/#javascript

Basically have multiple div classes with the same name and show/hide those based on adding removing classes to the original class name.

Heres my markup

 <div class="vidItem" id="vidItem">
 <div class="vidTitle">
<h2></h2>
 </div>
 <div class="vidContain" id="vidContain">
 <iframe class="testtt" width="560" height="315" src="-----" frameborder="0" allowfullscreen>         </iframe>
</div>
   </div>

  <div class="vidItem" id="vidItem">
   <div class="vidTitle">
   <h2></h2>
   </div>
<div class="vidContain" id="vidContain">
    <iframe width="560" height="315" src="----" frameborder="0" allowfullscreen></iframe>
</div>
   </div>

Heres my javascript

var toggleExpando = function() {
 var expando = this.parentNode;

  if (hasClass(expando, 'hide')) {

      removeClass(expando, 'hide');
      addClass(expando, 'show');

  } else {

      removeClass(expando, 'show');
      addClass(expando, 'hide');
}
};


var expandos = getElementsByClass('vidContain');
for (var i=0; i < expandos.length; i++) {
     addClass(expandos[i], 'hide');
     var expandoTitle = document.getElementById('vidItem');
     addEventSimple(expandoTitle, 'click', toggleExpando);
}

---

   }

Onload both of the divs seem to set their classes to hide just fine but when I click on the top one everything disappears but when I click on the bottom one nothing happens. I am assuming there is a problem with my for loop and also where it says (expando = this.parentNode). I have no idea where to go from here.

Any help or ideas would be appreciated.

Answer 1

Javascript assumes that there is only one element with specific id (and this is what standard say). So when you say..

var expandoTitle = document.getElementById('vidItem');

here the variable contains only first item with id vidItem and attaches event to that element only.

This can be corrected by using class names instead of id.

Answer 2

jQuery might be a good option for this. ID needs to be unique but classes don't, so you can query for all element with a class name in the same way you would with id's in straight javascript by using jQuery. Not sure on what you want the initial state to be so i'm hiding all on inital load. Something along the lines of below is what i mean. (code is untested. place it in the html head)

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('.vidItem').addClass('hide');
    $('.vidItem').click(function(){
        $('.vidItem').addClass('hide');
        $(this).removeClass('hide'); 
        $(this).addClass('show');
    });
});
</script>

If you want to make it look nice with transition effects you can use some of the build in jQuery ones such as:

$('.vidItem').fadeOut();
$(this).fadeIn();

or

$('.vidItem').slideUp();
$(this).slideDown();