add a triangle icon to the div opening and closing

Question

I have the code where onclick of the link, i am opening and closing the div

here is the code

<div id="opendialog" style="display:none;">
      <div style="width:100%;height:200px;background:grey;"></div>
    </div>

the function

function openx() {
      var x= document.getElementById("opendialog");
      if (x.style.display === "none") {
        x.style.display = "block";
      } else {
        x.style.display = "none";
      }
    }

it works well but how can i add a traingle to the link when clicked it should show a traingle to the div, trying in a way that if the screen is small or bigger, the traingle should be placed properly under the link when clicked and should not be a problem

here is the html i have

<div onclick="openx()">+ Add <div>

Answer 1

You can use font-awesome icon for triangle up and down. You just need to add and remove class accordingly.

function openx() {
      var x= document.getElementById("opendialog");
      if (x.style.display === "none") {
        x.style.display = "block";
        document.getElementById("myIcon").innerHTML = "?";
      } else {
      document.getElementById("myIcon").innerHTML = "?";
        x.style.display = "none";
      }
    }

#myIcon {
margin-bottom: 3px;
font-size: 20px;
font-weight: bolder;
}

#myIcon:hover {
cursor: pointer;
}

<div onclick="openx()"><div id="myIcon">?</div><div>

<div id="opendialog" style="display:none;">
      <div style="width:100%;height:200px;background:grey;"></div>
</div>