We Keep Coding

Switching expand/collapse arrows on clicking different item

I am working on simple FAQ section, and I need a little bit help.
The problem is that when I switch between questions, the expand/collapse arrow will stay UP. Do you have any suggestions?
$(document).ready(function(){
var nadpis = $('.nadpis');
nadpis.on('click', function () {
$(this).siblings().slideToggle()
$(this).children().toggleClass("off on")
nadpis.not(this).siblings().slideUp();
});
});
.textbox:first-child p {
display: none;
}
.nadpis {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 5em;
border-bottom: 1px solid;
}
.off i:nth-child(2) {
display: none;
}
.off i:first-child {
display: block;
}
.on i:nth-child(2) {
display: block;
}
.on i:first-child {
display: none;
}
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7a8caae1e8.js" crossorigin="anonymous"></script>
<section class="faq-content">
<div class="faq-textside">
<div class="faq-text">
<div class="textbox">
<div class="nadpis">
<h2>How many team members can I invite?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>What is the maximum file upload size?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>How do I reset my password?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Can I cancel my subscription?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Do you provide additional support?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
Here is full code pen

Your toggleClass call only affects the content of the clicked item. Extend the scope of this effect: first select the container element, and then find all relevant "on" elements, and the "off" elements below the clicked item, and toggle those:
$(this).closest(".faq-text").find(".on")
.add($(this).find(".off"))
.toggleClass("off on")
Snippet:
$(document).ready(function(){
var nadpis = $('.nadpis');
nadpis.on('click', function () {
$(this).siblings().slideToggle()
$(this).closest(".faq-text").find(".on")
.add($(this).find(".off"))
.toggleClass("off on")
nadpis.not(this).siblings().slideUp();
});
});
.textbox p {
display: none;
}
.nadpis {
display: flex;
flex-direction: row;
align-items: baseline;
justify-content: space-between;
gap: 5em;
border-bottom: 1px solid;
}
.off i:nth-child(2) {
display: none;
}
.off i:first-child {
display: block;
}
.on i:nth-child(2) {
display: block;
}
.on i:first-child {
display: none;
}
<link href="https://fonts.googleapis.com/css2?family=Kumbh+Sans:wght#400;700&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/7a8caae1e8.js" crossorigin="anonymous"></script>
<section class="faq-content">
<div class="faq-textside">
<div class="faq-text">
<div class="textbox">
<div class="nadpis">
<h2>How many team members can I invite?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>You can invite up to 2 additional users on the Free plan. There is no limit on
team members for the Premium plan.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>What is the maximum file upload size?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> No more than 2GB. All files in your account must fit your allotted storage space.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>How do I reset my password?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Click “Forgot password” from the login page or “Change password” from your profile page.
A reset link will be emailed to you.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Can I cancel my subscription?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p>Yes! Send us a message and we’ll process your request no questions asked.</p>
</div>
<div class="textbox">
<div class="nadpis">
<h2>Do you provide additional support?</h2>
<div class="off">
<i class="fas fa-chevron-down"></i>
<i class="fas fa-chevron-up"></i>
</div>
</div>
<p> Chat and email support is available 24/7. Phone lines are open during normal business hours.</p>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
Unrelated remark
Make sure to hide all involved <p> elements when the pages loads. In the CSS replace this:
.textbox:first-child p {
display: none;
}
...with just this:
.textbox p {
display: none;
}

How to make a function in jQuery last longer?

