CODEWITHSUNDEEP
javascriptjqueryhtml
user2950370
user2950370

Reputation: 117

How to condense similar duplicate jquery functions

Well if my maths is right, my Jquery file is 16 times bigger than it could be.

I am building a tabbed category page which looks like this..

Tab1

Tab2

All content starts of hidden and then appears when a button in the category header is clicked (also toggling an arrow up/down).

$("#tabName_contentLink_cat1").click(function(){

    $("#tabName_contentLink_cat1 > .arrow").toggleClass('greyArrow_down')  
                                           .toggleClass('blackArrow_up');
    $("#tabName_content_cat1").slideToggle("fast");

});

This code works fine but I've repeated it 16 times!

The only part that varies is the number at the end of '_cat1'.

How can I convert this one piece of code, so that it can be reused 16 times?

I am a newbie, so please keep that in mind.

In my mind; assigning some sought of unique identifier (applicable category number), collecting it in a jQuery variable onClick and then pasted at the end of each _cat'HERE' seams like the way forward. I haven't a clue on how to carry it out though.

Thanks

Upvotes: 0

Views: 88

Answers (4)

Muhammad Umer
Muhammad Umer

Reputation: 18097

you could add another class to all cat elements and then use it as selector or you can do what i did. Notice i made the code smaller, efficient. And it does what you wanted by using Function.

addClick(cat1);
addClick(cat2);
addClick(cat3);
addClick(cat4);

function addClick(x) {
$("#tabName_contentLink_"+x).click(function(){
    $(this).slideToggle("fast").children(".arrow")
           .toggleClass('greyArrow_down blackArrow_up');
});}

Upvotes: 1

JNF
JNF

Reputation: 3730

Give them all the tabName_contentLink class, then:

$(".tabName_contentLink").click(function(){

    $(this).children(".arrow").toggleClass('greyArrow_down')
        .toggleClass('blackArrow_up');
    $(this).find(".tabName_content").slideToggle("fast");

});

The keyword this allows you to reference the object calling the function, thus relate to a specific object out of a set. It can become a little tricky, but basically - you can use it as described above.

Upvotes: 0

MarcoL
MarcoL

Reputation: 9989

What about

$("[id^='tabName_contentLink_cat']").click(function(){

  $(this).children(".arrow").toggleClass('greyArrow_down')  
                            .toggleClass('blackArrow_up');

  var contentId = this.id.replace(/contentLink/, 'content');
  $("#"+ contentId).slideToggle("fast");

});

It's not the most elegant code, but it should work.

Upvotes: 1

nmat
nmat

Reputation: 7591

Why don't you use a simple for loop?

for(var i = 1; i <= 16; i++){
  $("#tabName_contentLink_cat" + i).click(function(){

      $("#tabName_contentLink_cat" + i + " > .arrow").toggleClass('greyArrow_down')  
                                             .toggleClass('blackArrow_up');
      $("#tabName_content_cat" + 1).slideToggle("fast");

  });
}

There are other options, but this seems to be the quickest way to make it work without changing too much of the existing code. To make it more generic you can wrap it in a function that receives 'i' as an argument.

Upvotes: 0

Related Questions