webmonkey237 webmonkey237 - 1 month ago 18
jQuery Question

Toggle open/close sliding panel

I have been working on a project and its almost functioning perfectly however I have one more hurdle.

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


When each panel opens it overlaps so if you open the last panel you then cant open the first panel, is it possible to add a toggle to close a panel as one opens, fiddle below.

FIDDLE

Answer

One way would be to hide all of the panels once a panel is clicked and then reopen the desired panel.

$(document).ready(function() {
  $("a.shareTab").each(function(index, item) {
    $(this).on("click", function() {
      $('.sharePanel').hide();
    $('.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);
   });
  });
});

Here's a Fiddle