Showhide issues

Showhide issues

Hello all,

New to jquery (as of this morning!) and javascript as a whole, so do forgive my lack of knowledge on coding.

I'm attempting to make a slide down menu, i have succeeded to a degree, with a few slight problems i hope somebody can help me with, sure they're very simple ones!

First is that when the menu loads (I'm using images rather than text as buttons) everything is fine, but when the 'design' menu button is clicked and the submenu options drop down, the deign menu button transforms from the design.png to its html code (<img src='images/design.png'>) rather than the actual .png that is supposed to appear. The menu works fine, and can be clicked and clicked, but the design.png only appears on initial page load, and disappears after it is clicked.

Secondly, how can i change the spacing between the menu options? I've tried all sorts of css tinkering, but the problem seems to lie with the jquery 'design' menu, with its large parameters. I'd like the menu options much closer together.

below is the code and an image of the page on its initial load and then with the problem i have mentioned.

  1. <!doctype html>
    <html>
    <head>
    <script type="text/javascript" src="jquery-1.4.2.js"></script>

    <script type="text/javascript">
        
    // this tells jquery to run the function below once the DOM is ready
    $(document).ready(function() {

    // choose text for the show/hide link
    var showText="<img src='images/design.png'>";
    var hideText="<img src='images/design.png'>";

    // create the toggle link
    $("#hide_this").before("<p><a href='#' id='toggle_link'>"+showText+"</a>");

    // hide the content
    $('#hide_this').hide();

    // capture clicks on the newly created link
    $('a#toggle_link').click(function() {

    // change the link text
    if ($('a#toggle_link').text()==showText) {
    $('a#toggle_link').text(hideText);
    }
    else {
    $('a#toggle_link').text(showText);
    }

    // toggle the display
    $('#hide_this').toggle('slow');

    // return false so any link destination is not followed
    return false;
                    });

    });

    </script>
    <style type="text/css">
    <!--
    body {
        background-image: url(images/background.jpg);
    }
    #wrapper {
        width: 1000px;
        margin: 0;
    }
    #header {
        margin: 0px;
        padding: 0px;
        height: 200px;
        padding-top: 10px;
        padding-left: 10px;
    }

    }
    }
    #mainContent {
        margin: 0px;
        padding: 0px;
        height: 500px;
        float: right;
        width: 760px;
    }
    ba img {
        margin: 0px;
        padding: 0px;
        float: left;
    }
    #sidebar {
        margin: 0px;
        padding: 0px;
        float: left;
        width: 230px;
        padding-top: 50px;
        height: 300px;
        padding-left: 10px;
    }
    #hide_this {
        margin: 0px;
        padding: 0px;
        float: left;
        width: 220px;
        margin-top: -15px;
        margin-bottom: -15px;
    }
    news img {
        margin: 0px;
        padding: 0px;
        margin-bottom: -15px;
        padding-bottom: -15px;
    }
    -->
    </style>
    </head>
    <body>
    <div id="wrapper">
      <div id="header"><img src="images/BAheder.png" width="132" height="173"></div>
    <div id="mainContent"></div>
    <div id="sidebar">
    <p><img src="images/NEWS.png" name="news" width="76" height="20" id="news"></p>
    <div id="hide_this"><img src="images/foals.png" width="53" height="15" a href=">
    <div id="hide_this"><br>
      <img src="images/PARTY.png" width="55" height="15"><br>
      <img src="images/COFFEE.png" width="135" height="15">
      <img src="images/UNI.png" width="154" height="15"><br>
      <img src="images/OXfam.png" width="54" height="15"><br>
        <br>

    </div>
    <img src="images/paintings.png" width="110" height="20"><br>
    </div>
     
    </div>
    </body>
    </html>