I am making an accordian menu with 4 main buttons. All buttons should
be closed at start. When you click 1 button the content area should
slide down and then the content should fade-in. I have for the most
part written the script to create this effect however i see some
glitches with it. When you click the next tab i can see the two
buttons at the bottom moving up and down slightly. Its not a huge
deal, but i would rather them not move at all. I only want the button
i click to move.
Here is my script, please let me know if there is a better way to
write this as many google searches didn't reveal anything good. I'm
sure someone else has wanted to make an accordian menu (slide and then
fade-in) effect.
$(document).ready(function() {
$("dd").hide();
$("span").hide();
$("dt a").click(function () {
$("span").fadeOut(100);
$("dd:visible").slideUp("slow");
$(this).parent().next().slideDown("slow", function () {
$("span").fadeIn("slow");
});
return false;
});
});
And my HTML code looks like this:
<dl>
<dt><a href="#" class="button1"></a></dt>
<dd>
<div id="ContentBox">
<span class="msg_body">
<div id="box1">
<h1>Loreum Ipsum</h1>
<p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
consequat qui Investigationes Investigationes. Ut quam me gothica
dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
facilisis et nis4</p>
<h1>Loreum Ipsum</h1>
<p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
nis4</p>
</div>
</span>
</div>
</dd>
</dl>
<dl>
<dt><a href="#" class="button2"></a></dt>
<dd>
<div id="ContentBox">
<span class="msg_body">
<div id="box2">
<h1>Loreum Ipsum</h1>
<p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
consequat qui Investigationes Investigationes. Ut quam me gothica
dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
facilisis et nis4</p>
<h1>Loreum Ipsum</h1>
<p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
nis4</p>
</div>
</span>
</div>
</dd>
</dl>
<dl>
<dt><a href="#" class="button3"></a></dt>
<dd>
<div id="ContentBox">
<span class="msg_body">
<div id="box3">
<h1>Loreum Ipsum</h1>
<p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
consequat qui Investigationes Investigationes. Ut quam me gothica
dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
facilisis et nis4</p>
<h1>Loreum Ipsum</h1>
<p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
nis4</p>
</div>
</span>
</div>
</dd>
</dl>
<dl>
<dt><a href="#" class="button4"></a></dt>
<dd>
<div id="ContentBox">
<span class="msg_body">
<div id="box4">
<h1>Loreum Ipsum</h1>
<p>Futurum veniam est claritatem lorem lorem. Sequitur legunt
consequat qui Investigationes Investigationes. Ut quam me gothica
dolore ut. Dynamicus est aliquip aliquip tincidunt accumsan. Nunc qui
et dolor lectores hendrerit. Sequitur mutationem blandit hendrerit.
facilisis et nis4</p>
<h1>Loreum Ipsum</h1>
<p>Zzril legere quam lectorum parum hendrerit. Iriure exerci option
euismod futurum etiam. Ut nostrud praesent qui aliquip luptatum.
Consectetuer eodem aliquam iriure nulla lectorum. Eum aliquip
hendrerit et ut eodem. Dynamicus claritatem placerat. facilisis et
nis4</p>
</div>
</span>
</div>
</dd>
</dl>
