Slide out problem

Slide out problem

I have two immediate problems with the code I am working with.

I have an area when I hover over it makes visible prompts to social media sites.  But I don’t know how to keep the prompts visible while you choose the site that you want to visit.

Secondly as the icons appear there is a small line that appears between the icons.  What is this from and how do I remove it.

Obviously I would like some help in resolving these two problems.

The viewable link is:

http://rouse.ws/promptTest/slideRightSocialTest.html

Thanks in advance.

  1. <!DOCTYPE html >

    <html>

        <head>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

            <title>HORIZONTAL-SLIDING-PANEL</title>

            <style>

                body {

                    margin:0;

                    padding:0;

                }

                #socialPrompt {

                    position: fixed;

                    width: 50px;

                    height: 100px;

                    left: 0px;

                    top: 100px;

                    display: block;

                    cursor: pointer;

                    background-color: lightgray;

                }

                #panel {

                    position: fixed;

                    left: 0px;

                    top: 100px;

                    height: 100px;

                    width: 0;/*new line*/

                    background-color: white;

                }

                #panel .content {

                    width:290px;

                    margin-left:70px;

                    margin-top: 20px;

                }

            </style>

            <script src="js/jquery.js" type="text/javascript"></script>

            <script>

                $(document).ready(function(){

                     //Hide the content.

                     $(".content").hide();

                    //when the #socialPrompt is hovered on

                    $('#socialPrompt').hover(function(){

                        $('#panel').stop().animate({width:"400px", opacity:0.8}, 500, function() {//sliding the #panel to 400px

                            $('.content').fadeIn('slow'); //slides the content into view.

                        });

                    },

                    //when the #socialPrompt is hovered off

                    function(){

                        //fade out the content

                        $('.content').fadeOut('slow', function() {

                            $('#panel').stop().animate({width:"0", opacity:0.1}, 500); //slide the #panel back to a width of 0

                        });

                    });

                });

            </script>

        </head>

        <body>

            <!--the hidden panel -->

            <div id="panel">

                <div class="content">

                    <!--Slideable social icons here...  -->

                    <a href="#">

                        <img src="img/facebook.png" alt="Co-op Care on facebook" width="64" height="64" /> </a>

                    <a href="#">

                        <img src="img/twitter.png" alt="Twitter@Co-op Care" width="64" height="64" /> </a>

                    <a href="#">

                        <img src="img/google.png" alt="Google +" width="64" height="64" /> </a>

                    <a href="#">

                        <img src="img/youtube.png" alt="You Tube" width="64" height="64" /> </a>

                </div>

            </div>

            <!-- This DIV will activate the sliding panel. -->

            <div id="socialPrompt">

                <p>

                    Social Prompt

                </p>

            </div>

        </body>

    </html>