Menu not collapsing :-(


Hi from volcanic ash laden wakefield UK…

Bought the sitepoint JQUERY novice to ninja and really want to mimick the expandable collapsible menu effect detailed in chapter 5 but i just cant get the collapse effect to work. I suspect the jscript is not connecting.

Jscript is brand new to me so I just cant figure out why its not working on this page -
http://www.pauserefreshment.co.uk/cafeology_fairtrade_mocha_java_beans.html

Now the actual menu is sitteing in a test space right at the bottom right hand corner and as you can see its just static. I thought once I’d downloaded the jscript library it would all hook up nicely but no doubt there a short circuit somewhere :frowning:

Heres is the offending code

<!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>
<title>Traditional coffee machine beans | pause... refreshment</title>
<META NAME="ROBOTS" CONTENT="NOINDEX, NOFOLLOW">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="all">
@import "css/product_detail.css";
</style>
<script type="text/javascript" src='js/script.js'></script>
<script type="text/javascript" src="js/prototype.js"></script>
<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
<script src="js/lightbox.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css"
   media="print" href="css/print.css" />
</head>
<body>
<div id="pagewidth">
<div id="header">
  <p> <a href="index.html"> Pause </a> </p>
  <ul>
    <li> <a href="whoweare.html" class="who"> who we are... </a> </li>
    <li> <a href="ourrange.html" class="our"> our range... </a> </li>
    <li> <a href="happycustomers.html" class="happy"> happy customers... </a> </li>
    <li> <a href="talktous.html" class="come"> come &amp; say hello... </a> </li>
    <li> <a href="usefulinfo.html" class="useful"> useful things...</a> </li>
    <li> <a href="#" class="on-line"> on-line shop... </a> </li>
    <li> <a href="supportingyourworld.html" class="show"> show you care... </a> </li>
  </ul>
</div>
<div id="main">
  <div id="content">
    <div class="left">
      <h1 class="orange"><a name="Top" id="Top"></a>Buy traditional coffee machine beans - fair trade Mocha Java</h1>
      <h2>To buy call Suzy 01924 363091 |<a href="mailto:david@pause.co.uk;hello@pause.co.uk"><strong> suzie@pause.co.uk</strong></a></span></a></h2>
      <p><a href="images/model_bean/mocha_java_fact_500_693.jpg" rel="lightbox" title="Traditional coffee machine bean fact sheet"><img class="float_image" src="images/model_bean/mocha_java.jpg" alt="Traditional coffee machine beans" /></a>We supply cafés & restaurants with fair trade mocha java coffee beans in boxes of 6 x 1kg bags with free next day delivery. Uber ethical our fair trade cafeology coffee beans have been rubber stamped by the FAIRTRADE foundation and are compatible with <strong><a href="traditional_coffee_machine_la_spaziale_special.html" title"Traditional coffee machine"> traditional coffee machines</a></strong> only.</p>
      <p>Produced mostly from the Cosurca Cooperative in Colombia and Coocafe in Costa Rica. They have composting programs in several of the communities to help generate organic fertilizer and reduce waste which helps to retain their land and maintain their Organic certification. Using valuable revenue from Fairtrade sales this has allowed Cosurca to stop the cultivation of more than 1,800 acres of coca and poppy.</p>
      <p><strong>Four things our fair trade cafeology mocha java beans need to tell you...</strong></p>
      <UL>
        <LI class="eco4">Fair trade endorsed</LI>
        <LI class="eco7">Origin: Cosurca Cooperative in Colombia and Coocafe in Costa Rica</LI>
        <LI class="eco8">Blend: Colombia and Costa Rica Arabica </LI>
        <LI class="eco13">Taste: Combination of fruit, chocolate and spiciness</LI>
      </UL>
      <div style="clear:both"></div>
      <h2 class="orange">How many cups of coffee do your 1kg coffee bean bags serve up?</h2>
      <p><img class="free" src="images/model_bean/andy_question.jpg" width="150" height="150" alt="Traditional coffee machine beans with uber slurps"  />Each 1kg cafeology Mocha Java
        coffee bean bag makes 857 
        standard sized 7oz cups 
        which equals 10 slurps 
        (David tested this) 
        per cup 8570 slurps per bag.</p>
      <p>Your  colleagues will love you forever when you buy this gourmet standard office coffee. Mocha Java, possibly the world's most famous coffee blend fuses two very distinctive coffees culminating in a full-bodied, rich in flavour and aroma, 
        coffee experience with subtle chocolate highlights (See Terry's verdict for a translation).</p>
      <UL>
        <LI class="eco9">Terry's verdict: "The poshist coffee I've ever tasted"</LI>
        <LI class="eco10">Az's verdict: "I don't drink coffee but if I did I'd buy this"</LI>
      </UL>
      <div style="clear:both"></div>
      <h3 class="orange">Which pause refreshment traditional coffee machine are compatible with the cafeology fair trade Mocha Java coffee beans?</h3>
      <p><img class="free" src="images/model_bean/special_150_150_2.jpg" alt="Traditional coffee machine" />The <a href="traditional_coffee_machine_la_spaziale_s5.html" title"Tradtional coffee machine">La Spaziale S5</a> &amp; <a href="traditional_coffee_machine_la_spaziale_special.html" title="Traditional coffee machine">La Spaziale Special</a> traditional coffee machines pairs up perfectly with the cafeology fair trade mocha java coffee beans. But that's not the only office coffee machine that can pair up, check out  your other table top office coffee machine choices:</p>
      <UL>
        <LI><a href="traditional_coffee_machine_la_spaziale_s5.html" title="Traditional coffee machine">La Spaziale S5</a></LI>
        <LI><a href="traditional_coffee_machine_la_spaziale_special.html" title="Traditional coffee machine">La Spaziale Special</a></LI>
      </UL>
      <div style="clear:both"></div>
      <h4 class="orange">Traditional coffee machine beans - mocha java <span class="stars">special features</span></h4>
      <p><img class="free" src="images/model_bean/julie_mask.jpg" alt="Breathable traditionjal cofee machine beans" />
      <p>Every bag of cafeology fair trade coffee beans has a Co2 valve in the bag. The valve releases toxic fumes locking in the freshness of the bean - don't buy bags of coffee beans without them.</p>
      <p>Unfortunately  Eva Longoria  was unavailable to model our fair trade coffee beans from cafeology  but luckily Julie from Sales caught the photographer's eye.</p>
      <div style="clear:both"></div>
      <h5 class="orange">We have ways of making them come back for more.</h5>
      <p><img class="free" src="images/model_filter/david_cards.jpg" width="150" height="150" alt="Buy Traditional coffee beans get loyalty cards" />Buy fair trade coffee beans this month and we'll send you a generous handful of loyalty cards, very useful if your running a  café business and you want to incentivise and keep the office workers coming back for more.<br/>
      </p>
      <div style="clear:both"></div>
      <h6 class="orange">What else do you sell in the Cafeology fair trade coffee range?</h6>
      <p><img class="free" src="images/brand/Cafeology.jpg" alt="buy fair trade traditional coffee machine beans" />Cafeology sell a stack load of other beverage fair trade ancillaries which you can buy direct from pause refreshment including:</p>
      <UL>
        <LI>Filter coffee; bulk & Freshbrew coffee; instant coffee</LI>
        <LI>Hot Chocolate</LI>
        <LI>Sugar sticks</LI>
        <LI>Paper cups and lids; china cups, saucers & mugs</LI>
        <LI>Promotional point of sale materials</LI>
      </UL>
      <div style="clear:both"></div>
      <h6 class="orange">How do I get you to supply my office with your coffee?</h6>
      <p class="type"><img class="free" src="images/delivery/van.jpg" alt="Traditional coffee machine bean delivery" />Get our latest wholesale coffee filter, bean and instant prices call Suzy on 01924 363091 or eMail <a href="mailto:hello@pause.co.uk">suzy@pause.co.uk</a> :-)</br>
      </p>
      <div style="clear:both"></div>
      <p class="print"><a href="#Top">&#8593; Back to Top</a></p>
      <p class="print"><a href="#" onclick="window.print();return false;">Print friendly version</a></p>
    </div>
  </div>
  <!-- Our range nav -->
  <div id="sidebar">
    <ul>
      <li class="activeyellow"> <a href="ourrange.html"> our coffee machine range :-)<span style="dotsyellow">... </span> </a>
        <ul>
          <li> <a href="office_coffee_machine_darenth_style_5.html" title="Perfect office coffee machine"> Darenth Style 5 - Instant</a><span style="dotsyellow">...</span> </li>
          <li> <a href="franke_evolution_coffee_machine.html"> FRANKE Evolution - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
          <li> <a href="flavia_creation_400.html"> Flavia 400 - Filter</a><span style="dotsyellow">...</span> </li>
          <li> <a href="#"> FRANKE Flair - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
          <li> <a href="cafe_coffee_machines.html"> Fresh Ground 310 - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
          <li> <a href="koro_coffee_machine.html"> Koro - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
          <li> <a href="bean_to_cup_coffee_maker_la_cimbali_M1.html"> La Cimbali M1 - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
          <li> <a href="traditional_coffee_machine_la_spaziale_s5.html" title="Traditional coffee machine"> La Spaziale S5 - Traditional</a><span style="dotsyellow">...</span> </li>
          <li> <a href="traditional_coffee_machine_la_spaziale_special.html" title="Traditional coffee machine"> La Spaziale Special - Traditional</a><span style="dotsyellow">...</span> </li>
          <li> <a href="mondo2_coffee_machine.html"> Mondo 2 - Filter</a><span style="dotsyellow">...</span> </li>
          <li> <a href="qwikbrew_coffee_machine.html"> Qwikbrew - Filter</a><span style="dotsyellow">...</span> </li>
          <li> <a href="bean_to_cup_coffee_maker_schaerer_siena_2.html" title="bean to cup coffee maker"> Schaerer Siena 2 - Bean 2 Cup</a><span style="dotsyellow">...</span> </li>
          <li> <a href="pump_coffee_machine.html"> Therm - Filter</a><span style="dotsyellow">...</span> </li>
          <li> <a href="vision_coffee_machine.html"> Vision 400 - Instant</a><span style="dotsyellow">...</span> </li>
        </ul>
      </li>
      <li> <a href="ouringredients.html"> our ingredients<span style="dotsyellow">... </span> </a> </li>
      <li> <a href="largeorganisations.html"> large organisations<span style="dotsyellow">...</span> </a> </li>
      <li> <a href="specialoffer.html"> special offer<span style="dotsyellow">...</span> </a> </li>
      <li> <a href="pausepromise.html"> pause promise<span style="dotsyellow">...</span> </a> </li>
    </ul>  
        </li>
      </ul>
  </div>
