I got piece of code html and js,css too.I need to use this parameter accordionElem in my function so that on click it will work like accordion with animation, but if l add parameter my code stops.

html code

<h1>Accordian</h1>

<a href="#" class="accordian">How do I learn about activities and events in the CS department?</a>
<p>...</p>

<a href="#" class="accordian">How do I become a section leader?</a>
<p>Please see the CS198 Website for more information about the section leading program.</p>

<a href="#" class="accordian">How many CS classes should I take this quarter?</a>
<p>Most students find that 2-3 classes is a manageable workload, but different students find different workloads comfortable. Most students find they are able to handle more CS classes per quarter as they advance in the major. For more details see the courseload recommendations webpage.</p>

<a href="#" class="accordian">How can I get a summer job or internship? How do I get a
full-time job?</a>
<p>...</p>
<a href="#" class="accordian">How do I file to graduate? Can I participate in the graduation ceremony even if I am not receiving a diploma?</a><p>...</p>

<a href="#" class="accordian">How does the Honor Code apply to CS?</a>
<p>...</p>

js code I want to use this accordianEllem in some way so that my code can work.

   let createAccordian = function(accordianElem) {


let sadrzaj = accordianElem.nextElementSibling;

console.log(sadrzaj);

sadrzaj.style.transition = "max-height 0.5s ease-out";

if(sadrzaj.style.display === "block") {


/*  sadrzaj.style.maxHeight =  "0px";*/
    window.setTimeout(function () {
        sadrzaj.style.maxHeight = '0px';
    }, 50);


    window.setTimeout(function () {
    sadrzaj.style.display= 'none';
    }, 550);


    }
    else {

    sadrzaj.style.display = "block";
    sadrzaj.style.maxHeight = sadrzaj.scrollHeight + "px";

    }


      let getHeight = function () {
            sadrzaj.style.display = 'block'; 
            let height = sadrzaj.scrollHeight + 'px'; 
            sadrzaj.style.display = ''; 
            return height;
        };

        let height = getHeight(); 
        sadrzaj.style.display='block'; 
        sadrzaj.style.height = 'auto';
        sadrzaj.style.height = height; 


        window.setTimeout(function () {
            sadrzaj.style.height = '';
        }, 350);


   };


   const akordi = document.querySelectorAll('.accordian');

 const par = document.querySelectorAll('p');

 let aks = document.getElementsByClassName('accordian');
 console.log(aks);

 for( let i of par){ i.style.display = 'none';i.style.maxHeight = "0px"; }


 for( let i of akordi){           
     i.addEventListener('click',createAccordian(akordi)); }

1 Answers

1
noitse On

Event listeners take a function as the second parameter, and in that function, you should be calling your function createAcrodian passing the parameters.

i.addEventListener('click', function() {
   createAccordian(i);
})

Or with using ES arrow function

i.addEventListener('click', () => createAccordian(i));

I have noticed you are looping through an akordi array, but not passing the "i" value (or current loop item), but you are passing the whole array. If you are still learning, it's really rewarding to always console.log values or run debug in loops just to understand what is going on.

You can pass your function to these event listeners, eg.

i.addEventListener('click',createAccordian);

...But since you are passing some parameters, you should be using one of the above examples

PS. I have noticed you are using some of your native tongue to define variables, I would strongly recommend you to use English for everything.