Stuck in jQuery down arrow icon - html

Question

Hey Everyone,
i am trying to change the plus text symbol to arrow icon in jQuery am tried but not
working for me, is there by chance we can change that plus to arrow icon.
I hope anyone could help me this out, i trying to create some jQuery toggle animations.
Thanks
$(document).ready(function() {
$(".accordion_head").click(function() {
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(300);
$(".plusminus").text('+');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(300);
$(this).children(".plusminus").text('+');
} else {
$(this).next(".accordion_body").slideDown(300);
$(this).children(".plusminus").text('-');
}
});
});
.accordion_head {
/* background-color: skyblue; */
color: #1D5AA6;
cursor: pointer;
border-bottom: 1px solid #f3f3f3;
padding: 2rem;
}
.accordion_body {
background: lightgray;
}
.accordion_body p {
padding: 18px 5px;
margin: 0px;
}
.plusminus {
float: right;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion_container">
<h3 class="accordion_head">
First Accordian Body, it will have Header
<span class="plusminus">+</span></h3>
<div class="accordion_body" style="display: none;">
<p>First Accordian Body, it will have description</p>
</div>
<div class="accordion_head">Second Accordian Head<span class="plusminus">+</span></div>
<div class="accordion_body" style="display: none;">
<p>Second Accordian Body, it will have description</p>
</div>
<div class="accordion_head">Third Accordian Head<span class="plusminus">+</span></div>
<div class="accordion_body" style="display: none;">
<p>Third Accordian Body, it will have description</p>
</div>
</div>

Answer 1

use font awesome icon or material icon or use some other icons to achieve this. Here I used fa icons to achieve this
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
and slightly modified jquery.
use $(".plusminus > i").removeClass('fa-angle-up').addClass('fa-angle-down'); instead of
$(this).children(".plusminus").text('+');
and use $(this).find(".plusminus > i").removeClass('fa-angle-down').addClass('fa-angle-up'); instead of $(this).children(".plusminus").text('-');
$(document).ready(function() {
$(".accordion_head").click(function() {
if ($('.accordion_body').is(':visible')) {
$(".accordion_body").slideUp(300);
$(".plusminus > i").removeClass('fa-angle-up').addClass('fa-angle-down');
}
if ($(this).next(".accordion_body").is(':visible')) {
$(this).next(".accordion_body").slideUp(300);
$(this).find(".plusminus > i").removeClass('fa-angle-up').addClass('fa-angle-down');
} else {
$(this).next(".accordion_body").slideDown(300);
$(this).find(".plusminus > i").removeClass('fa-angle-down').addClass('fa-angle-up');
}
});
});
.accordion_head {
/* background-color: skyblue; */
color: #1D5AA6;
cursor: pointer;
border-bottom: 1px solid #f3f3f3;
padding: 2rem;
}
.accordion_body {
background: lightgray;
}
.accordion_body p {
padding: 18px 5px;
margin: 0px;
}
.plusminus {
float: right;
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion_container">
<h3 class="accordion_head">
First Accordian Body, it will have Header
<span class="plusminus"><i class='fa fa-angle-up' style='font-size:36px'></i></span></h3>
<div class="accordion_body" >
<p>First Accordian Body, it will have description</p>
</div>
<div class="accordion_head">Second Accordian Head<span class="plusminus"><i class='fa fa-angle-down' style='font-size:36px'></i></span></div>
<div class="accordion_body" style="display: none;">
<p>Second Accordian Body, it will have description</p>
</div>
<div class="accordion_head">Third Accordian Head<span class="plusminus"><i class='fa fa-angle-down' style='font-size:36px'></i></span></div>
<div class="accordion_body" style="display: none;">
<p>Third Accordian Body, it will have description</p>
</div>
</div>