</div>
<div id="menu">
<ul>
        <li><a href="#">What's new?</a>
          <ul class="active">
            <li><a href="#">Weekly specials</a></li>
            <li><a href="#">Last night's pics!</a></li>
            <li><a href="#">Users' comments</a></li>
          </ul>
        </li>
        <li><a href="#">Member extras</a>
          <ul>
            <li><a href="#">Premium Celebrities</a></li>
            <li><a href="#">24-hour Surveillance</a></li>
          </ul>
        </li>
        <li><a href="#">About Us</a>
          <ul>
            <li><a href="#">Privacy Statement</a></li>
            <li><a href="#">Terms and Conditions</a></li>
            <li><a href="#">Contact Us</a></li>
          </ul>
        </li>
      </ul>
</div>
  
<div id="footer">
  <ul>
    <li><a class="special" href="index.html">Home</a></li>
    <li><a class="special" href="pressreleases.html">Press</a></li>
    <li><a class="product" href="largeorganisations.html">Large Organisations</a></li>
    <li><a class="product" href="/pdf/large_organisations.pdf">Brochure</a></li>
    <li><a class="new" href="legal.html">Legal</a></li>
    <li><a class="our" href="pausepromise.html">pause promise</a></li>
    <li><a href="supportingyourworld.html">Show you care</a></li>
    <li><a class="special" href="index.html">Copyright 2008 © pause</a></li>
  </ul>
</div>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-4432210-1";
urchinTracker();
</script>
</body>
</html>

/*Collapse menu start*/
#menu { 
  float: right;
  width:200px;
}

#menu, #menu ul{
  list-style-type: none;
  padding: 0;
  margin: 0;
}

#menu li { 
  cursor:pointer;
  background:#94C5EB;
  border-bottom:1px solid #444;
}

#menu li a {
  text-decoration: none;
}

#menu>li>a { 
  padding: 2px 10px; font-weight:bold;
}

#menu li li{ 
  cursor:auto;
  border:0;
  padding:0 14px;
  background-color:#fff;
}

#disclaimer, #intro {
  width: 400px;
}
/*Collapse menu end */

Any insights welcome :slight_smile:

Problem fixed - didnt realised I had to ad this code in the head:

<script type=“text/javascript”>$(document).ready(function(){
$( ‘#menu > li > ul’ )
.hide()
.click(function( e ){
e.stopPropagation();
});
$(‘#menu > li’).toggle(function(){
$(this).find(‘ul’).slideDown();
}, function(){
$( this ).find(‘ul’).slideUp();
});
});
</script>