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>
