CODEWITHSUNDEEP
javascripthtmlcssmeteor
Sujoy De
Sujoy De

Reputation: 229

I am not able to toggle between classes

HTML code

<template name="pI">
  <p class="bucket">
    <li class= "contentMain">{{{content}}}</li>
    <li><a href="#" class= "expandOrCollapse">(...)</a></li>
  </p>
</template>

JS code

    Template.pI.events({
      'click .expandOrCollapse':function(event){
       event.preventDefault();
       $(event.target).closest().toggleClass("contentMain Big");
      }
  });

CSS code

.contentMain{
    position: relative;
    overflow: hidden;
    height: 60px;
    top: -15px;
    font-family: Palatino Linotype, Georgia, Verdana, sans-serif;
}

.Big{
    position: relative;
    height: auto;
    top: -15px;
    font-family: Palatino Linotype, Georgia, Verdana, sans-serif;
}

I want the class "contentMain" to toggle to "Big" when I click on "expandOrCollapse" when the current class is "contentMain" and the class "Big" to toggle to "contentMain" when I click on "expandOrCollapse" when the current class is "Big". I do not think that I have made any mistake with regards to the JS codes. Any help and suggestions would be highly appreciated

Upvotes: 0

Views: 66

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388416

Because the element you are looking for is not a ancestor of the clicked element, instead the previous sibling of the clicked element's parent

$(event.target).parent().prev().toggleClass("contentMain Big");

The closest() method is used to find the first ancestor element matching the selector

Upvotes: 7

Related Questions