JavaScript to change Chevron icon direction only changing it when clicking the chevron icon Options

[Bertolli]

Hi all,

I've been thrown into a website project and I'm still learning bits of CSS and HTML, please forgive me if I'm a bit vague or clueless!



I've built a product page that I'm very happy with, it has a function to expand when clicking the "Allergens" paragraph and that makes it show the"Contains milk" parargraph and the can collapse again if the "Allergens" paragraph is clicked again.

I had a few test users complain that it wasn't clear that the paragraph expanded, so I added a font awesome chevron icon (down facing). However I'd really like the font awesome chevron to flip around and face up on click of the "Allergens" Paragraph instead of staying static



I found a bit of code on w3schools(https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_like_dislike) that also had a script added it to my code which is below:



<p><a class="toggleButton" href="#collapseText5" aria-controls="collapseText" aria-expanded="false" data-toggle="collapse">ALLERGENS <i onclick="myFunction(this)" class="fa fa-chevron-down fa-fw pull-right"></i></a></p>

<div id="collapseText5" class="collapse">

<p>Contains Milk.</p>

</div>



<script> function myFunction(x) { x.classList.toggle("fa-chevron-up"); } </script>



With this the Chevron now flips between down and up on click, but only if you click the chevron itself. If I click the "ALLERGENS" paragraph the chevron stays in the same direction.



Can anyone help me in what to do so the chevron icon flips when clicking the paragraph and also retain the function to flip if I click the chevron icon itself?


As mentioned I'm very new to HTML and CSS, so please be patient with me

[Bertolli]

Thanks! I need to do some formatting, but that's perfect : ) thank you for your help.