I have a Javascript Accordiong, currently it displays the first dd when page is loaded, then when you click on a dt tag, the dd that is open should close and the dd tag within the dt clicked show slidedown.
However atm the first dd is shown on load, the open dd closes when another dt is clicked, but the next dd doesnt show.
Can someone please help me :/
My JS:
//Accordion - Hides open, and opens the clicked
$(document).ready(function() {
$('dd:not(:first)').hide(); //hides all but the first dd (the content under the headings)
$('dt').click(function() {
$('dd').slideUp('slow'); //slides up current dd
$(this).parent('dt').next('dd').slideDown('slow');
});
});
This is my html:
<!DOCTYPE HTML>
<html>
<head>
<title>Hobbies</title>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/jscript.js"></script>
<link rel="stylesheet" href="style\main.css" media="screen" />
</head>
<body>
<div id="container">
<a name="top"></a>
<div>
<ul class="menu">
<li><a href="index.html">Home</a></li>
<li><a href="schedule.html">Schedule</a></li>
<li><a href="resume.html">Resume</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="hobbies.html">Hobbies</a>
<ul>
<li><a href="hobbies.html#uni">University</a></li>
<li><a href="hobbies.html#games">Gaming</a></li>
<li><a href="hobbies.html#chess">Chess</a></li>
<li><a href="hobbies.html#golf">Golf</a></li>
<li><a href="hobbies.html#music">Harmonica</a></li>
</ul>
</li>
<li><a href="image.html">Images</a></li>
</ul>
</div>
<div id="contenthobby">
<div>
<dt><a name="uni"><h2>University</h2></a></dt>
<dd>
<div class="pa">
<p> content
</div>
<div class="pic">
<img src="http://physics.uq.edu.au/ap/cosmicflow/wp-content/uploads/2011/11/uq_logo.gif"
alt="Error Loading Image">
<p>This is the UQ logo</p>
<img src="http://maps.googleapis.com/maps/api/staticmap?center=-27.497899,153.013222&zoom=16&size=250x250&markers=-27.497899,153.013222&sensor=false" alt="The University of Queensland"/>
<p>This is UQ</p>
</div>
<a href="#top">Return to Top</a>
</dd>
</div>
<div>
<dt><a name="games"><h2>Gaming</h2></a></dt>
<dd>
<div class="pa">
<p>I love to play games, even though it wastes so much time and amounts to nothing.
It allows me to just go into another world. Something amazing when your slaying dragons
haha.</p>
<p>SKYRIM!</p>
<p>What I Like About it</p>
<ol>
<li>Able to immerse yourself into the game</li>
<li>Gets the adrenalin pumping when your in an intense fight</li>
<li>Allows for late night fun</li>
</ol>
</div>
<div class="pic">
<img src="http://www.darylh.com/images/articleimages/SkyrimLogo.png"
alt="Error loading image: http://www.darylh.com/images/articleimages/SkyrimLogo.png">
<p>This is the game logo for skyrim</p>
<iframe width="320" height="240" src="http://www.youtube.com/embed/ARaOOKafLEw"></iframe>
<p>This is a video of the fun shout in skyrim.</p>
</div>
<a href="#top">Return to Top</a>
</dd>
</div>
<div>
<dt><a name="chess"><h2>Chess</h2></a></dt>
<dd>
<div class="pa">
<p> I love playing chess. It is a good way to unwind, will keeping your mind
sharp. It allows you to hone your skills and adapt your way of thinking.</p>
<p>Chess is a game played by men and boys alike, and this is why i believe
it is essential to a persons growth. Hence why I play it.</p>
<p>What I Like About it</p>
<ol>
<li>Sharpens your mind</li>
<li>Fun to work out the problem and beat your opponenet</li>
<li>Gives you a clearer outlook on the world</li>
</ol>
</div>
<div class="pic">
<img src="http://www.graemeanthonypewter.com.au/uploads/image/Armageddon-Chess-Set-2.jpg" alt="chess" height="250" width="250">
<p>This is an example of a chess set</p>
<img src="http://upload.wikimedia.org/wikipedia/commons/7/71/ChessPawnSpecialMoves.gif" alt="chess board" width="250" height="250">
<p>This is a chess move, used by pros</p>
</div>
<a href="#top">Return to Top</a>
</dd>
</div>
<div>
<dt><a name="golf"><h2>Golf</h2></a></dt>
<dd>
<div class="pa">
<p>The sport of golf is one of majesty and finesse. It allows one to realise
that one cannot focus on where he is, but where he is going, and how he is
going to get there!</p>
<p>What I Like About It</p>
<ol>
<li>Its outdoors</li>
<li>Is fun to play</li>
<li>Get to drive around in the golf cart</li>
</ol>
</div>
<div class="pic">
<img width="250" height="250" src="http://www.ashlargolfclub.com.au/upload/wysiwyg/whatsonIndex/Copy%20of%20Copy%20of%20Golf-Ball-and-Tee.jpg" alt="Golf ball">
<p>This is a golf ball</p>
<iframe width="250" height="200" src="http://maps.google.com.au/maps?q=54.909901,25.311652&num=1&t=h&hl=en&ie=UTF8&z=14&ll=54.91103,25.312715&output=embed"></iframe><br /><small><a href="http://maps.google.com.au/maps?q=54.909901,25.311652&num=1&t=h&hl=en&ie=UTF8&z=14&ll=54.91103,25.312715&source=embed" style="color:#0000FF;text-align:left">View Larger Map</a></small>
<p>This is my favourite golf course</p>
</div>
<a href="#top">Return to Top</a>
</dd>
</div>
<div>
<dt><a name="music"><h2>Harmonica</h2></a></dt>
<dd>
<div class="pa">
<p>I Love playing the harmonica, it allows me to just release my feelings
through music.</p>
<p>It also allows me to learn control, in how to release air, and adjust my
mouth to get the perfect pitch and sound</p>
<p>What I like About It</p>
<ol>
<li>Its a musically instrument</li>
<li>It has soul</li>
<li>It allows me to unwind after a hard day of work</li>
</ol>
</div>
<div class="pic">
<img width="250" height="250" src="http://www.harmonicagame.com/help/harmonica_tab_screen.gif" alt="Harmonica">
<p>These are the chords of a harmonica</p>
<img width="250" height="250" src="http://www.hoerl.com/Graphics/music_harm_hold.gif" alt="Proper way to hold">
<p>How to Hold a Harmonica</p>
</div>
<a href="#top">Return to Top</a>
</dd>
</div>
</div>
<footer class="footer">
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss"
alt="Valid CSS!" />
</a>
</footer>
</div>
</body>
</html>
Working demo http://jsfiddle.net/UL3V3/1/
Good read: API : http://api.jquery.com/visible-selector/
slideTogglehttp://api.jquery.com/?ns0=1&s=slideToggle&go=Using this you can close the open
ddas well.Rest you can play around and find out the behavior.
This will help. B-)
Jquery code