Q:

Is it possible to toggle different divs by clicking on different elements using the same function?

Say I have 50 div, like this:
    <div class="btn1"></div> //Toggles the first container to appear
    <div class="btn2"></div> //Toggles the second container to appear
    <div class="btn3"></div> //Toggles the third container to appear

And another 50 div that contain information, like this:
    <div class="container-1"><h1>This is the first container</h1></div>
    <div class="container-2"><h1>This is the second container</h1></div>
    <div class="container-3"><h1>This is the third container</h1></div>

Is it possible to make the corresponding div toggle when each button is clicked with just one function? I have read a little about delegation and operating on parents/siblings but it only seems to work on multiple buttons opening the same container, rather than each button opening each container.
Somehow I don't think writing a function for every div is the way to go.

A:

yes it is possible. Basically you need to add a reference to clicked object so click event will know what to show/hide 

$(function() {
  $('.btn').on('click', function(e) {
    var $dataTarget = $($(this).data('target'));
    $dataTarget.show().siblings('.container').hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="btn btn1" data-target=".container-1"></div> //Toggles the first container to appear
<div class="btn btn2" data-target=".container-2"></div> //Toggles the second container to appear
<div class="btn btn3" data-target=".container-3"></div> //Toggles the third container to appear


<div class="container container-1">
  <h1>This is the first container</h1>
</div>
<div class="container container-2">
  <h1>This is the second container</h1>
</div>
<div class="container container-3">
  <h1>This is the third container</h1>
</div>

This will show the container targeted, then will hide other containers.

