CODEWITHSUNDEEP
javascriptjqueryhtmlcss
James
James

Reputation: 1706

jQuery and switching icons not toggling correctly

Any ideas on what I'm missing here? I want to toggle the clicked class so it is plus and minus but at the moment it just switches to minus and never back.

// Icon switch
$('.more').click(function() {
  var iconClass = $(this).is(':visible') ? 'less' : 'more';
  $(this).removeClass('more less').addClass(iconClass);
});
.icon {
  display: block;
  height: 18px;
  width: 18px;
  margin: 0 auto;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.icon.tick:before {
  content: "\f00c";
  color: #52555a;
}
.icon.info:before {
  content: "\f05a";
  height: 23px;
  width: 33px;
}
.icon.more:before {
  content: "\f067";
  cursor: pointer;
  height: 23px;
  width: 23px;
  color: #aad042;
}
.icon.less:before {
  content: "\f068";
  cursor: pointer;
  height: 23px;
  width: 23px;
  color: #aad042;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>

Upvotes: 0

Views: 124

Answers (1)

Tushar
Tushar

Reputation: 87203

Problem with your code is that $(this).is(':visible') is always going to return true, since you cannot click on an element which is not visible(except visibility:hidden).

You can use toggleClass() with multiple classes passed as follow:

$(this).toggleClass('more less');

in the handler

// Icon switch
$('.more').click(function() {
  $(this).toggleClass('more less');
});
.icon {
  display: block;
  height: 18px;
  width: 18px;
  margin: 0 auto;
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
.icon.tick:before {
  content: "\f00c";
  color: #52555a;
}
.icon.info:before {
  content: "\f05a";
  height: 23px;
  width: 33px;
}
.icon.more:before {
  content: "\f067";
  cursor: pointer;
  height: 23px;
  width: 23px;
  color: #aad042;
}
.icon.less:before {
  content: "\f068";
  cursor: pointer;
  height: 23px;
  width: 23px;
  color: #aad042;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>
<div class="icon more" data-reveal="reveal-one"></div>

Upvotes: 3

Related Questions