How to reuse this js in other elements

Question

I do not have much knowledge in JS, but I got this function that does exactly what I need, but when I duplicate the html div that uses this same function js it does not work, I had seen somewhere that the document runs the first time and does not allow to reuse the function, Could someone help me with this? Hug.

 <script>


   var c = document.getElementById("btn");

    c.addEventListener('click',function(){
      var elemento = document.getElementById("section3");
      if(elemento.style.height !== '100%')
          elemento.style.height = '100%', elemento.style.transition = '.5s';
      else
          elemento.style.height = '90px';
    });


</script>

Answer 1

You are associating an anonymous Function to the element click event with id btn. The id is should be a single element on the page, there can’t be two or more elements with equal Ids, otherwise things start to bugger off.
So in your case, it would be ideal for you to link to Function through the attribution class, because this can repeat avontade.

Solution

Change elements with Ids btn and section3 to use this as a class. You can remove these Ids or just add class of the same value as id.

After that, change your code to use getElementsByClassName instead of getElementById. Heed: getElementsByClassName can find more than one element, so it will always return a collection, take a look at the documentation.

Answer 2

You can add an event Handler to all buttons where Handler switches a class that gives visibility to your session.

Follow an example:

var btns = document.querySelectorAll('.toggle'),
    i, l;

function click_listener() {
  this.parentElement.classList.toggle('show');
}

for(i=0, l=btns.length ; i<l ; i++){
  btns[i].addEventListener('click', click_listener);
}

.teste {
  border: #ccc solid 1px;
  padding: 8px;
  height: 90px;
  overflow: hidden;
}

.teste.show {
  height: 100%;
}

<section class="teste">
  <button class="toggle" type="button">Click me</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam iaculis accumsan. Mauris id orci at est blandit auctor sed efficitur diam. Mauris maximus purus quis congue eleifend. Sed sit amet tellus lacinia, vulputate purus tempor, posuere mi. Vivamus consectetur, velit quis porta faucibus, metus nulla ullamcorper lorem, eget ullamcorper quam nisl non risus. Cras sodales nisi in blandit tempor. Sed eleifend turpis vitae justo maximus ornare. Integer ornare, erat at gravida vestibulum, ante enim ullamcorper neque, quis tincidunt est arcu et velit. Donec ut nisl non nibh dignissim bibendum. Etiam convallis metus sem. Aenean id aliquet orci. Nam sed nisi augue.</p>

  <p>Vestibulum vel ultrices nulla. Donec malesuada ex mauris, sit amet aliquet ante egestas ut. Aliquam mollis pharetra leo, eu lacinia turpis dignissim posuere. Ut arcu orci, ultrices id lectus vel, pellentesque semper nunc. Donec in sodales turpis. Aenean quis nunc vel tellus porta maximus quis non quam. Integer accumsan turpis arcu, iaculis facilisis diam luctus eu.</p>
</section>
<section class="teste">
  <button class="toggle" type="button">Click me</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam iaculis accumsan. Mauris id orci at est blandit auctor sed efficitur diam. Mauris maximus purus quis congue eleifend. Sed sit amet tellus lacinia, vulputate purus tempor, posuere mi. Vivamus consectetur, velit quis porta faucibus, metus nulla ullamcorper lorem, eget ullamcorper quam nisl non risus. Cras sodales nisi in blandit tempor. Sed eleifend turpis vitae justo maximus ornare. Integer ornare, erat at gravida vestibulum, ante enim ullamcorper neque, quis tincidunt est arcu et velit. Donec ut nisl non nibh dignissim bibendum. Etiam convallis metus sem. Aenean id aliquet orci. Nam sed nisi augue.</p>

  <p>Vestibulum vel ultrices nulla. Donec malesuada ex mauris, sit amet aliquet ante egestas ut. Aliquam mollis pharetra leo, eu lacinia turpis dignissim posuere. Ut arcu orci, ultrices id lectus vel, pellentesque semper nunc. Donec in sodales turpis. Aenean quis nunc vel tellus porta maximus quis non quam. Integer accumsan turpis arcu, iaculis facilisis diam luctus eu.</p>
</section>
<section class="teste">
  <button class="toggle" type="button">Click me</button>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque aliquam iaculis accumsan. Mauris id orci at est blandit auctor sed efficitur diam. Mauris maximus purus quis congue eleifend. Sed sit amet tellus lacinia, vulputate purus tempor, posuere mi. Vivamus consectetur, velit quis porta faucibus, metus nulla ullamcorper lorem, eget ullamcorper quam nisl non risus. Cras sodales nisi in blandit tempor. Sed eleifend turpis vitae justo maximus ornare. Integer ornare, erat at gravida vestibulum, ante enim ullamcorper neque, quis tincidunt est arcu et velit. Donec ut nisl non nibh dignissim bibendum. Etiam convallis metus sem. Aenean id aliquet orci. Nam sed nisi augue.</p>

  <p>Vestibulum vel ultrices nulla. Donec malesuada ex mauris, sit amet aliquet ante egestas ut. Aliquam mollis pharetra leo, eu lacinia turpis dignissim posuere. Ut arcu orci, ultrices id lectus vel, pellentesque semper nunc. Donec in sodales turpis. Aenean quis nunc vel tellus porta maximus quis non quam. Integer accumsan turpis arcu, iaculis facilisis diam luctus eu.</p>
</section>

Answer 3

I don’t know if I understood what you wanted but you could use prototype in javascript to make reusable components. I kicked off with a very simple component, but nothing stops you from improving it so it’s the way you want it. See if that’s what you need, if not, be more specific that I can help you better. http://codepen.io/netonneettoo/pen/MJopwd