Jquery “slideToggle()” function working fine in Adobe Dreamweaver, but doesn't work on browser

Question

I have used a jquery "slideToggle" function in my html page, which will drop down a sublist as soon as I click a header named "Planning" on my webpage. Though this is working exactly I want it to, in Adobe Dreamweaver design mode, but this doesn't work when opened in the browser.Here is my complete code:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <script src="jquery-1.8.3.min.js">
    </script>
    <script> 
    $(document).ready(function(){
      $("#planning").click(function(){
        $("#planning_panel").slideToggle("fast");
      });
    });
    </script>
    <title>Ecommerce Information</title>
    <style type="text/css">
    <!--
    a:link {color:#03F; text-decoration:none; text-emphasis:none;         font-size:12px}            /* unvisited link */
    a:visited {color:#03F; text-decoration:none} /* visited link */
    a:hover {color:#F30; text-decoration:none; font-size:14px}   /* mouse over link */

    .style2 {font-size: 13px;
        font-family:"Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;

    }
    .style4 {
        font-size: 18px;
        font-weight: bold;
        color: #FF6600;
    }
    .style6 {color: #000000}
    .style7 {font-size: 8px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }
    .style23 {font-size: 14px;
        font-family: Arial, Helvetica, sans-serif;
        font-weight: bold;
    }
    .style45 {
         background-color:#E8E8E8;
    }
    .style44 {
        background-image:url('gray_jean.jpg');
    }
    #planning_panel
    {

    display:none;
    }
    -->
    </style>
    </head>

    <body>
    <div align="center">
      <a href="../index.html">
      <img border="0" src="banner1.jpg" width="800" height="120" alt="Ecommerce Knowledge Base"></a>
      <div style="background-image:url(Heading%20Background.jpg); width:800px">
      <a href="../index.html" style="position:relative; left:-130px">HOME</a>
      <a href="" style="position:relative; left:-65px" id="planning">PLANNING</a>
      <a href="" style="position:relative; left:0px" id="design">DESIGN & HOSTING</a>
      <a href="" style="position:relative; left:65px" id="marketing">MARKETING</a>
      <a href="" style="position:relative; left:130px" id="technology">TECHNOLOGY</a>
      </div>
      <table width="800" border="0" cellspacing="0" cellpadding="5" class="style44">
      <tr><td><div id="planning_panel" style="position:absolute; left:295px;top:150px; background-color:#999; padding:5px;">
       <a href="../Planning/what-is-electronic-data-interchange.html">Electronic-Data-        Interchange</a><br>
       <a href="../Planning/web-site-analysis----a-study-in-damag.html">Web Site Analysis</a><br>
       <a href="../Planning/web-ecommerce--where-to-begin.html">Web Ecommerce</a><br>
       <a href="../Planning/streamline-your-website-pages.html">Streamline Web Pages</a><br>
       <a href="../Planning/set-up-your-own-blog-free.html">Setting Up Blog</a><br>
       <a href="../Planning/online-backup--the-simple-value.html">Online Backup</a><br>
       <a href="../Planning/introduction-to-ecommerce.html">Introduction To Ecommerce</a><br>
       <a href="../Planning/building-ecommerce-web-sites--where-d.html">Build eCommerce Sites</a><br>
       <a href="../Planning/banned-by-google-and-back-again..html">Banned by Google</a><br>
       <a href="../Planning/are-drop-ship-directories-really-wort.html">Know Drop Ship Directories</a><br>
       </div></td></tr>
        <tr>
          <td>

            <div align="center">   
          &nbsp;</div></td>
        </tr>
        <tr>
          <td width="514" valign="top"><div align="left">
              <table width="99%" height="114">
                <tr>
                  <td align="left" height="22"><div align="justify"><span class="style7">
                    <font color="navy" size="1" face="Tahoma"><h1 align="center">5 Minute Guide to Video Editing for Beginners</h1><br>
                      </font></span></div></td>
                </tr>
                <tr >
                  <td align="left" height="12"><span class="style2"><span>My text</span><hr size=-1>
      <br>
      </span></td>
                </tr>
                </table>
            </div>        <p align="left">&nbsp;        </p>
          </td>
        </tr>
      </table>

      </div>
    </body>
    </html>

Answer 1

I do not know if I understand your question correctly. you dont have an href attribute set to the menu "Planing" (not sure if it is on purpose). If you wish to do is just open and close the panel (without going to a link) then this change to your code should help.

   $(document).ready(function(){
      $("#planning").click(function(e){
        $("#planning_panel").slideToggle("fast");
          e.preventDefault(); // prevent default behaviour
      });
    });

Jquery “slideToggle()” function working fine in Adobe Dreamweaver, but doesn't work on browser

Question

1 answers

solution1
1 ACCPTED 2012-12-29 22:15:51

Jquery “slideToggle()” function working fine in Adobe Dreamweaver, but doesn't work on browser

Question

1 answers

solution1 1 ACCPTED 2012-12-29 22:15:51

solution1
1 ACCPTED 2012-12-29 22:15:51