CODEWITHSUNDEEP
jquery
webmonkey237
webmonkey237

Reputation: 379

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

Upvotes: 0

Views: 356

Answers (1)

Sohrab Hejazi
Sohrab Hejazi

Reputation: 1511

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

Upvotes: 1

Related Questions