$.fn.orphans = function(){
  var ret = [];
  this.each(function(){$.each(this.childNodes, function() {
    if (this.nodeType == 3 && $.trim(this.nodeValue)) ret.push(this)
    })}); 
   return $(ret);
}
//http://www.learningjquery.com/2008/02/simple-effects-plugins
/* jQuery.fn.blindToggle = function(speed, easing, callback) {
  var h = this.height() + parseInt(this.css('paddingTop')) + parseInt(this.css('paddingBottom'));
  return this.animate({marginTop: parseInt(this.css('marginTop')) < 0 ? 0 : -h}, speed, easing, callback); 
}; */
jQuery.fn.fadeToggle = function(speed, easing, callback) {
  return this.animate({opacity: 'toggle', height: 'toggle'}, speed, easing, callback);
};
//e/jq/s/jq
$(document).ready(function() {
    $('.expand').css('cursor','pointer').orphans().wrap('<a href="#expand/collapse" title="expand/collapse"></a>');
    $('.collapse').hide(); 
    /* ---  If you want to have your DIVs expanded by default when the page loads:
            remove: $('.collapse').hide();
            or add: $('.collapse.show').show(); and apply a class 'show' to the element to be shown by default
            Accordingly, change the code below and in the CSS, concerning the images (arrow-up and arrow-down)  --- */
    
    $('.product .expand').click(function() {
        $(this).toggleClass("arrow-up");
       
         $(this).next('.normal').slideToggle('fast');
    });
    
    $('.show3 .expand').click(function() {
        $(this).toggleClass("arrow-up");
        $(this).next('.normal').slideToggle();
       $(this).next('.normal').toggle();
		 $(this).next('.slow').toggle('slow');
    });
    
    $('.product2 .expand').click(function() {
        $(this).toggleClass("arrow-up");
        $(this).next('.normal').fadeToggle();
        $(this).next('.fast').fadeToggle('fast','easeIn');
    });
});