CODEWITHSUNDEEP
jquery
webmonkey237
webmonkey237

Reputation: 379

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

Upvotes: 0

Views: 49

Answers (2)

Adrianopolis
Adrianopolis

Reputation: 1292

Here is a pretty quick and dirty way to go about it: https://jsfiddle.net/e1szqj20/3/

<ul>
    <li><a class="shareTab" data-panel-open="#john_panel">John</a></li>
    <li><a class="shareTab" data-panel-open="#steve_panel">Steve</a></li>
    <li><a class="shareTab" data-panel-open="#bob_panel">Bob</a></li>
</ul>

<div class="sharePanel" id="john_panel">
        <div class="shareFade">
            <span class="shareClose" data-close-panel="#john_panel">x</span>
            <div>John's Panel</div>
        </div>
</div>
<div class="sharePanel" id="steve_panel">
        <div class="shareFade">
            <span class="shareClose" data-close-panel="#steve_panel">x</span>
            <div>Steve's Panel</div>
        </div>
</div>
<div class="sharePanel" id="bob_panel">
        <div class="shareFade">
            <span class="shareClose" data-close-panel="#bob_panel">x</span>
            <div>Bob's Panel</div>
        </div>
</div>

And the revised jQuery:

$(document).ready(function () {
    $('a.shareTab').on('click', function () {
        panel = $(this).attr('data-panel-open');
        $(panel).animate({
            'width': 'show'
        }, 1000, function () {
            $(panel +' .shareFade').fadeIn(100);
        });
    });
    $('.shareClose').on('click', function () {
        panel = $(this).attr('data-close-panel');
        $(panel+' .shareFade').fadeOut(100, function () {
            $(panel).animate({
                'width': 'hide'
            }, 1000);
        });
    });
});

Upvotes: 0

Ihab Al Mardoud
Ihab Al Mardoud

Reputation: 108

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

Upvotes: 1

Related Questions