Multiple tabs using plug-in

Question

I'm using the Tab Slide Out jQuery plugin: http://wpaoli.building58.com/2009/09/jquery-tab-slide-out-plugin/ and trying to make multiple tabs on different sides of the page. I need some help! When I do this neither of them appear or function at all.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">

<script src="js/jquery.tabSlideOut.v1.3.js"></script>

<script>
$(function(){
    $('.slide-out-div').tabSlideOut({
        tabHandle: '.handle_fist', //class of the element that will be your tab
        pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css)
        imageHeight: '122px', //height of tab image
        imageWidth: '40px', //width of tab image    
        tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
        speed: 300, //speed of animation
        action: 'click', //options: 'click' or 'hover', action to trigger animation
        topPos: '200px', //position from the top
        fixedPosition: false //options: true makes it stick(fixed position) on scroll
    });
    $('.slide-out-div-apps').tabSlideOut({
         tabHandle: '.handle_second', //class of the element that will be your tab
         pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css)
         imageHeight: '122px', //height of tab image
         imageWidth: '40px', //width of tab image    
         tabLocation: 'right', //side of screen where tab lives, top, right, bottom, or left
         speed: 300, //speed of animation
         action: 'click', //options: 'click' or 'hover', action to trigger animation
         topPos: '200px', //position from the top
         fixedPosition: false //options: true makes it stick(fixed position) on scroll
     });
 });
 </script>


<style>
.slide-out-div {
   padding: 20px;
    width: 250px;
    background: #f2f2f2;
    border: #29216d 2px solid;
}

.slide-out-div-apps {
   padding: 20px;
    width: 250px;
    background: #f2f2f2;
    border: #29216d 2px solid;
}
</style>
</head>

<body>
<div class="slide-out-div">
        <a class="handle_first" href="http://link-for-non-js-users">Content</a>

<p>Here you can find all the information you need about Volunteering at the Mary Rigg Neihborhood Community Center. Hover over the main enterance to enter the Community Center. You will be guided through the center using arrows. Check out different volunteer opportunities in each room. Roam the halls as if you were really there!</p>
    </div>


<div class="slide-out-div-apps">
<a class="handle_second" href="http://link-for-non-js-users">Content</a>

<p>Here you can find all the information you need about Volunteering at the Mary Rigg Neighborhood Community Center. Hover over the main entrance to enter the Community Center. You will be guided through the center using arrows. Check out different volunteer opportunities in each room. Roam the halls as if you were really there!</p>
    </div>
</body>
</html>

For one thing your script tag for jquery is not closed. You aremissing closing tag — AR., Apr 18 '14 at 18:26

score 0 · Answer 1 · answered Apr 18 '14 at 18:57

Tested this in FF and IE9 - works fine in both. I did change the path for plugin and re-named it for testing - so re-name it back to whatever it's supposed to be.

   <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>

    <style>
    .slide-out-div{
    padding: 20px;
    width: 250px;
    background: #f2f2f2;
    border: #29216d 2px solid;
    }

    </style>

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
    <script src="tabSlideOut.js"></script>

    <script>

    $(document).ready(function(){

        $('#slide-out-div1').tabSlideOut({
            tabHandle: '.handle1', //class of the element that will be your tab
            pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css)
            imageHeight: '122px', //height of tab image
            imageWidth: '40px', //width of tab image    
            tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
            speed: 300, //speed of animation
            action: 'click', //options: 'click' or 'hover', action to trigger animation
            topPos: '200px', //position from the top
            leftPos: '20px',  
            fixedPosition: false //options: true makes it stick(fixed position) on scroll
        });
        $('#slide-out-div2').tabSlideOut({
            tabHandle: '.handle2', //class of the element that will be your tab
            pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css)
            imageHeight: '122px', //height of tab image
            imageWidth: '40px', //width of tab image    
            tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
            speed: 300, //speed of animation
            action: 'click', //options: 'click' or 'hover', action to trigger animation
            topPos: '324px', //position from the top
            leftPos: '20px',  
            fixedPosition: false //options: true makes it stick(fixed position) on scroll
        });
     });
     </script>
    </head>

    <body>
    <div id="slide-out-div1" class="slide-out-div">
        <a class="handle1" href="http://link-for-non-js-users">Content</a>
        <p>
        Here you can find all the information you need about Volunteering at the Mary Rigg Neihborhood Community Center. 
        Hover over the main enterance to enter the Community Center. You will be guided through the center using arrows. 
        Check out different volunteer opportunities in each room. Roam the halls as if you were really there!
        </p>
     </div>


    <div id="slide-out-div2" class="slide-out-div">
        <a class="handle2" href="http://link-for-non-js-users">Content</a>
        <p>
        Here you can find all the information you need about Volunteering at the Mary Rigg Neighborhood Community Center. 
        Hover over the main entrance to enter the Community Center. You will be guided through the center using arrows.
        Check out different volunteer opportunities in each room. Roam the halls as if you were really there!
        </p>
    </div>




    </body>
    </html>

huh that's weird it still isn't working for me. Only one is actually working the other is just positioned on the left. — user3549442, Apr 18 '14 at 19:13
You need to make sure both divs have slide-out-div class. In your original code you had two different classes with exact same style - and there is no point in doing that. — AR., Apr 18 '14 at 19:20
I meant that I used the code you provided and changed the path for the plug-in back and it still isn't working for me... — user3549442, Apr 19 '14 at 00:16

Multiple tabs using plug-in

1 Answers1