Question

i am a newbie : /

I’ve found this code and just wanted to change “hover” into “click”. Which does not work unfortunately. Then i read a similar problem where someone suggested to insert obj.on('click', [selector,] function() instead of hover.

This doesn’t work too.

So, how can i make this code work just on a click instead hovering? Below is the original code. Would be great if someone could help out.

(function($) {
     $.fn.hoverexpand = function(options) {
     var defaults = {
       minHeight: '100px',           
       collapsedClass: 'expand-me',  
 event
       hoverTime: 250                /
     };
     var options = $.extend(defaults, options);

     return this.each(function() {
       var $obj = $(this);
       var origHeight = $obj.css('height');
       var timer = null;

       if( parseInt(origHeight) > parseInt(options.minHeight)) {
         $obj.css({
           height: options.minHeight,
           overflow: 'hidden'
         }).addClass(options.collapsedClass);

         $obj.hover(
           function() {  // click not mouseover
             if(!timer) {
               timer = window.setTimeout(function() { 
                 $obj.animate({height: origHeight }, 250).removeClass(options.collapsedClass);       //expand
                 timer = null;
               }, options.hoverTime);
             }
           },
           function() {  // mouseout
             if(timer) {
               window.clearTimeout(timer);
               timer = null;
             } else {
               $obj.animate({height: options.minHeight}, 250).addClass(options.collapsedClass);    //contract
             }
           }
         );
       }
     });   }; })(jQuery);

Answer 1

Use .toggle() which takes a list of functions to call on alternating clicks..

So instead of $obj.hover use $obj.toggle