When I click on one of the buttons with "arrow" class the whole nav is disappearing. (other than that, the jquery code is working well). But why it is happening? I want the whole nav to disappear when I click on the ".btn" again and not when I click on the button.arrow...
$('.btn').click(function() {
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>

The issue is that the .arrow elements are nested within the .btn element, so a click on an arrow is also a click on the button.
To avoid this, you could stop the event that is triggered by arrows from propagating to the button.
$('.btn').click(function() {
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
});
$('.arrow').click(function(event) {
event.stopPropagation();
// Do other work that should happen
// because an arrow got clicked
console.log("You clicked on an arrow element.");
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>

You want the .btn to toggle ONLY if the click event occured directly on the cog icon...
$('.btn').click(function(event) {
if($(event.target).is(".fa-cog")){
$(this).toggleClass("click");
$('.sidebar').toggleClass("show");
}
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>
I could also be as simple as this:
$('.fa-cog').click(function() {
$('.sidebar').toggleClass("show");
});
nav.sidebar {
display: none;
}
nav.sidebar.show {
display: block;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<main class="btn">
<span class="fas fa-cog"></span>
<nav class="sidebar">
<button class="arrow">X <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">X <i class="fas fa-arrow-circle-down"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-up"></i></button>
<button class="arrow">Y <i class="fas fa-arrow-circle-down"></i></button>
</nav>
</main>

FadeOut one element and fadeIn another element on hover

I'm trying to achieve an effect where on the hover of an element A, an element B is fadeOut and an element C is fadeIn, both inside the element A.
That's what I tried:
$('.button').hover(function() {
info = $(this).find('.info');
download = $(this).find('.download');
info.stop().fadeOut(150, function() {
download.stop().fadeIn(150);
})
}, function() {
download.stop().fadeOut(150, function() {
info.stop().fadeIn(150);
})
})
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
Hovering one element at a time seems working fine but when you try to hover more elements concurrently the animation it starts to break.
Any solution? Other approaches are accepted. Thanks.

The main problem is to stop the animation before assigning another. This way there are no glitches:
$('.button').each(function(i) {
var thisButton = $(this);
var thisInfo = thisButton.find('.info');
var thisDownload = thisButton.find('.download');
thisButton.on('mouseenter', function(e) {
thisDownload.stop();
thisInfo.stop().fadeOut(150, function() {
thisDownload.stop().fadeIn(150);
});
}).on('mouseleave', function(e) {
thisInfo.stop();
thisDownload.stop().fadeOut(150, function() {
thisInfo.stop().fadeIn(150);
});
});
});
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
<div class="button">
<div class="button_inner">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
</div>
Also on JSFiddle
Posting this because this may happen to skyline's answer:

You are inadvertently creating global variables for info and download by omitting the var, let, or const keywords. That means every function call is using and overwriting those variables. You need to create local variables in each function.
$('.button').hover(function() {
var info = $(this).find('.info');
var download = $(this).find('.download');
download.stop();
info.stop().fadeOut(150, function() {
download.stop().fadeIn(150);
})
}, function() {
var info = $(this).find('.info');
var download = $(this).find('.download');
info.stop();
download.stop().fadeOut(150, function() {
info.stop().fadeIn(150);
})
})
.button {
background-color: orange;
padding: 10px;
width: 250px;
height: 40px;
line-height: 40px;
text-align: center;
margin-bottom: 10px;
}
.download {
display: none;
font-size: 17px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>
<div class="button">
<div class="info">
<i class="fas fa-download"></i> <strong>Mega Limited</strong> 1GB
</div>
<div class="download">Download</div>
</div>

how to toggle a icon based on click?

I Have 3 Toggle Icons here
I want to change the icon to toggle on when its clicked like this enter image description here
I wrote a jquery for that but it only works for 1st icon .
function settingsClicked() {
$(document).ready(function() {
$('#settings-btn').click(function() {
$(this).toggleClass("fa-toggle-off fa-toggle-on");
});
});
}
settings {
padding: 10px;
}
.settings p {
display: inline;
font-size: 22px;
color: #1e698d;
font-family: 'Dosis', sans-serif;
font-weight: bold;
}
.settings i {
font-size: 30px;
padding-left: 10px;
}
.fa-toggle-on {
color: green;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard">
<form>
<fieldset class="dashboard-border">
<legend class="legend-border">Settings</legend>
<div class="settings">
<p>Settings 1 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
<div class="settings">
<p>Settings 2 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
<div class="settings">
<p>Settings 3 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
</fieldset>
</form>
</div>

The problem is you cannot use the same id for multiple elements. So first off, remove those duplicate ids.
You could try using an alternative selector instead, based on your HTML then the following should work:
$('div.settings i').click(function () {
$(this).toggleClass("fa-toggle-off fa-toggle-on");
});
This will select the i elements found within any div that has class="settings".

Its only working for the first button because you are replicating the id - each id needs to be unique. I have simply appended a number to the end of the id to ensure the id is unique. Note that you will need to alter the selector for the click handler - and sincethere are multiple elements - better to use a class.
<div class="dashboard">
<form>
<fieldset class="dashboard-border">
<legend class="legend-border">Settings</legend>
<div class="settings">
<p>Settings 1 : </p> <i class="fas fa-toggle-off" id="settings-btn1"></i>
</div>
<div class="settings">
<p>Settings 2 : </p> <i class="fas fa-toggle-off" id="settings-btn2"></i>
</div>
<div class="settings">
<p>Settings 3 : </p> <i class="fas fa-toggle-off" id="settings-btn3"></i>
</div>
</fieldset>
</form>
</div>

Try this:-
It is not valid way to having multiple Tags with same id.
$(document).ready(function() {
$('div.settings i').click(function () {
$(this).toggleClass("fa-toggle-off fa-toggle-on");
});
});
settings {
padding: 10px;
}
.settings p {
display: inline;
font-size: 22px;
color: #1e698d;
font-family: 'Dosis', sans-serif;
font-weight: bold;
}
.settings i {
font-size: 30px;
padding-left: 10px;
}
.fa-toggle-on {
color: green;
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard">
<form>
<fieldset class="dashboard-border">
<legend class="legend-border">Settings</legend>
<div class="settings">
<p>Settings 1 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
<div class="settings">
<p>Settings 2 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
<div class="settings">
<p>Settings 3 : </p> <i class="fas fa-toggle-off" id="settings-btn"></i>
</div>
</fieldset>
</form>
</div>

You can only use an id one time.
If you want to toggle it for every button you could do something like this:
$(document).ready(function() {
$('.settings-btn').click(function () {
$(this).toggleClass("fa-toggle-off fa-toggle-on");
});
});
settings {
padding: 10px;
}
.settings p {
display: inline;
font-size: 22px;
color: #1e698d;
font-family: 'Dosis', sans-serif;
font-weight: bold;
}
.settings i {
font-size: 30px;
padding-left: 10px;
}
.fa-toggle-on {
color: green;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dashboard">
<form>
<fieldset class="dashboard-border">
<legend class="legend-border">Settings</legend>
<div class="settings">
<p>Settings 1 : </p> <i class="fas fa-toggle-off settings-btn"></i>
</div>
<div class="settings">
<p>Settings 2 : </p> <i class="fas fa-toggle-off settings-btn"></i>
</div>
<div class="settings">
<p>Settings 3 : </p> <i class="fas fa-toggle-off settings-btn"></i>
</div>
</fieldset>
</form>
</div>

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>

$('.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>

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/

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>

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>