向 div 打开和关闭添加一个三角形图标

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>