How can I reuse function and not keep repeating it?

Question

I wrote a function to hide and show a tab when clicked using JavaScript. As I am adding tabs, I also add function to perform the task. I am sure there is a way to narrow this down so I don't have to create a new function each time and reuse the one I have.

Here is my JS (https://jsfiddle.net/ehwcma6j/1/):

<script type="text/javascript">
      function showDiv() {
        var info = document.getElementById('detailInformation');
        if (info.style.display === "none") {
          info.style.display = "block";
          info.style.transition = "0.2s ease-out";
        } else {
          info.style.display = "none";
          info.style.transition = "0.2s ease-out";
        }
      }
      function showDiv2() {
        var info2 = document.getElementById('detailInformation2');
        if (info2.style.display === "none") {
          info2.style.display = "block";
          info2.style.transition = "0.2s ease-out";
        } else {
          info2.style.display = "none";
          info2.style.transition = "0.2s ease-out";
        }
      }
      function showDiv3() {
        var info3 = document.getElementById('detailInformation3');
        if (info3.style.display === "none") {
          info3.style.display = "block";
          info3.style.transition = "0.2s ease-out";
        } else {
          info3.style.display = "none";
          info3.style.transition = "0.2s ease-out";
        }
      }
      function showDiv4() {
        var info4 = document.getElementById('detailInformation4');
        if (info4.style.display === "none") {
          info4.style.display = "block";
          info4.style.transition = "0.2s ease-out";
        } else {
          info4.style.display = "none";
          info4.style.transition = "0.2s ease-out";
        }
      }
</script>

And here is my html:

<div class="block" style="text-align: center;">
  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 1</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv()" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 2</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv2()" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation2" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 3</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv3()" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation3" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 4</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv4()" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation4" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

</div>

It's probably very simple, I am only a beginner :)

Answer 1

Instead of repeating the similar function, allow it to take a parameter, e.g. the id

  function showDiv(id) {
    var info = document.getElementById(id);
    if (info.style.display === "none") {
      info.style.display = "block";
      info.style.transition = "0.2s ease-out";
    } else {
      info.style.display = "none";
      info.style.transition = "0.2s ease-out";
    }
  }

And for your click events, change them like this

onclick="showDiv('detailInformation2')"

Answer 2

<script type="text/javascript">

      function showDiv(id) {
        var info = document.getElementById(id);
        if (info.style.display === "none") {
          info.style.display = "block";
          info.style.transition = "0.2s ease-out";
        } else {
          info.style.display = "none";
          info.style.transition = "0.2s ease-out";
        }
      }

</script>

HTML

<div class="block" style="text-align: center;">
  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 1</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation1')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 2</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation2')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation2" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 3</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation3')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation3" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>

  <div>
    <div style="padding: 10px 0 10px 0; float: left; width: 50%;">
      <h1>Tab 4</h1>
    </div>
      <div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation4')" type="button" value="More information" /></div>
  </div>
  <div class="answer_list" id="detailInformation4" style="display: none; text-align: left; padding: 20px 20px 20px 20px;">
    <p>some text</p>
  </div>
</div>

Answer 3

I updated the fiddle: https://jsfiddle.net/ehwcma6j/5/

You want a function that takes an id, so that you can reuse the main logic of the function:

function showDiv(id) {
  var info = document.getElementById(id);
  if (info.style.display === "none") {
    info.style.display = "block";
    info.style.transition = "0.2s ease-out";
  } else {
    info.style.display = "none";
    info.style.transition = "0.2s ease-out";
  }
}

Then in the HTML, pass the id of the div, for example:

<div style="padding: 10px 0 10px 0;"><input class="button" name="answer" onclick="showDiv('detailInformation2')" type="button" value="More information" /></div>
  </div>

Answer 4

function showDiv(id) {
        var info = document.getElementById(id);
        if (info.style.display === "none") {
          info.style.display = "block";
          info.style.transition = "0.2s ease-out";
        } else {
          info.style.display = "none";
          info.style.transition = "0.2s ease-out";
        }
      }
//call function like

showDiv('detailInformation');
showDiv('detailInformation2');
showDiv('detailInformation3');
showDiv('detailInformation4');