Kcko
12/18/2017 - 3:03 PM

Custom events - jquery

  <dl>
    <dt>Question</dt>
    <dd>Answer</dd>
  </dl>
$.fn.faq = function(options) {
    
	return this.each(function(i, el) {

	  var base = el,
              $base = $(el);
          
          console.log(options);
	  
	  base.init = function() {
	    // Do initialization stuff
            $base
               .find("dd")
               .hide()
               .end()
               .find("dt")
               .click(function() {
                 
                 var ans = $(this).next();
                 
                 if (ans.is(":visible")) {
                   base.closeQ(ans); 
                 } else {
                   base.openQ(ans); 
                 }
                 
               })
	  };
	  
	  base.openQ = function(ans) {
	  	// Open panel
                ans.show();
		
		// Do callback
                ans.trigger("ansOpen");
	  };
	  
	  base.closeQ = function(ans) {
	  	// Open panel
                ans.hide();
		
		// Do callback
		ans.trigger("ansClose");
	  };
	  
	  base.init();
	       
	});
  
};

$("dl").faq();
  
$("dd").on("ansOpen", function() {
  alert("answer opened!");
});

$("dd").on("ansClose", function() {
  alert("answer closed!");
});
  <dl>
    <dt>Example Question #1</dt>
    <dd>Answer #1</dd>
    <dt>Example Question #2</dt>
    <dd>Answer #2</dd>
    <dt>Example Question #3</dt>
    <dd>Answer #3</dd>
  </dl>
$.fn.faq = function(options) {
    
	return this.each(function(i, el) {

	  var base = el,
              $base = $(el);
          
          console.log(options);
	  
	  base.init = function() {
	    // Do initialization stuff
            $base
               .find("dd")
               .hide()
               .end()
               .find("dt")
               .click(function() {
                 
                 var ans = $(this).next();
                 
                 if (ans.is(":visible")) {
                   base.closeQ(ans); 
                 } else {
                   base.openQ(ans); 
                 }
                 
               })
	  };
	  
	  base.openQ = function(ans) {
	  	// Open panel
                ans.show();
		
		// Do callback
		options.qOpen.call();
	  };
	  
	  base.closeQ = function(ans) {
	  	// Open panel
                ans.hide();
		
		// Do callback
		options.qClose.call();
	  };
	  
	  base.init();
	       
	});
  
};

$("dl").faq({
  qOpen: myQuestionOpenCallback,
  qClose: myQuestionCloseCallback
});

function myQuestionOpenCallback() {
  alert("answer opened!");
}

function myQuestionCloseCallback() {
  alert("answer closed!");
}