תקלה ב JQ [ הכל עובד רק לא מפעיל אירוע ]

[hi_sorie]

http://nsns.co.il/מחירון%20לדוגמא,13.html

הבעיה היא פה...

מה שעשיתי :

שמתי 2 מאפייני css למחירון.

1 - cat - קטגוריה.
2 - product - מוצר.

שתיהם ב table כאשר ה tr של הקטגוריה הוא עם id="cat" והמוצר id="product".

מבחינת ה css :

.accordion2 {
 width: 480px;
 border-bottom: solid 1px #c4c4c4;
}
.accordion2 #cat {
 background: #e9e7e7 url(images/arrow-square.gif) no-repeat right -51px;
 padding: 7px 15px;
 margin: 0;
 font: bold 120%/100% Arial, Helvetica, sans-serif;
 border: solid 1px #c4c4c4;
 border-bottom: none;
 cursor: pointer;
}
.accordion2 #cat:hover {
 background-color: #e3e2e2;
}
.accordion2 #cat.active {
 background-position: right 5px;
}
.accordion2 #product{
 background: #f7f7f7;
 margin: 0;
 padding: 10px 15px 20px;
 border-left: solid 1px #c4c4c4;
 border-right: solid 1px #c4c4c4;
 display: none;
}

מבחינת הקוד jq :

		<script type="text/javascript">$(document).ready(function() {	$(".accordion2 #cat:first").addClass("active");	$(".accordion2 #product:not(:first)").hide();	$(".accordion2 #cat").click(function(){	  $(this).next("#product").slideToggle("slow")	  .siblings("#product:visible").slideUp("slow");	  $(this).toggleClass("active");	  $(this).siblings("#cat").removeClass("active");	});});</script>

המחלקה : http://nsns.co.il/jquery.js

יש רעיונות לבעיה ?