webmonkey237 webmonkey237 - 1 year ago 77
jQuery Question

jQuery sliding panel for multiple instances

I have a piece of code that works great, you can click one button which triggers one sliding div.

$(document).ready(function () {
$('div.shareTab').on('click', function () {
$('.sharePanel').animate({
'width': 'show'
}, 1000, function () {
$('.shareFade').fadeIn(100);
});
});
$('.shareClose').on('click', function () {
$('div.shareFade').fadeOut(100, function () {
$('.sharePanel').animate({
'width': 'hide'
}, 1000);
});
});
});


I have a different project which requires multiple buttons and multiple panels, is there a better way to write my script rather than just copy/pasting the script multiple times.

I have supplied a fiddle below to show what i'm trying to achieve, at the moment clicking on one of the names opens all the panels at once.

FIDDLE

Answer Source

You can make that using data attribute and some tricks on jquery:

$(document).ready(function() {
  $("a.shareTab").each(function(index, item) {
    $(this).on("click", function() {
      $('.sharepanel' + $(item).data("panel")).animate({
        'width': 'show'
      }, 1000, function() {
        $('.sharepanel' + $(item).data("panel") + ' .shareFade').fadeIn(100);
      });
    });
  });

  $('.shareClose').on('click', function() {
    $('div.shareFade').fadeOut(100, function() {
      $('.sharePanel').animate({
        'width': 'hide'
      }, 1000);
    });
  });
});

This is fiddle fork: fiddle

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download