Skip to main content

Using custom events in jQuery example.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Custom Events</title>
</head>
<body>
  <dl>
    <dt>Question</dt>
    <dd>Answer</dd>
  </dl>

  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <script type="text/javascript">

    $.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();

        });
    };

    jQuery(document).ready(function() {
      $("dl").faq();

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

      $("dd").on("ansClose", function () {
          alert("answer closed!");
      });
    });
  </script>
</body>
</html>