My goal is to create a functionality where clicking on a title will reveal content and change the icon next to the title.
The concept is to have a plus sign initially, and upon clicking, the content becomes visible and the icon changes to a minus sign.
Currently, I am working with SCSS and vanilla JavaScript, and here is what I have so far:
var jsaccordion = {
init: function (target) {
var headers = document.querySelectorAll("#" + target + " .accordion-titulo");
if (headers.length > 0) { for (var head of headers) {
head.addEventListener("click", jsaccordion.select);
}}
},
select: function () {
var contents = this.nextElementSibling;
contents.classList.toggle("open");
}
};
window.addEventListener('load', function(){
jsaccordion.init("accordion-definiciones");
});.accordion-titulo::before {
content: ".";
display: block;
background: url("./../Iconos/Icono\ some-icon");
background-repeat: no-repeat;
background-position: center;
cursor: pointer;
width: 35px;
height: 35px;
color: transparent;
float: right;
}
.accordion-texto {
display: none;
color: #808080;
padding: 15px;
}
.accordion-texto.open {
display: block;
}
.accordion-titulo.open {
background: url("./../Iconos/Icono\ some-different-icon.svg");
background-repeat: no-repeat;
background-position: 98% center;
}<div id="accordion-definiciones">
<div class="my-3">
<h3 class="accordion-titulo ">¿Lorem ipsum?</h3>
<div class="accordion-texto">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Illo, animi perferendis necessitatibus sint molestiae eius magni! Libero voluptas mollitia laudantium, ad nihil cum quibusdam rerum laboriosam quia ea facere temporibus.</p>
</div>
</div>
</div>
Even though it could be simpler with jQuery, I prefer to achieve this functionality using vanilla JavaScript.