the jquery:
<script type="text/javascript"> $(function() { $('.sectionTitle').click(function() { $('.sectionBody').hide("slow"); $(this).next("div").show("slow"); }); }); the clickable parts: it is unclear what you want the visitors to click on to hide/show your sections, so i created an <h1> element and gave it a class of .sectionBody for the task. you can certainly use whatever you like. the content: i wrapped the content following the <h1 class="sectionTitle> elements in '<div class="contentBody"></div>' so that you could easily show/hide the content. the cleanup: remove all of your jquery code referencing your divs. the working example: below is your code with the new code added in: (please note that i removed some of your flash code as it was aborting in my environment. you will need to add it back in.) <!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=UTF-8" /> <title>stripy divs</title> <style type="text/css"> @import"css/stripy_simple.css"; </style> <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript"> $(function() { $('.sectionTitle').click(function() { $('.sectionBody').hide("slow"); $(this).next("div").show("slow"); }); }); </script> </head> <body> <div id="container"> <div id="subframe"> <div id="contentpane"> <div id="header"> <noscript> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/ swflash.cab#version=9,0,0,0" width="550" height="48" id="stripy_ident" align="middle"> <param name="allowScriptAccess" value="sameDomain" /> <param name="allowFullScreen" value="false" /> <param name="movie" value="stripy_ident.swf" /><param name="quality" value="high" /><param name="wmode" value="transparent" /><param name="bgcolor" value="#ffffff" /> <embed src="stripy_ident.swf" quality="high" bgcolor="#ffffff" width="550" height="48" name="stripy_ident" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object> </noscript> </div> <!--<div id="stripes"> </div>--> <div id="sidebar"> GRAPHIC DESIGN </div> <div id="workhide" class="work"> </div> ------------------------------------------------------------------------- who <h1 class='sectionTitle'>WHO</h1> <div class='sectionBody'> <!--ABOUT--> <div id="about" class="who">there is something here now</div> </div> ------------------------------------------------------------------------- me <h1 class='sectionTitle'>Me</h1> <div style='display: none;' class='sectionBody'> <div id="history" class="me divs"> <h4 class="heading">WINK</h4> <p>STRIPY EYE is a one person design compendium, Im an individual working on a freelance basis. My experience spans roughly ten years working in a variety of backgrounds from exhibition, print and web based media, to teaching at FE level and recently working in flash and 3d rendering. <br /> The site contains a selection of my work, illustrating a broad range of skills in communication media. <br /> <br /> If you wish to talk or simply seek advice about a project please contact me <br /> t...@stripyeye.com <br /><br /> If you would like further information about me, my cv is available as a download </p> </div> <!--PROCESS--> <div id="processbutton" class="slide"> </div> </div> ------------------------------------------------------------------------- view <h1 class='sectionTitle'>VIEW</h1> <div style='display: none;' class='sectionBody'> <div id="main" class="view"> <h4 class="heading"> PROCESS</h4> <div class="divfloats"> <b>Mind</b><br /> Our perceptions of something can be both enlightening and perplexing. We can present something that will communicate different things to different people. Unifying the perceptions of an idea is an important process that requires thought and a guiding hand on how it is received. It requires someone who can take the idea in hand and enrich it, so that it resonates in the receivers mind. </div> <div class="divfloats"> <b>Ears</b><br /> Listening to what you have to say about your design needs is of utmost importance. My approach is about listening to your needs and aspirations for the design and how best to launch it in the public domain. Without listening there is no presenting. </div> <div class="divfloats"> <b>Mouth</b><br /> Discussion and partnership through the process is equally important. It's essential to communicate and discuss each stage of the process and maintain constant correspondence throughout the implementation, ensuring the project grows in the right way for you. </div> <div class="divfloats"> <b>Eyes</b><br /> The work is there for all to see, so if we get the first three right the eyes will have it. Help me to help you present your idea to the world. </div> </div> <!--CONTACT--> <div id="contact" class="call"> </div> </div> ------------------------------------------------------------------------- callme <h1 class='sectionTitle'>CALLME</h1> <div style="display: none;" class='sectionBody'> <div id="contactview" class="callme"> <h1>TALK</h1> <P> t...@stripyeye.com </P> <P> 07964 355 158 </P> </div> <!--STARTPICS--> <div id="pics" class="images"> </div> <div id="picsview" class="imagesview"> <p>This is me and I am here for you</p> </div> <div class="menu"> </div> <!--<div id="logo"> </div>--> <!--WORKFOLIO--> <div id="workspace" class="showwork"> Hello I am exposed!!!!!!! </div> <div id"footer"> </div> <!--CONTENTPANE-END--></div> <!---SUBFRAME--END----></div> <!--CONTAINER--END----></div> </body> </html>