CODEWITHSUNDEEP
jquery
Lucky500
Lucky500

Reputation: 507

issues with toggleClass, toggle icons not toggling

I tried couple of different jQuery Methods but was not able to get this to work. I am just looking for a simple solution to toggle 2 fontawesome icons. I can see the new class being added when I click, but the old class is not being removed.

$('.arrow-up').on('click', function(){
        $('.fa-chevron-down').toggleClass('fa-chevron-up');
      });
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
	<div class="row">
		<div class="col-md-10 offset-md-2 pt-3">
			<div class="btn btn-success arrow-up">
				<i class="fa fa-chevron-down">
              </i>
				Show this</div>
		</div>
	</div>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Any help will be appreciated.

Upvotes: 1

Views: 175

Answers (1)

Pranav C Balan
Pranav C Balan

Reputation: 115222

Toggle both classes by separating them by using a whitespace.

$('.arrow-up').on('click', function() {
  // select `i` tag with class `fa` withtin the div and toggle both classes
  $('i.fa', this).toggleClass('fa-chevron-up fa-chevron-down');
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="container">
  <div class="row">
    <div class="col-md-10 offset-md-2 pt-3">
      <div class="btn btn-success arrow-up">
        <i class="fa fa-chevron-down">
              </i>
        Show this</div>
    </div>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>

Upvotes: 2

Related Questions