I need assistance with a functionality on my website. I have a list of links, and when you click on any of them, it will toggle show/hide text below it in a separate div. Additionally, it hides all other divs if one of them is shown. The code that manages this is as follows:
$(document).ready(function(){
$('.targetDiv').hide();
$('.hideshow').click(function () {
$('#div' + $(this).attr('target')).toggle('').siblings('.targetDiv').hide('');
});});
Below is an example of what the link looks like:
<a class="hideshow" target="1"><div class="cennikPlus"><i class="fa fa-plus-square"></i></div>Something something</a>
My goal is to change the class from "fa-plus-square"
to "fa-minus-square"
when open and back to "fa-plus-square" when closed. I have come across the "toggleClass" method which should be useful in this scenario, but I am unsure how to select the i element inside the div within the anchor tag.
Can anyone provide guidance on how to achieve this?
The website where this functionality is needed can be found here