Entire chunk of my website just not displaying. Stumped!

JavaScript
1

No idea whats going on. Please see the link below. any of the pages under ‘catelog’ are not displaying the items I had programmed in. If you do a view source, you will see all the content within <div class=“toggle_container”> is not showing. I double checked all my css paths, and my jquery paths, but I just can’t make sense of why its not showing?

Also this happened out of nowhere. I did not change anything within these files for months. Maybe some issue with my host?

http://embetc.com/catalog-fire.php

EDIT: Just noticed that the sections i had are quickly animating and disappearing all together. Looks like its a jquery problem. Can someone move to appropriate forum?

Thanks!!

2

Hi there,

On each of these pages you have the following code:

$(document).ready(function(){
  $(".toggle_container").hide();
  $("h2.trigger").toggle(function(){
    $(this).addClass("active");
  }, function () {
    $(this).removeClass("active");
  });

  $("h2.trigger").click(function(){
    $(this).next(".toggle_container").slideToggle("slow,");
  });
});

The problem is that the initial call to toggle() is hiding any <h2> elements on the page which have a class of “trigger”.
This is actually what toggle() is meant to do - display or hide the matched elements.
If you remove this, then your content will be visible again.

If you want to add/remove a class to the <h2> elements depending on whether their next sibling is visible, you can do it using [toggleClass()](http://api.jquery.com/toggleClass/):

$(document).ready(function(){
  $(".toggle_container").hide();
	
  $("h2.trigger").click(function(){
    $(this).next(".toggle_container").slideToggle("slow,");
    $(this).toggleClass("active");
  });
});;