隐藏/显示内容，与类变更脚本相连

Question

也许你可以给我另一个问题的建议，让我告诉你什么是假设，我想创建一个脚本，点击向下的箭头后，将显示div内容，然后箭头将改变为一个，将建议点击后，内容将隐藏，箭头指向向上，我做了一个脚本，显示内容，我还创建了一个函数分配给onClick事件，改变类的这个图标来显示一个箭头,箭头更改好,唯一的问题是,单击向上箭头后,内容不隐藏,我不能合并的功能显示内容改变类的函数,因为函数显示的内容使用类的名字,你能告诉我一个解决方案或什么技术最好的这样做?我尝试了几种方法，都失败了，谢谢你的帮助!

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

Answer 1

你可以让你的HTML保持原样，用这个函数替换所有的JS。

首先，我们获得被点击元素的下一个兄弟元素，它是一个DIV。如果它当前是隐藏的，那么显示它并更新这个漂亮的图标。如果它已经可见，隐藏它。使用一个函数来切换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";
}

}

我简化了这个函数，所以你甚至不需要data-Type属性或类"test">