I got a problem, i tried all day various version of this function.
I started modifying my accordion function to change or add style to specific class elements and after various ‘ versions ‘ of this function, i asked gpt and that also flipped me over with overcomplicated staff that doesn’t work.
Here is the code i have now
function toggleSnp(){
this.classList.toggle("active");
let snpElement = document.querySelectorAll('.snp');
snpElement.addEventListener('click');
if (snpElement.style.transform.scale === 'scale(3)') {
snpElement.style.transform = '';
}else{
snpElement.style.transform = 'scale(3)'
}
}
toggleSnp();
This is where i inspired of
let accordions;
function getAccordions()
{
accordions = document.getElementsByClassName("services");
for (let i = 0; i < accordions.length; i++)
{
accordions[i].addEventListener("click", Accordion);
}
}
function Accordion()
{
this.classList.toggle("active");
let panel = this.getElementsByClassName("panel");
let j;
for (j = 0; j < panel.length; j++) {
if (panel[j].style.maxHeight) {
panel[j].style.maxHeight = null;
} else {
panel[j].style.maxHeight = panel[j].scrollHeight + "px";
}
}
};
getAccordions();
This is where i started from, i have 5 functions that make the same thing but for different elements and i want that simplified in on function using querySelectorAll
function toggleFive() {
const snpElement = document.getElementById("five");
if (snpElement) {
const currentTransform = snpElement.style.transform;
if (currentTransform === "scale(3)") {
snpElement.style.transform = "";
snpElement.style.position = "";
snpElement.style.top = "";
snpElement.style.margin = "";
snpElement.style.zIndex = "";
} else {
snpElement.style.transform = "scale(3)";
snpElement.style.zIndex = "9";
}
}
}
chat.openai.com
failed misserably
i want to simplify my process of changing one style to some html elements using only one function.
2
Answers
This is the html
An this css
you can simply make more than one CSS class and toggle between them