Combining two jQuery functions to one

Question

How do I combine these two jQuery functions?

Here is the code.

$('body').on('click', '.toggle2', function() {
 $('body').find('.htmlshow').slideToggle(400);
});
$('body').on('click', '.toggle1', function() {
 $('body').find('.buttonshow').slideToggle(400);
});

• Satpal: There is nothing common and complex, so why do you want to do it?
• Leon: they do the same task so i want one big function for both
• Kevin Kloet: don't think you can get it any shorter than that as you would need to check which class was clicked resulting in almost the same amount of code.
• Peter B: And how is .find('.htmlshow') the same as .find('.buttonshow')?
• Mr. Polywhirl: The easiest solution for re-usability would be to create a jQuery plugin. Refer to my implementation below.

Answer 1

You can create a jQuery plugin to perform the common functionality.

(function($) {
 /**
 * Adds click listener to an element which triggers a slideToggle on a target element.
 *
 * @param {string} lstnrSel Listener element selector.
 * @param {string} trgtSel Target element selector.
 * @param {int} [msDelay=1000] Animation delay in ms.
 * @returns {jQuery} Returns itself for chaining.
 */
 $.fn.clickToggle = function(options) {
 let $this = this;
 let lstnrSel = options.lstnrSel;
 let trgtSel = options.trgtSel;
 let msDelay = options.msDelay != null ? options.msDelay : 1000;
 $this.on('click', lstnrSel, function() {
 $this.find(trgtSel).slideToggle(msDelay);
 });
 return $this;
 }
}) (jQuery);
$(function() {
 $('body')
 .clickToggle({ lstnrSel: '.toggle1', trgtSel: '.htmlshow', msDelay: 400 })
 .clickToggle({ lstnrSel: '.toggle2', trgtSel: '.buttonshow', msDelay: 400 });
});

div[class^="toggle"] {
 display: inline-block;
 width: 7em;
 height: 1.5em;
 line-height: 1.5em;
 border: thin dashed #AAA;
 margin-left: 0.25em;
 padding: 0.125em;
 text-align: center;
 font-weight: bold;
}
div[class^="toggle"]:hover {
 border: thin solid #A00;
 color: #A00;
 background: #DD0;
 cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle1">Toggle HTML</div>
<div class="toggle2">Toggle Button</div>
<div class="htmlshow"><p>Hello World</p></div>
<div class="buttonshow"><input type="button" value="Click Me" /></div>

Answer 2

Create smome base class for clickable divs ex. 'toggle', and than change like this:

$('.toggle').on('click', function() {
var div=$(this);
if(div.hasClass("toggle2")){
 $('.htmlshow').slideToggle(400);
}else if(div.hasClass("toggle1")){
 $('.buttonshow').slideToggle(400);
}
});

Answer 3

Not that I would recommend making it shorter this way, but you can combine multiple selectors into the delegated handler and test which element type it was in the callback function:

$('body').on('click', '.toggle1,.toggle2', function() {
 $('body').find($(this).hasClass('.toggle1') ? '.buttonshow' : '.htmlshow').slideToggle(400);
});

or shorter still drop find and use the $(selector) syntax:

$('body').on('click', '.toggle1,.toggle2', function() {
 $($(this).hasClass('.toggle1') ? '.buttonshow' : '.htmlshow').slideToggle(400);
});

note: There is a bug with using 'body' for delegated events, so I would always use document. This also has the advantage of document exists before DOM ready so can be registered without a DOM ready wrapper :)

• Satpal: Not need to using $('body').find(), why not direct $(selector)?
• Satpal: I think you were gone away however seems gone ahead :)

Answer 4

 $('body .toggle1,body .toggle2').on('click',function(){
 if($(this).hasClass("toggle2"))
 {
 $('body').find('.htmlshow').slideToggle(400);
 }
 else
 {
 $('body').find('.buttonshow').slideToggle(400);
 }
 });

• iCollect.it Ltd: You lost .buttonshow somewhere. Please note for lots of matching elements this is less efficient than the original delegated event handler.
• Ghanshyam Singh: lol y i right the whole code ... he has already wriiten so , not necessary for me to write again