Combine two functions of jquery

Question

I would like to combine those two functions but I can't figure it out. (Sorry, in learning progress...)

jQuery(document).ready(function($) {

  var $mores = $('#widget-about .textwidget').hide();

  var $titles = $('#widget-about a').click(function() {
    var $more = $(this).next('#widget-about .textwidget').slideToggle();
    $mores.not($more).slideUp();    
  }); 
});

jQuery(document).ready(function($) {

  var $mores = $('#widget-contact .textwidget').hide();

  var $titles = $('#widget-contact a').click(function() {
    var $more = $(this).next('#widget-contact .textwidget').slideToggle();
    $mores.not($more).slideUp();    
  }); 
});

Can somebody tell me how to do this?

Is it possible?

Much appreciation!

Answer 1

Your variable names are same. Make this unique name then it would work. Try this code.

jQuery(document).ready(function($) {

  var $mores = $('#widget-about .textwidget').hide();
  var $titles = $('#widget-about a').click(function() {
  var $more = $(this).next('#widget-about .textwidget').slideToggle();
  $mores.not($more).slideUp();    
  }); 



 var $mores_contact = $('#widget-contact .textwidget').hide();
 var $titles_contact = $('#widget-contact a').click(function() {
 var $mores_contact = $(this).next('#widget-contact .textwidget').slideToggle();
 $mores_contact.not($mores_contact).slideUp();    
  }); 



});

Answer 2

Start off by extracting the common function:

 function() {
   var $more = $(this).next('#widget-about .textwidget').slideToggle();
   $mores.not($more).slideUp();    
 }

(I know it's not quite right yet) Then you could do:

 var myhandler = function() {
   var $more = $(this).next('#widget-about .textwidget').slideToggle();
   $mores.not($more).slideUp();    
 };
 var $mores = $('#widget-about .textwidget').hide();
 $('#widget-about a').click(myhandler);
 var $mores = $('#widget-contact .textwidget').hide();
 $('#widget-contact a').click(myhandler);

Sort out the interior references in myhandler:

 var myhandler = function(selector, $mores) {
   var $more = $(this).next(selector).slideToggle();
   $mores.not($more).slideUp();
 };

And then call the right function:

 var selector, $mores;

 selector = '#widget-about .textwidget',
 $mores = $(selector).hide();
 $('#widget-about a').click((function() { myhandler(selector, $mores); }));

 selector = '#widget-contact .textwidget';
 $mores = $(selector).hide();
 $('#widget-contact a').click((function() { myhandler(selector, $mores); }));

... at least I think so! :-)