title: Toggle .active class with jquery
body: <p>I'm trying to toggle the class <code>.active</code> with jquery, heres what I've got so far:</p>
  
  <p><strong>html</strong></p>
  
  <pre><code>&lt;div class="downloadButtons"&gt;
              &lt;div class="download-button-wrapper"&gt;
                      &lt;div id="dd" class="desktopBackground downloadFontIcons" tabindex="1"&gt;DESKTOP
                          &lt;ul class="dropdown"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;2560 x 1440&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;1800 x 900&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="download-button-wrapper"&gt;
                      &lt;div id="de" class="tabletBackground downloadFontIcons" tabindex="1"&gt;PHONE
                          &lt;ul class="dropdown"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;640 x 960&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;1136 x 640&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;720 x 1280&lt;/a&gt;&lt;/li&gt;
  
                          &lt;/ul&gt;
                      &lt;/div&gt;
              &lt;/div&gt;  
  
  
              &lt;div class="download-button-wrapper"&gt;
                      &lt;div id="df" class="phoneBackground downloadFontIcons" tabindex="1"&gt;TABLET
                          &lt;ul class="dropdown"&gt;
                              &lt;li&gt;&lt;a href="#"&gt;2560 x 1600&lt;/a&gt;&lt;/li&gt;
                              &lt;li&gt;&lt;a href="#"&gt;2048 x 1536&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
              &lt;/div&gt;
          &lt;div style="clear:both"&gt;&lt;/div&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>css</strong></p>
  
  <pre><code>.downloadButtons{
      display: block;
      width: 780px;
      height: 200px;
      margin-left: 40px;
      margin-top: 30px;
  }
  
  /* GLOBALS - Dropdowns*/
  .downloadFontIcons{
      /* Size and position */
      position: relative; /* Enable absolute positionning for children and pseudo elements */
      width: 184px;
      height: 44px;
      margin: 0 auto;
      text-align: center;
      line-height: 44px;
      margin-right: 68px;
      font-size: .7em;
      color: #9ea7b3;
      background-color: #F9FAFC;
      cursor: pointer;
      outline: none;
      border: 1px solid #eaedf1;
  }   
  .downloadFontIcons .dropdown{
      /* Size &amp; position */
      position: absolute;
      top: 110%;
      left: 0px;
      right: 0px;
  
      /* Styles */
      background: white;
      -webkit-transition: all 0.3s ease-out;
      -webkit-transition-delay: 0s;
      -moz-transition: all 0.3s ease-out;
      -moz-transition-delay: 0s;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      -o-transition-delay: 0s;
      transition: all 0.3s ease-out;
      transition-delay: 0s;
      list-style: none;
  
      /* Hiding */
      opacity: 0;
      pointer-events: none;
  }
  
  ::selection {
      background: transparent; 
  }
  
  ::-moz-selection {
      background: transparent; 
  }
  
  .download-button-wrapper {
      *zoom: 1;
      float: left;
  }
  
  .downloadFontIcons  .dropdown li a {
      display: block;
      height: 44px;
      text-decoration: none;
      color: #9ea7b3;
      -webkit-transition: all 0.3s ease-out;
      -webkit-transition-delay: 0s;
      -moz-transition: all 0.3s ease-out;
      -moz-transition-delay: 0s;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      -o-transition-delay: 0s;
      transition: all 0.3s ease-out;
      transition-delay: 0s;
  }
  
  
  /* Hover state */
  .downloadFontIcons .dropdown li:hover a {
      color: #FFFFFF;
      background-color:#FF562A;
  }
  
  /* Active state */
  
  .downloadFontIcons.active .dropdown {
      opacity: 1;
      pointer-events: auto;
  }
  
  /* No CSS3 support */
  
  .no-opacity       .downloadFontIcons .dropdown,
  .no-pointerevents .downloadFontIcons .dropdown {
      display: none;
      opacity: 1; /* If opacity support but no pointer-events support */
      pointer-events: auto; /* If pointer-events support but no pointer-events support */
  }
  
  .no-opacity       .downloadFontIcons.active .dropdown,
  .no-pointerevents .downloadFontIcons.active .dropdown {
      display: block;
  }
  </code></pre>
  
  <p><strong>js</strong></p>
  
  <pre><code>       function DropDown(el) {
                  this.dd = el;
                  this.initEvents();
              }
              DropDown.prototype = {
                  initEvents : function() {
                      var obj = this;
  
                      obj.dd.on('click', function(event){
                          $(this).toggleClass('active');
                          event.stopPropagation();
                      }); 
                  }
              }
  
              $(function() {
  
                  var dd = new DropDown( $('#dd') );
  
                  $(document).click(function() {
                      // all dropdowns
                      $('.wrapper-dropdown-2').removeClass('active');
                  });
  
              });
  
  
  
              $(function() {
  
                  var de = new DropDown( $('#de') );
  
                  $(document).click(function() {
                      // all dropdowns
                      $('.wrapper-dropdown-2').removeClass('active');
                  });
  
              });
  
              $(function() {
  
                  var df = new DropDown( $('#df') );
  
                  $(document).click(function() {
                      // all dropdowns
                      $('.wrapper-dropdown-2').removeClass('active');
                  });
  
              }); 
  </code></pre>
  
  <p><a href="http://jsfiddle.net/UhSqd/" rel="nofollow">jsFiddle</a></p>
  
  <p>I need to toggle the active state of the buttons, for example as I click on the <code>desktop</code> button the dropdown list appears, then when I click on the <code>phone</code> button, I want the <code>desktop</code> list to disappear. I think the changes needed to be on this part of the code as with this code I think I'm only targeting <code>dd</code> elements:</p>
  
  <pre><code>function DropDown(el) {
    this.dd = el;
    this.initEvents();
  }
  DropDown.prototype = {
    initEvents : function() {
      var obj = this;
  
      obj.dd.on('click', function(event){
        $(this).toggleClass('active');
        event.stopPropagation();
      });
    }
  }
  </code></pre>
  
  <p>I have very little knowledge of javascript so not sure what do to. Need your help.</p>