CODEWITHSUNDEEP
jqueryhtmlcss
mingos
mingos

Reputation: 31

Inconsistent CSS formatting using toggleClass in JQuery

I am trying to toggle the CSS properties of a title by assigning them to classes and then toggling them in CSS. I have the collapse class which has an orange background and an expand class with a grey background. However when I try to toggle the classes, the class the title is initially assigned to simply enlarges and does not toggle. The class properties seem correct individually.

I believe my CSS code is written incorrectly but I am not sure where I have gone wrong. Many thanks in advance!

My code is as follows:

$(document).ready(function() {
  $('#H2_2').click(function() {
    $('#P_5').slideToggle(200);
    $('#H2_2').toggleClass('expand collapse');
  });
});
.collapse {
  color: rgb(0, 0, 0);
  display: block;
  letter-spacing: 1px;
  text-decoration: none;
  background: rgb(235, 235, 235) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-down.gif?1410") no-repeat scroll 98% 50%;
  font: 13px / 33px Montserrat;
  padding: 3px 10px;
}
.expand {
  color: rgb(255, 255, 255);
  display: block;
  letter-spacing: 1px;
  text-decoration: none;
  background: rgb(247, 146, 30) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-up.gif?1410") no-repeat scroll 98% 50%;
  font: 13px / 33px Montserrat;
  padding: 3px 10px;
}
<h2 id="H2_2">
  <a href="#" title="Expand/Collapse" class="expand">apple apple apple</a>
</h2>
<p id="P_5">
  test test
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Upvotes: 0

Views: 74

Answers (3)

Riddler
Riddler

Reputation: 576

You are setting the class 'expand' for <a>

    <h2 id="H2_2">
        <a href="#" title="Expand/Collapse" class="expand">apple apple apple</a>
    </h2>

But toggling h2 by $('#H2_2').toggleClass('expand collapse');

so the correct answer should be $('#H2_2>a').toggleClass('expand collapse');

Upvotes: 2

mholzer78
mholzer78

Reputation: 315

As Riddler said, you could overcome the problem by simply toggle the class for #H2_2>a, should work fine.

I would suggest you just throw away the expand-class and make it default for #H2_2 and only toggle the collapse-class. In this case you could also get rid of some lines that define the collapse-class as you would only have to overrule those styles you want to modify.

$(document).ready(function(){
    $('#H2_2').click(function(){
        $('#P_5').slideToggle(200);
        $('#H2_2').toggleClass('collapse');
    });
});

-

#H2_2 {
    color: rgb(255, 255, 255);
    display: block;
    letter-spacing: 1px;
    text-decoration: none;
    background: rgb(247, 146, 30) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-up.gif?1410") no-repeat scroll 98% 50%;
    font: 13px / 33px Montserrat;
    padding: 3px 10px;
}
.collapse {
    color: rgb(0, 0, 0);
    background: rgb(235, 235, 235) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-down.gif?1410") no-repeat scroll 98% 50%;
}

-

  <h2 id="H2_2">
        <a href="#" title="Expand/Collapse">apple apple apple</a>
  </h2>

Upvotes: 0

rafaelfndev
rafaelfndev

Reputation: 739

Create one class with value for both, and alternate only what you need:

$(document).ready(function() {
  $('#H2_2').click(function() {
    $('#P_5').slideToggle(200);
    $('#H2_2 .default').toggleClass('collapse');
  });
});
.default {
  display: block;
  letter-spacing: 1px;
  text-decoration: none;
  padding: 3px 10px;
  font: 13px / 33px Montserrat;
  transition: all 0.3s ease 0s;
}
.expand {
  color: rgb(255, 255, 255);
  background: rgb(247, 146, 30) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-up.gif?1410") no-repeat scroll 98% 50%;
}
.collapse {
  color: rgb(0, 0, 0);
  background: rgb(235, 235, 235) url("https://cdn.shopify.com/s/files/1/0038/1592/files/arrow-down.gif?1410") no-repeat scroll 98% 50%;
}
<h2 id="H2_2">
  <a href="#" title="Expand/Collapse" class="default expand">apple apple apple</a>
</h2>
<p id="P_5">
  test test
</p>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Upvotes: 0

Related Questions