CODEWITHSUNDEEP
javascriptjquery
Jeremy Lynch
Jeremy Lynch

Reputation: 7210

Apply same function to multiple ids

Is there anyway I can simplify this JS: 

$('#collapse_notebook').on('hide.bs.collapse', function () {
  $('#notebook-caret').removeClass( "fa-caret-up" );
  $('#notebook-caret').addClass( "fa-caret-down" );
})

$('#collapse_note').on('hide.bs.collapse', function () {
  $('#note-caret').removeClass( "fa-caret-up" );
  $('#note-caret').addClass( "fa-caret-down" );
})

Upvotes: 0

Views: 199

Answers (3)

Abhilash
Abhilash

Reputation: 1610

This should work.

('#collapse_notebook,#collapse_note').on('hide.bs.collapse', function () {
  var curr_id = this.id.split('_')[1]
  $('#'+curr_id+'-caret').toggleClass('fa-caret-up fa-caret-down');
})

Upvotes: 1

Tats_innit
Tats_innit

Reputation: 34107

Multiple selector Chaining is the word: :)

How this is done: demo http://jsfiddle.net/49NBu/ (shows the extracting bit)

Code

$('#collapse_note,#collapse_notebook').on('hide.bs.collapse', function () {
  var id = $(this).prop('id').split('_')[1];

  $('#'+id+'-caret').removeClass( "fa-caret-up" );
  $('#'+id+'-caret').addClass( "fa-caret-down" );
})

Upvotes: 3

Milind Anantwar
Milind Anantwar

Reputation: 82231

use comma separated multiple selectors:

$('#collapse_notebook,#collapse_note').on('hide.bs.collapse', function () {
 $("#"+this.id.replace('collapse_','')+"-caret").removeClass( "fa-caret-up" );
 $("#"+this.id.replace('collapse_','')+"-caret").addClass( "fa-caret-down" );
});

Upvotes: 0

Related Questions