How do I combine two JQuery functions?

Question

I am trying to combine these two functions into one. I know there has to be a really simple way to do it, but everything I have tried so far has not worked. Essentially there are two icons and two menus. When you click one icon a menu either drops down (or raises) depending on the state they are in. Everything after the variables is the same, so it seems to make sense to consolidate them into one shared function. Any help would be greatly appreciated. Thanks!

$(function(){
///Manage Icon 1
$('.ecGlobalNavStudentIcon').click(function(e){
 var n = 'hideme'
 var m = $('#ecGlobalNavStudentPanel')
 var p = $('#ecGlobalNavStaffPanel')
 e.preventDefault(); //just prevent the default behavior of the hyperlink
 if(m.hasClass(n)) {
 console.log($(m).attr('id') + " Has 'hideme' gonna open up");
 $(m).show().removeClass(n);
 $(m).animate({
 height:'49px'
 },
 500, // Duration
 function() { // Callback when the animation is finished
 console.log($(m).attr('id') + " Opened!");
 });
 } else {
 console.log($(m).attr('id') + " didn't have 'hideme' gonna try and 
 close. ");
 $(m).animate({
 height:'0px'
 },
 500, // Duration
 function() { // Callback when the animation is finished
 $(m).hide().addClass(n);
 console.log($(m).attr('id') + " Closed!");
 });
 }
 if(!$(p).hasClass(n)) {//open
 console.log($(p).attr('id') + " panel open! Gonna close.");
 $(p).animate({//close
 height:'0px'
 },//close
 500, // Duration
 function() { // Callback when the animation is finished /open
 console.log($(p).attr('id') + " Closed by animation!");
 $(p).hide().addClass(n);
 });//close
 }
});
///Manage Icon 2
$('.ecGlobalNavStaffIcon').click(function(e){
 var n = 'hideme'
 var m = $('#ecGlobalNavStaffPanel')
 var p = $('#ecGlobalNavStudentPanel')
 e.preventDefault(); //just prevent the default behavior of the hyperlink
 if (m.hasClass(n)) {
 console.log($(m).attr('id') + " Has 'hideme' gonna open up");
 $(m).show().removeClass(n);
 $(m).animate({
 height: '49px'
 },
 500, // Duration
 function () { // Callback when the animation is finished
 console.log($(m).attr('id') + " Opened!");
 });
 } else {
 console.log($(m).attr('id') + " didn't have 'hideme' gonna try and close. ");
 $(m).animate({
 height: '0px'
 },
 500, // Duration
 function () { // Callback when the animation is finished
 $(m).hide().addClass(n);
 console.log($(m).attr('id') + " Closed!");
 });
 }
 if (!$(p).hasClass(n)) {//open
 console.log($(p).attr('id') + " panel open! Gonna close.");
 $(p).animate({//close
 height: '0px'
 },//close
 500, // Duration
 function () { // Callback when the animation is finished /open
 console.log($(p).attr('id') + " Closed by animation!");
 $(p).hide().addClass(n);
 });//close
 }
});
});

• Evan Davis: What have you actually tried?
• Mike Brant: I combiining them really what you want to do, or are you trying to refactor them, to potentially take out common code into a common function (possibly resulting in three or more functions)? I think you certainly have identified redundant code for refactoring, but refactoring and combining are not the same thing.
• Hieu Le: Can you edit the HTML code, I think we should use some data- attribute to make the javascript code cleaner and more flexible.

Answer 1

If you want to handle same event for multiple selectors, use the selectors as comma separated.. In your case

$('.ecGlobalNavStudentIcon, .ecGlobalNavStaffIcon').click(function(){
//Your common event handler
});

Always remember, repeating code is evil, a sign of some mistake you've made. And you have done a great job finding it :) Happy coding

• Mister Epic: Note that this isn't what the OP is asking for. He has some variable declarations that differ between the two functions you need to account for as well.
• HeyFergy: Ah! I didn't realize I could do this. I'm still pretty new to jquery/js and completely spaced this off. Thanks!

Answer 2

It is always good to separate DOM event handling and actual logic.

icon1 click and icon2 click triggers event A

on event A do action A'

consider this example:

 $(body).on('togglePanels.my', function (e, activePanel ) {
 var panels = $('.panels') 
 panels.removeClass(cssClass)
 activePanel.addClass(cssClass) 
 })
 $(body).on('click','.panelHeader' function(e) {
 var $this= $(this)
 , panel = $('#' + $this.data('target'))
 $(body).trigger('togglePanels.my', [panel])
 })

This is pretty much all code you need for accordion you are building, with exception of animation effects Notice that it requires you to slightly change markup:

• common .panel class added for panels
• another one .panelHeader for icons
• icon has data-target attribute with ID of panel to open.
• instead of hide-me class to hide panel, cssClass should hold name of css class to open active one

example markup:

<div>
 <i class="panelHeader ecGlobalNavStudentIcon" 
 data-target="ecGlobalNavStudentPanel">Student</i>
 <i class="panelHeader ecGlobalNavStuffIcon" 
 data-target="ecGlobalNavStaffPanel">Stuff</i>
</div>
<div id='ecGlobalNavStudentPanel' 
 class="panel ecGlobalNavStudentPanel">...</div>
<div id='ecGlobalNavStaffPanel' 
 class="panel ecGlobalNavStaffPanel">...</div>

• HeyFergy: Thank you! I am still really new to js/jquery and I will have to evaluate this further to figure out how I would integrate it properly. I will have to reconsider how I understand event handling a bit.

Answer 3

Something like this would work:

$('.ecGlobalNavStudentIcon, .ecGlobalNavStaffIcon').click(function(e){
 var n = 'hideme'
 var m = $(e.target).hasClass('ecGlobalNavStudentIcon') ? $('#ecGlobalNavStudentPanel') : $('#ecGlobalNavStaffPanel');
 var p = $(e.target).hasClass('ecGlobalNavStudentIcon') ? $('#ecGlobalNavStaffPanel') : $('#ecGlobalNavStudentPanel');

• HeyFergy: Ah! Thank you so much. This worked perfectly and is super simple. I did something similar but I must have messed up the syntax. I am still super new to javascript and jquery and I am going crazy trying to figure this out on the fly.
• Mister Epic: No worries. Feel free to mark as the answer if it helped you :)

Answer 4

 $('.ecGlobalNavStaffIcon, ecGlobalNavStaffIcon').click(function(e){
var n = 'hideme';
if this.hasClass('ecGlobalNavStaffIcon'){
 var m = $('#ecGlobalNavStudentPanel')
 var p = $('#ecGlobalNavStaffPanel')
}
else {
var m = $('#ecGlobalNavStaffPanel')
 var p = $('#ecGlobalNavStudentPanel')
}
...
}

if you need, just apply a param and then use the same code (example: $('#'+myParamToSelect).function()