html text change,html - Javascript - Change text function question - Stack Overflow

Newbie javascript question: I have created a container and have coded them so that when the arrow is clicked the container expands/collapses to show the content. However, I would like to add a feature in which the arrow's direction also changes when clicked.

Here is an overview of what I am looking for:

on click, expand container to show hidden content

change the arrow from down-facing arrow (code= ∨) to up facing arrow (code=∧)

apply the same css styling to the up-facing arrow

on click, collapse container to hide content

change the arrow from up-facing to down-facing

Here is the code that I have gotten to work thus far, once the arrow is clicked the container expands/collapses:

function myFunction() {

var x = document.getElementById("this-container");

if (x.style.display === "none") {

x.style.display = "block";

} else {

x.style.display = "none";

}

}

I have tried other lines of javascript to get the arrow to change directions, with no luck. On thing that sort of work was using the javascript code to change the text upon click.. however doing so took away the expand/collapse function, and the text that it changed to did not pick up the set css styling.

Any help would be greatly appreciated!! :)

@epascarello Thanks for the tip, I think that actually maybe the easiest option. I did some research on how to use the toggle class, however, I think I maybe integrating it into my current code wrong? Here is the new code:

function myFunction() {

var x = document.getElementById("this-container");

if (x.style.display === "none")

{x.style.display = "block";x.toggleClass("drop-btn-do-down drop-btn-do-up");}

else {x.style.display = "none";}

}

The drop-down feature works, but the arrow direction does not change.