Using two of the same jQuery plugin (Kwicks) on the same page

I'm using the jQuery plugin 'Kwicks' on a site and having some conflicts.The plugin is working fine for the navigation, but I want to do the same thing for a separate, smaller nav (still using Kwicks) for social media at the top of the page. I've tried everything a novice such as myself could do but still cannot get the second Kwicks nav to function.

Here is the site: http://www.webexplosive.com/accu1

Solution

First of all include you're javascript files into the head section of the page and its only needed once.

<head>
 <script src='js/jquery-1.8.1.min.js' type='text/javascript'></script>
 <script src='js/jquery.easing.1.3.js' type='text/javascript'></script>
 <script src='js/jquery.kwicks.js' type='text/javascript'></script>
</head>

Second you're reference to the menus are the same, so the plugin will be confused and will only get one ( depends on how the plugin handles the selector )

So to fix the problem give you're ul tags a id attribute like menu1 and menu2 ( unique )

<ul class='kwicks1 kwicks-vertical' id='menu1'>
    ...
</ul>
<ul class='kwicks kwicks-horizontal' id='menu2'>
   ...
</ul>

<script>
$(document).ready(function () {
    $('#menu1').kwicks({
        size: 125,
        maxSize: 250,
        spacing: 2,
        behavior: 'menu',
            easing: 'easeOutBounce',
            isVertical: true
    });
    $('#menu2').kwicks({
                size: 125,
                maxSize : 250,
                spacing : 2,
                behavior: 'menu' ,
                easing: 'easeOutBounce'
            });
});
</script>