Adjusting icons of accordion - css

Question

I have the following accordion setup: https://jsfiddle.net/n4tmjaqd/1/
I would like to change the icons of the tabs so that they become plus and minus icon. Plus when closed, and minus when opened. How can I adjust the CSS in order to make this change? Can it even be done with CSS only or does the function have to change? Any guidance is much appreciated. Thank you.
$(function() {
$('.accordion .accordion-title').on('click', toggleAccordion);
function toggleAccordion(event) {
var target = $(event.target).closest('.accordion-item');
target.parent('.accordion').find('.accordion-item').not(target).removeClass('is-open');
target.toggleClass('is-open');
}
});
CSS:
.accordion .accordion-item {
border-bottom: 1px solid #000;
}
.accordion .accordion-title {
position: relative;
padding: 15px;
cursor: pointer;
}
.accordion .accordion-content {
display: none;
padding: 0 15px 15px;
}
.accordion .accordion-item.is-open .accordion-content {
display: block;
}
.accordion .arrow {
position: absolute;
display: inline-block;
padding: 5px;
top: 13px;
right: 15px;
background-color: inherit;
border: solid #000;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.accordion .accordion-item.is-open .arrow {
top: 20px;
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
}
HTML:
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
TITLE 1
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 1
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<div class="accordion-title">
TITLE 2
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 2
</div>
</div>
<div class="accordion-item">
<div class="accordion-title">
TITLE 3
<span class="arrow"></span>
</div>
<div class="accordion-content">
CONTENT 3
</div>
</div>
</div>

Answer 1

Made smooth transition when click on the button.
You don't have to use multiple div for this, you can still make it simple I have just retained your HTML code, you can think for making it optimized in future.
here is how it looks:
var acc = document.getElementsByClassName("accordion-title");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion-title {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active,
.accordion-title:hover {
background-color: #ccc;
}
.accordion-title:after {
content: '\002B';
color: red;
/* change the color you want here */
font-weight: bold;
float: right;
margin-left: 5px;
}
.active:after {
content: "\2212";
}
.accordion-content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="accordion">
<div class="accordion-item">
<button class="accordion-title">TITLE 1</button>
<div class="accordion-content">
CONTENT 1
</div>
</div>
</div>
<div class="accordion">
<div class="accordion-item">
<button class="accordion-title">TITLE 2</button>
<div class="accordion-content">
CONTENT 2
</div>
</div>
<div class="accordion-item">
<button class="accordion-title">TITLE 3</button>
<div class="accordion-content">
CONTENT 3
</div>
</div>
</div>