CODEWITHSUNDEEP
jqueryjquery-animateslide
vast365
vast365

Reputation: 31

JQuery Sliding Panel close when another is clicked

I want to convert this plugin http://web.archive.org/web/20150227082803/http://www.jqeasy.com/jquery-slide-panel-plugin to a side menu for my site. The only part I need to configure is closing an open panel when a second one is clicked so there is only a single panel open at a time.

I found this code but it acts weird in my page -opens closes and then opens again-

    <script>
$(document).ready(function () {
    $(".trigger").click(function () {
        var $clicked = $(this);
        $('.trigger.active').each(function () {
            var $link = $(this);
            // If this is not the clicked link, collapse its panel
            if (!$link.is($clicked)) {
                $($link.attr('data-target')).slideUp("slow");
                $link.removeClass("active");
            }
        });
        $clicked.toggleClass("active");
        if ($clicked.hasClass("active")) {
            $($clicked.attr('data-target')).slideDown("slow");
        } else {
            $($clicked.attr('data-target')).slideUp("slow");
        }
        return false;
    });

    if (!panel.is(':visible')) {
        $('.panel').hide(opts.speed);
        $('.trigger').removeClass('active');
    }
});</script>

here is my page source code:

<script type="text/javascript">
$(document).ready(function(){
    // $('.panel').slidePanel();

    $('#panel1').slidePanel({
        triggerName: '#trigger1',
        position: 'fixed',
        triggerTopPos: '20px',
        panelTopPos: '10px'
    });

    $('#panel2').slidePanel({
        triggerName: '#trigger2',
        position: 'fixed',
        triggerTopPos: '60px',
        panelTopPos: '60px'
    });
</script>
<a href="#" id="trigger1" class="trigger left" data-target="#panel1">panel</a>
    <div id="panel1" class="panel left">
        ...
    </div>
    <a href="#" id="trigger2" class="trigger left" data-target="#panel2">panel</a>
    <div id="panel2" class="panel left">
        <p>Nullam at odio nibh, eu pharetra ipsum.</p>
    </div>

    <a href="#" id="trigger3" class="trigger right" data-target="#panel3">panel</a>
    <div id="panel3" class="panel right">
        <p>enim ut dapibus vestibulum, leo nunc porttitor neque, sed pulvinar orci sem eleifend sapien. Nullam at odio nibh, eu pharetra ipsum.</p>
    </div>

I know it sounds simple and a lot has been written already about this plugin but my js knowledge has let me down. Any help will be greatly appreciated

Upvotes: 0

Views: 666

Answers (1)

Rob Schmuecker
Rob Schmuecker

Reputation: 8954

Because the plugin also adds it's own listeners your code is conflicting with the default animations there.

Try this:

$(".trigger").click(function () {
    $('.trigger.active').not($(this)).each(function () {
        $($(this).attr('data-target')).slideUp('slow');
        $(this).removeClass('active');
    });
});

Upvotes: 1

Related Questions