skip to Main Content

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


  1. Chosen as BEST ANSWER
    
            <div class="items">
                <a class="snp" id="one" >TITLU <br> Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Aperiam, aliquid corrupti ab itaque assumenda
                    vero. Earum doloremque non possimus corporis consequuntur fuga
                    nobis explicabo nulla.</a>
                <a class="snp" id="two" >TITLU <br> Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Aperiam provident eaque iure tempora tenetur
                    nesciunt ducimus debitis, enim incidunt eius velit labore quasi
                    alias ad!</a>
                <a class="snp" id="three" >TITLU <br> Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Natus, dignissimos esse excepturi, magni
                    tempora reprehenderit, aliquam consequuntur obcaecati nemo
                    repudiandae quia qui placeat minus ipsum.</a>
                <a class="snp" id="four" >TITLU <br> Lorem ipsum dolor sit amet consectetur
                    adipisicing elit. Necessitatibus error facilis minus nostrum
                    vitae perferendis consequuntur? A rerum maiores doloremque enim
                    porro exercitationem, ex eligendi!</a>
                <a class="snp" id="five" >TITLU <br> Lorem ipsum dolor sit amet consectetur,
                    adipisicing elit. Accusantium recusandae, earum eius dicta
                    exercitationem aspernatur fugiat obcaecati repudiandae explicabo
                    ut aperiam quisquam nihil distinctio expedita.</a>
            </div>
    

    This is the html

    
    .snp{
        color: white;
        font-size: 0.5rem;
        overflow-y: scroll;
        margin-top: 10vh;
        border: 10px yellow dotted;
        width: 90px;
        height: 90px;
    }
    #one{
        background: blue;
    }
    #two{
        background: black;
    }
    #three{
        background: red;
    }
    #four{
        background: green;
    }
    

    An this css


  2. you can simply make more than one CSS class and toggle between them

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search