CODEWITHSUNDEEP
javascriptjquery
user3547367
user3547367

Reputation: 173

how to toggle children element in jquery

I have parent button with <i> tag element as a children, which is, if i click the button class they will be trigger the toggle class for both parent and child so it set the condition active and inactive button if i move one button to the other, the problem is my toggle class for child element is not working when i click the active button it self, the check icon won't disappear. here is my code jsfiddle

$(document).ready(function(){
  $('.button').on("click", function() {
    $('.price-filter-active').not(this).removeClass('price-filter-active');
    $('.fa').removeClass('fa-check');

    $(this).toggleClass('price-filter-active');
    $(this).find("i").toggleClass('fa-check');
  })
})
.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 100px;
}
.price-filter-active {
  background: #42B549;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
    <div class="row-fluid">
        <button class="span2 button">
           1
            <i class="fa" aria-hidden="true"></i>
        </button>

        <button class="span2 button">
            2
            <i class="fa" aria-hidden="true"></i>
        </button>

        <button class="span2 button">
            3
            <i class="fa" aria-hidden="true"></i>
        </button>

        <button class="span2 button">
          4
            <i class="fa" aria-hidden="true"></i>
        </button>
    </div>
</div>

Upvotes: 1

Views: 1371

Answers (4)

Djaouad
Djaouad

Reputation: 22776

The problem is that you're not loading neither jQuery nor font-awesome in your fiddle, here is it working :

$('.button').on("click", function() {
  $('.price-filter-active').not(this).removeClass('price-filter-active');
  $('.fa').not($(this).find('.fa')).removeClass('fa-check');
  $(this).toggleClass('price-filter-active');
  $(this).find("i").toggleClass('fa-check');
})
.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 100px;
}
.price-filter-active {
  background: #42B549;
  color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 button">
      1
      <i class="fa" aria-hidden="true"></i>
    </button>

    <button class="span2 button">
      2
      <i class="fa" aria-hidden="true"></i>
    </button>

    <button class="span2 button">
      3
      <i class="fa" aria-hidden="true"></i>
    </button>

    <button class="span2 button">
      4
      <i class="fa" aria-hidden="true"></i>
    </button>
  </div>
</div>

Upvotes: 1

AG_
AG_

Reputation: 2689

change this line $('.fa').removeClass('fa-check'); to $('.price-filter-active').not(this).find("i").removeClass('fa-check'); 

$(document).ready(function(){
  $('.button').on("click", function() {
    
    $('.price-filter-active').not(this).removeClass('price-filter-active');
    $('.price-filter-active').not(this).find("i").removeClass('fa-check');

    $(this).toggleClass('price-filter-active');
    $(this).find("i").toggleClass('fa-check');
  })
})
.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 100px;
}
.price-filter-active {
  background: #42B549;
  color: white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.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="price-filter-container">
    <div class="row-fluid">
        <button class="span2 button">
           1
            <i class="fa" aria-hidden="true"></i>
        </button>

        <button class="span2 button">
            2
            <i class="fa" aria-hidden="true"></i>
        </button>

        <button class="span2 button">
            3
            <i class="fa" aria-hidden="true"></i>
        </button>

        <button class="span2 button">
          4
            <i class="fa" aria-hidden="true"></i>
        </button>
    </div>
</div>

Upvotes: 1

kyun
kyun

Reputation: 10264

$('.button').on("click", function() {

  $('.price-filter-active').not(this).find('i').removeClass('fa-check');
  $('.price-filter-active').not(this).removeClass('price-filter-active');
  $(this).toggleClass('price-filter-active');
  $(this).find("i").toggleClass('fa-check');
 
})
.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
  margin-top: 100px;
}
.price-filter-active {
  background: #42B549;
  color: white;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.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="price-filter-container">
    <div class="row-fluid">
        <button class="span2 button">
           1
            <i class="fa" aria-hidden="true"></i>
        </button>

        <button class="span2 button">
            2
            <i class="fa" aria-hidden="true"></i>
        </button>

        <button class="span2 button">
            3
            <i class="fa" aria-hidden="true"></i>
        </button>

        <button class="span2 button">
          4
            <i class="fa" aria-hidden="true"></i>
        </button>
    </div>
</div>

Upvotes: 1

PippLogic
PippLogic

Reputation: 56

It looks like you were missing including jQuery, which defines $. After including jQuery and fontawesome libraries to your fiddle, things seem to be working.

<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

https://jsfiddle.net/hggk6348/3/

Upvotes: 1

Related Questions