<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!");
}