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>
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>