Multiple Functions with one Code

Question

so I'm using this code, to slideToggle a box on my webpage.

// OPEN CERTAIN BOX
$(function() {    
    var sliding = false;    
    var mq = window.matchMedia( "(min-width: 700px)" );

    if (mq.matches) {
        var time = 500;
    } else {
        var time = 0;
    }

    var id = ('1');            
    var div = ('#toggle-content-' + id);
    var img = ('#toggle-img-' + id);
    var toggler = ('toggler-' + id);            
    $(div).hide()

    $(toggler).click(function() {
        if (sliding == false) {
            sliding = true;
            // Open / Close
            $( div ).slideToggle(time,"swing");
            // ...

As you can see, I'm using the var id, to use the toggle function for a certain box, which has its own css and html code.

I have 7 more boxes. Until now, i copied the code 7 times and changed the id at each copy from 2 - 8. Is there a way to make it with one code?

I tried a for loop, that goes from 1 - 8 but this obviously didnt work. Has someone an idea? Or do I have to make that 8 copies and changed the id.

Edit:

My approach with the for-loop:

$(function() {

var sliding = false;

var mq = window.matchMedia( "(min-width: 700px)" );

if (mq.matches) {
    var time = 500;
} else {
    var time = 0;
}

for(i = 1; i <= 8; i++){

var id = (i.toString());

var div = ('#toggle-content-'+id);
var img = ('#toggle-img-'+id);
var toggler = ('toggler-'+id);            
$( div ).hide()


    $( toggler ).click(function(){
    if (sliding == false){
    sliding = true;
        // Open / Close
        $( div ).slideToggle(time,"swing");
        ...

And this is my html code for one box:

<tr><td cellspacing="0" cellpadding="0" height="50px" class="upper">
                    <toggler-1><area-head-text><img id="toggle-img-1" src="images/box_opener.png"/>Starterpaket</area-head-text></toggler-1>
                </td></tr>
                <tr><td>      
                    <div id="toggle-content-1">
                    <area-head-text>
                    <img class="text-image" src="images/arrow.png"/>3&nbsp;individuelle Entwürfe<br>
                    <img class="text-image" src="images/arrow.png"/>3&nbsp;Korrekturzeichnungen<br>
                    <img class="text-image" src="images/arrow.png"/>Internationale Nutzungsrechte<br>
                    <img class="text-image" src="images/arrow.png"/>400€<br><br>
                    </area-head-text>
                    </div>         
                </td></tr>

Answer 1

This is 2 options.

1. (and my preference) -

Instead of using an ID to add the click event onto each individual toggle button, use the same class on each, and add the click event on that class. When the user clicks a toggle button traverse the DOM from the clicked toggle button to perform your toggle on the relevant <div>.

This would look something like:

$(function() {    

     $('.toggleBtn').click(function() {

        var sliding = $(this).data('sliding'); //use data attr to store sliding status        

        if (sliding == false) {
            $(this).data('sliding') = true;
        }else {
           return; //don't toggle we're sliding 
        }
        // navigate to element and toggle
        $(this).parent('.someParentElement').children('.theDiv').slideToggle(time,"swing");

       //clear sliding status 
       $(this).data('sliding', false);

    }

}

The reason this is my preference, is because although it's faster to target an ID for a click event than a class for a single event, using 7 click events on 7 different IDS in my opinion (I don't know for sure) is less efficient than using a single click event on 1 class. That's my perceived purpose of using events on classes rather than IDS.

Also this way, when you want to add another box in, or remove a box, you don't need to modify any Javascript, the only thing you would need to maintain this code for is if you decide to change the structure of the HTML, and therefore the navigation of the DOM to perform your toggle.

2. using your method:

   var ids = ["id1","id2","id3"];
   
   for(var id in ids) {
   
    var $div = $('#toggle-content-' + id);
    var $img = $('#toggle-img-' + id);
    var $toggler = $('toggler-' + id); 
   
    $div.hide()
   
    $toggler.click(function() {
   
      if (sliding == false) {
        sliding = true;
        // Open / Close
        $div.slideToggle(time,"swing");
        // ...
   
      } 
   

Answer 2

I'm not sure why you put "Obviously" a loop doesn't work, because that's pretty much exactly what you should do. Something like this:

for(var i = 1; i <= 8; i++)
{          
    var div = $('#toggle-content-' + i);
    var img = $('#toggle-img-' + i);
    var toggler = $('toggler-' + i);            
    $(div).hide()

    $(toggler).click(function() {
        if (sliding == false) {
            sliding = true;
            // Open / Close
            $( div ).slideToggle(time,"swing");
            // ...
}