maybe you could give me advice with another problem, let me tell you what are the assumptions, I want to create a script which, after clicking the down arrow, will show the div content,and then the arrow will change to one that will suggest that after clicking with it the content will hide, the arrow pointing up, I made a script that is showing content, I also created a function assigned to the onClick event, which changes the class of this icon to one that displays an up arrow, so the arrows change ok, the only problem is that after clicking the up arrow, the content does not hide, I can't merge the function that shows the content with the function of changing the class, because the function that shows the content uses the name of the class, can you direct me to a solution or what technologies are the best to do something like this? i was trying few way, all failed, thx for any help!
//js scripts(first one showing/hiding second one changeing class to change arrow icon)
var div2_elements = document.querySelectorAll(".fa-angle-double-down");
var item2_elements = document.querySelectorAll(".describe");
for (var i = 0; i < div2_elements.length; i++) {
div2_elements[i].addEventListener("click", function() {
div2_elements.forEach(function(div) {
div.classList.remove("active");
});
var div_value = this.getAttribute("data-Type");
item2_elements.forEach(function(item) {
item.style.display = "none";
});
if (div_value == "test1") {
document.querySelector("." + div_value).style.display = "block";
} else if (div_value == "test2") {
document.querySelector("." + div_value).style.display = "block";
} else {
console.log("");
}
});
};
function myFunction(element) {
if (element.className == "fas fa-angle-double-down") {
element.className = "fas fa-angle-double-up";
} else {
element.className = "fas fa-angle-double-down";
}
}<div class="works-h">
<p1>titte1</p1><i onclick="myFunction(this)" data-Type="test1" class="fas fa-angle-double-down"></i><br>
<div class="describe test1" style="display: none;">kontent1</div>
<br><br>
<p1>tittle2</p1><i onclick="myFunction(this)" data-Type="test2" class="fas fa-angle-double-down"></i><br>
<div class="describe test2" style="display: none;">kontent2</div>
</div>You can leave your HTML as-is and replace all that JS with this function.
First, we get the next sibling of the clicked on element that is a DIV. If it's currently hidden, show it and update the fontawesome icon. If it's already visible, hide it. Using one function to toggle the display of the DIV.
function myFunction(element){
d = document.evaluate("following-sibling::div", element, null,
XPathResult.FIRST_ORDERED_NODE_TYPE).singleNodeValue
if (d.style.display == "none"){
d.style.display = "block";
element.className = "fas fa-angle-double-up";
}else{
d.style.display = "none";
element.className = "fas fa-angle-double-down";
}
}
I simplified the function so you don't even need the data-Type attribute or class "test" on the DIV.