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>

Could you show us your HTML? it would help to give you a more useful answer if we could see the structure you are trying to implement this with — Trey
– Trey, Commented Jun 8, 2016 at 20:17
Try to develop a function that takes your id as argument. This approach should work. — dlopez
– dlopez, Commented Jun 8, 2016 at 20:17
wrap it all in a function that takes an id as a parameter, then call the function when you need it, passing the id you want it to work on. — Cruiser
– Cruiser, Commented Jun 8, 2016 at 20:18
...and show your attempt with the for loop--that should be workable, but it's best if we can see what you did wrong instead of just writing it for you so you can learn more. — Tony Hinkle
– Tony Hinkle, Commented Jun 8, 2016 at 20:19
@Tony Hinkle I added my attempt. The link to the original file is styledesigne/webpage3/include/scripts.js — Sharivari
– Sharivari, Commented Jun 8, 2016 at 20:55

Glitcher · Accepted Answer · 2016-06-08 20:43:19Z

1

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");
            // ...
}

edited Jun 8, 2016 at 20:43

answered Jun 8, 2016 at 20:20

Glitcher

1,1846 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sharivari Over a year ago

I did excatly what you did. I even converted i.toString() and added it to the #toggle-content, img and toggler. But it does absolutely nothing then. Maybe it is different, because the script is in an external file?

JohnnyFaldo · Accepted Answer · 2016-06-08 20:43:25Z

0

This is 2 options.

(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.

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");
     // ...

   }

edited Jun 8, 2016 at 20:43

answered Jun 8, 2016 at 20:25

JohnnyFaldo

4,1714 gold badges21 silver badges30 bronze badges

7 Comments

Sharivari Over a year ago

I prefere your first solution, too - but right now it is a little too much to change, especially because its working. I also tried your solution with the foreach, but it doesnt work.

JohnnyFaldo Over a year ago

I think your missing $ (jQuery shorthand) on your selectors, see edit

Sharivari Over a year ago

www.styledesign.de/webpage3/include/scripts.js

Sharivari Over a year ago

And the link to the page is www.styledesign.de/webpage3

JohnnyFaldo Over a year ago

As far as I can see there are no elements on that page with the id of #toggle-content-[anything] , you have <toggler-5> , are those the elements you're trying to work with?

|

Collectives™ on Stack Overflow

Multiple Functions with one Code

2 Answers 2

1 Comment

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related