Jquery show and hide ui tags.

Jquery show and hide ui tags.

Hello my name is Mark Dunbavan.

I am fairly new to jquery and I have been developing a few bits for my website.

I am trying to create a tab at the side of my site that when moused over it creates a reveal so the rest of the tab
pops out from the side and then when clicked it opens the rest of the tab that will slide across the page above the content on which it is placed over.

Here is an example of what i mean. look for the tab that says 'tags' on the left.
http://www.formfiftyfive.com

I cannot seem to get mine to work or to even come to think about how to develop it within my code I
have already developed for it. Here is the code for the sliding bar.


  1. <!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=ISO-8859-1" />
    <title>Mark Dunbavan Website</title>
    <link href="Main_Content.css" rel="stylesheet" type="text/css" />
    <link href="content.css" rel="stylesheet" type="text/css" />
    <link href="menu.css" rel="stylesheet" type="text/css" />
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
        <script src="jquery-1.4.js"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
      <script src="http://ui.jquery.com/latest/ui/effects.core.js"></script>
    <script src="http://ui.jquery.com/latest/ui/effects.slide.js"></script>
                <script type="text/javascript">
      $(document).ready(function() {
        $(".clickLink").click(function () {
          $("div1").toggle("slide", {}, 1000);
        });
    </script>
    </head>
    <body>
    <style type="text/css">
    div1 { display:none; width: 1500px; height: 80px; background: blue; position:fixed; top:500px; z-index:20; left:0px; }
    </style>
    <p><div align="left" class="clickLink"><img src="images/recentprojects.png"></div></p>
    <div1></div></body>
    </html>

























Does anyone understand this code here. I understand it clearly but i am not sure where the tabs would come into this. The code works but I just cannot find out how I could work this idea into my code I have got now.

Any help would be amazing with this.

Thanks,

Mark