Is there a way to make the icon change back when clicked again without making major changes to the existing code? Looking for suggestions on how to achieve this functionality.
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>