CODEWITHSUNDEEP
javascriptjqueryhtml
Leon
Leon

Reputation: 33

Combining two jQuery functions to one

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);
});

Upvotes: 0

Views: 62

Answers (4)

Mr. Polywhirl
Mr. Polywhirl

Reputation: 48610

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>

Upvotes: 1

Ghanshyam Singh
Ghanshyam Singh

Reputation: 1381

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

Upvotes: 0

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

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 :)

Upvotes: 0

vakho papidze
vakho papidze

Reputation: 465

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);
}

});

Upvotes: 0

Related Questions