CODEWITHSUNDEEP
javascriptjquery
Eugene Ross
Eugene Ross

Reputation: 87

Applying same toggle for two separate elements

So I have two block elements stacked on top of each other. When a user clicks on the top, it's supposed to toggle the content within that block, while the block below the first stays inactive showing no content. The code I have here opens both of them regardless of which one is clicked. I have my current code add and take away a class of 'active' to mark the div to display: block or none.

What am I missing?

function DropDown(element) {
  this.title = element;
  this.initEvents();
}

DropDown.prototype = {
  initEvents: function() {
    var obj = this;
    obj.title.on('click', function(event) {
      $(this).toggleClass('active');
      event.stopPropagation();
    });
  }
}

$(function() {
  var title = new DropDown($('.title'));
  $(document).click(function() {
    $('.drop').removeClass('active');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- block 1 -->
<div class="block1">
  <h3>
    <a href="#" class="title">Title 1<span class="pull-right plus">+</span></a>

  </h3>
  <div class="drop">
    <p class="clearfix">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sagittis est. Quisque dictum nibh justo, non venenatis lorem hendrerit lobortis. Nam eget volutpat tortor, nec blandit urna. In et purus et ipsum vestibulum sagittis nec et lacus. Sed
      gravida justo sed urna faucibus fermentum. Phasellus mollis, arcu et semper placerat, nibh leo fringilla ex, ac dictum turpis nisl sed justo. Etiam non eros tristique, ultrices odio vel, faucibus felis. Cras lorem diam, aliquet ac diam quis, suscipit
      dictum risus. Aliquam fringilla volutpat nulla at cursus. Cras suscipit lacus massa, scelerisque laoreet mi faucibus a.
    </p>
  </div>
</div>

<!-- block 2 -->
<div class="block2">
  <h3>
    <a href="#" class="title">Title 2<span class="pull-right plus">+</span></a>

  </h3>
  <div class="drop">
    <p class="clearfix">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vitae sagittis est. Quisque dictum nibh justo, non venenatis lorem hendrerit lobortis. Nam eget volutpat tortor, nec blandit urna. In et purus et ipsum vestibulum sagittis nec et lacus. Sed
      gravida justo sed urna faucibus fermentum. Phasellus mollis, arcu et semper placerat, nibh leo fringilla ex, ac dictum turpis nisl sed justo. Etiam non eros tristique, ultrices odio vel, faucibus felis. Cras lorem diam, aliquet ac diam quis, suscipit
      dictum risus. Aliquam fringilla volutpat nulla at cursus. Cras suscipit lacus massa, scelerisque laoreet mi faucibus a.
    </p>
  </div>
</div>

Upvotes: 0

Views: 62

Answers (1)

King Size
King Size

Reputation: 397

I have created a fiddle for you. This is updated and is working. Check this out if this is what you are looking for. I can then explain you what is done here.

obj.title.on('click', function(event) {
        $(this).parent().next('.drop').toggleClass('active');
  event.stopPropagation();
});

The change is did here is with where the active class is being toggled. I am toggling it on the "drop" element instead of "title" element.

Upvotes: 1

Related Questions