jQuery Plugin Workshop Dropdown menu

index.html

<h2>Dropdown Menu</h2>
<div class="dropdown">
  <a data-toggle="dropdown" href="#">Dropdown</a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li><a tabindex="-1" href="#">Action</a></li>
    <li><a tabindex="-1" href="#">Another action</a></li>
    <li><a tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>

script.js

// Clear the console
console.clear();

(function ($) {
  $.fn.dropdown = function () {    
    return this.each(function () {
      var $self = $(this);
     
      $self.click(function () {
        $self.next(".dropdown-menu").toggle();
        return false;
      });
    });    
  };
  
  $("[data-toggle='dropdown']").dropdown();

})(jQuery);

style.scss

@import "compass";
body { padding: 10px; }