Question

Hi I have a toggle script that works on #toggleshow for the trigger and #show for the div that displays.

I am using multiple instances of this so I have a script that suffixes numbers at the end of the ID. So I have #toggleshow01, #show01 and so forth.

My script that runs this function is:

$('#toggleshow').live('click', function() {$('#show').slideToggle('slow', function() {});});

The problem is I have to duplicate this script for each instance, ie

    $('#toggleshow').live('click', function() {$('#show').slideToggle('slow', function() {});});
    $('#toggleshow00').live('click', function() {$('#show00').slideToggle('slow', function() {});});
    $('#toggleshow01').live('click',function() {$('#show01').slideToggle('slow', function() {});});
    $('#toggleshow02').live('click',function() {$('#show02').slideToggle('slow', function() {});});
    $('#toggleshow03').live('click',function() {$('#show03').slideToggle('slow', function() {});});

These are the variables I am using to generate the suffixes

var numToggle = 0;
var numShow = 0;        
var toggleTrigger = $('<a id="toggleshow'+ "0" + numToggle++ +'" class="toggle_trigger actions">&nbsp;</a>');
var menuForm = $('<form id="menu_edit_form'+ "0" + numForm++ +'" class="menu_creation_form"></form>');

Please help me to cut this script down to one line if possible.

Answer 1

I personally hate doing things like “toggleshowX” mapping to “showX“. We have much better ways to store data these days. You could for example have your links look like this:

<a class="toggle_trigger actions" data-target="#show00">&nbsp;</a>

This allows you to get the target based on relevant information using $(this).data('target') in the callback.

$('.toggle_trigger').live('click', function() {
    var target = $(this).data('target');
    $(target).slideToggle('slow', function() {});
});

In one line of code:

$('.toggle_trigger').live('click', function() {$($(this).data('target')).slideToggle('slow', function() {});});