I've encountered an issue with the code snippet below. When I replace fa-folder with fa-caret-right and fa-folder-open with fa-caret-down, the functionality stops working, and I can't figure out why. Any assistance on this matter would be highly appreciated. Thank you!
<html>
<head>
<style>
.accordion {
cursor: pointer;
}
.panel {
display: none;
}
.panel.show {
display: block;
margin-left: 20px;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">
</head>
<body>
<p class="accordion"><i class="fa fa-folder" aria-hidden="true"></i> Building Guides</p>
<div class="panel">
<p><i class="fa fa-file-pdf-o" aria-hidden="true"></i> Accessory Structures Building Guide 2012</p>
<p><i class="fa fa-file-pdf-o" aria-hidden="true"></i> Basement Finish Building Guide 2012</p>
<p><i class="fa fa-file-pdf-o" aria-hidden="true"></i> Decks Building Guide 2012</p>
</div>
<script>
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.nextElementSibling.classList.toggle("show");
this.firstChild.classList.toggle("fa-folder-open");
}
}
</script>
</body>
</html>