How to make a function in jQuery last longer? - javascript

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>

Related

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 toggle between three div's and two icons

When i click on one of the div the icon changes and it stays changed i want it when i click on it again to change back to how it was and to deselect itself is there any way i can change this without changing my code too much any suggestion?
function myFunction() {
var element = document.getElementById("demo");
element.classList.toggle("change");
}
function myFunction1() {
var element = document.getElementById("demo1");
element.classList.toggle("change");
}
function myFunction2() {
var element = document.getElementById("demo2");
element.classList.toggle("change");
}
$('.column1').click(function() {
var collapsed = $(this).find('i').hasClass('fas fa-check');
$('.example-class').find('i').removeClass('fas fa-check-circle');
$('.example-class').find('i').addClass('fas fa-check');
if (collapsed)
$(this).find('i').toggleClass('fas fa-check fas fa-check-circle')
});
.change {
border-color: blue;
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row1">
<div id="demo" onclick="myFunction()" class="column1">
<i class="fas fa-check"></i>
<h2>Learn</h2>
<p>I'm here to</p>
<p>look around</p>
</div>
<div id="demo1" onclick="myFunction1()" class="column1">
<i class="fas fa-check"></i>
<h2>Start</h2>
<p>I want to find my</p>
<p>first help desk</p>
</div>
<div id="demo2" onclick="myFunction2()" class="column1 clk">
<i class="fas fa-check"></i>
<h2>Switch</h2>
<p>I'm interested in</p>
<p>swtiching help desks</p>
</div>
</div>

Most Simplified jQuery solution
$('.column1').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
You don't need function or separate id for that just need a common class
$('.column1').click(function(){
$(this).addClass('active').siblings().removeClass('active');
});
/* Usefull CSS */
.column1.active{
color:blue;
border: 1px solid blue;
}
.fs5::before{
content:'\f00c';
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
.active .fs5::before{
content:'\f058';
font-family: "Font Awesome 5 Free";
font-weight: 900;
}
/* Just Some random CSS */
.column1 {
display: flex;
align-items: center;
margin-bottom: 5px;
padding: 0 5px
}
.column1 * {
margin-right: 5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row1">
<div class="column1">
<span class="fs5"></span>
<h2>Learn</h2>
<p>I'm here to</p>
<p>look around</p>
</div>
<div class="column1 active">
<span class="fs5"></span>
<h2>Start</h2>
<p>I want to find my</p>
<p>first help desk</p>
</div>
<div class="column1">
<span class="fs5"></span>
<h2>Switch</h2>
<p>I'm interested in</p>
<p>swtiching help desks</p>
</div>
</div>

function myFunction(el) {
// Toggle the class on main element
el.classList.toggle("change");
// Toggle both check and circle check classes
el.querySelector('i').classList.toggle('fa-check')
el.querySelector('i').classList.toggle('fa-check-circle')
}
.change {
border-color: blue;
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="row1">
<div id="demo" onclick="myFunction(this)" class="column1">
<i class="fas fa-check"></i>
<h2>Learn</h2>
<p>I'm here to</p>
<p>look around</p>
</div>
<div id="demo1" onclick="myFunction(this)" class="column1">
<i class="fas fa-check"></i>
<h2>Start</h2>
<p>I want to find my</p>
<p>first help desk</p>
</div>
<div id="demo2" onclick="myFunction(this)" class="column1 clk">
<i class="fas fa-check"></i>
<h2>Switch</h2>
<p>I'm interested in</p>
<p>swtiching help desks</p>
</div>
</div>

Does this help? Modified your click(function(){});.
function myFunction() {
var element = document.getElementById("demo");
element.classList.toggle("change");
}
function myFunction1() {
var element = document.getElementById("demo1");
element.classList.toggle("change");
}
function myFunction2() {
var element = document.getElementById("demo2");
element.classList.toggle("change");
}
$('.column1').click(function() {
var collapsed = $(this).find('i').hasClass('fas fa-check');
if (collapsed)
$(this).find('i').toggleClass('fas fa-check fas fa-check-circle')
if(!collapsed)
$(this).find('i').toggleClass('fas fa-check fas fa-check-circle')
});
.change {
border-color: blue;
color: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div class="row1">
<div id="demo" onclick="myFunction()" class="column1">
<i class="fas fa-check"></i>
<h2>Learn</h2>
<p>I'm here to</p>
<p>look around</p>
</div>
<div id="demo1" onclick="myFunction1()" class="column1">
<i class="fas fa-check"></i>
<h2>Start</h2>
<p>I want to find my</p>
<p>first help desk</p>
</div>
<div id="demo2" onclick="myFunction2()" class="column1 clk">
<i class="fas fa-check"></i>
<h2>Switch</h2>
<p>I'm interested in</p>
<p>swtiching help desks</p>
</div>
</div>

Just recommendation.
Do you know alpin.js?
It will make it easy.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"/>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine#v2.x.x/dist/alpine.min.js"
defer></script>
<div class="row1" x-data="sampleData">
<template x-for="item in items">
<div id="demo" #click="check($event, item)" class="column1"
:class="{change:item.checked}">
<i class="fas"
:class="item.checked?'fa-check-circle':'fa-check'"></i>
<h2 x-text="item.title"></h2>
<p x-text="item.line1"></p>
<p x-text="item.line2"></p>
</div>
</template>
</div>
<style>
.change {
border-color: blue;
color: blue;
}
</style>
<script>
window.sampleData = {
items: [
{
title: 'Lean',
line1: 'I am here to',
line2:'look arround',
checked: false
},
{
title: 'Start',
line1: 'I want to find my',
line2: 'first help desk',
checked: false
},
{
title: 'Switch',
line1: 'I\'m interested in',
line2: 'swtiching help desks',
checked: false
},
],
check(e, item) {
item.checked = !item.checked
}
}

open div on click of image

I have a very simple module to develop. On click of an image I need to open up a div element that I have created.I have attached my HTML and javascript file.When I am loading the page the div wont be coming because I have given style="display:none
myfunction() {
document.getElementById('Chatbot').style.visibility = "visible";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
<img src="sticky.png" style="width:50px;height:50px">
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

document.getElementById('Chatbot').style.display = "block";
function myfunction() {
document.getElementById('Chatbot').style.display = "block";
}
<body>
<a href="#Chatbot" id="chat" onclick="myfunction()">
Some Image
</a>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

Avoid using inline scripts and also avoid capitalising the first letter of your ID or class name.
Just add an event listener to your #chat anchor link that loads a function which sets the css display property of your div to block on click like this:
/* JavaScript */
var chat = document.getElementById("chat");
var div = document.getElementById('chatbot');
function showDiv(){
div.style.display = "block";
}
chat.addEventListener("click", showDiv);
/* CSS */
a {text-decoration: none; padding: 5px; background-color: green; color: white;}
#chatbot {display: none;}
<!-- HTML -->
<a type="button" href="#Chatbot" id="chat">Open Div</a>
<hr>
<div id="chatbot">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>

It can be a simple way
<script>
$( document ).ready(function() {
$('#chat').click( function(){
if ( $('#Chatbot').hasClass('active') ) {
$('#Chatbot').removeClass('active');
} else {
$('#Chatbot').addClass('active');
}
});
});
</script>
Add lil css
<style>
.active {
display:block!important;
}
</style>
Your HTML
<body>
<div id="chat">
Some Image
</div>
<div id="Chatbot" style="display:none">
<div id="header">
Legal Genie
<div class="icons">
<i class="fa fa-question-circle" aria-hidden="true"></i>
<i class="fa fa-refresh" aria-hidden="true"></i>
<i class="fa fa-times" aria-hidden="true"></i>
</div>
</div>
<div><textarea rows="3" cols="20">Press enter to send your message</textarea>
</div>
</div>
</body>

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>

How can I create a marking an answer as accepted one system?

Explanation: I'm trying to make an accepted-answer system and there are three cases:
marking a new answer as accepted one (there is no accepted answer already)
undo a accepted answer
switching from one answer to another one
Here is my code:
$("body").on('click', '.fa-check', function(e) {
// send a request by ajax and if it is successful then
if( this.attr('color') == '#44b449' ){ // undo
this.css({"color":"#aaa"}); // set gry color to marked icon
} else { // switchin or marking a new one
$('.fa-check').css({"color":"#aaa"}); // set gray color to all icons
this.css({"color":"#44b449"}); // set green color to marked icon
}
});
.fa-check{
color:#aaa;
cursor: pointer;
}
.fa-check:hover{
color: #999;
}
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check" aria-hidden="true" style="color: #44b449;"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
But as you see my code doesn't work. How can I fix it?
Note: The whole of my question is about coloring.

Firstly your code is throwing errors as you're calling jQuery methods on this when it refers to a DOMElement, not a jQuery object.
To fix your issues you can simplify your logic by using classes instead of applying inline CSS styling. This allows you to simply toggle the class on click of the .fa-check element. Try this:
$("body").on('click', '.fa-check', function(e) {
// send a request by ajax and if it is successful then
$('.fa-check').not(this).removeClass('checked');
$(this).toggleClass('checked');
});
.fa-check {
color: #aaa;
cursor: pointer;
}
.fa-check.checked {
color: #44b449;
}
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
<hr>
<p>answer2</p>
<i class="fa fa-check checked" aria-hidden="true"></i>
<hr>
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>

Use this method
function click_div(div) {
$("#main_div div .fa-check").css("color"," #aaa");
$("#"+div+" .fa-check").css("color"," #44b449");
}
#div_1,#div_2,#div_3
{
width:100%;
height:100px;
}
.fa-check{
color:#aaa;
cursor: pointer;
}
.fa-check:hover{
color: #999;
}
<html>
<head>
<script src="https://use.fontawesome.com/9e9ad91d21.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div id="main_div">
<div id="div1" onclick="click_div('div1')">
<p>answer1</p>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
<hr>
<div id="div2" onclick="click_div('div2')">
<p>answer2</p>
<i class="fa fa-check" aria-hidden="true" style="color: #44b449;"></i>
</div>
<hr>
<div id="div3" onclick="click_div('div3')">
<p>answer3</p>
<i class="fa fa-check" aria-hidden="true"></i>
</div>
</div>
</html>

Categories