Fade in / Fade Out
Fade in / Fade Out
Hello everyone,
Right not exactly a problem that its not working, at the moment i have a jquery tab box ... at the minute when you click on a tab the page slides in and out. But when i want to do is change it so its a fade in and fade out.
Here is the code for the jquery and the divs / uls that i use for the tabs :
Jquery:
-
<script type="text/javascript">
// When the document loads do everything inside here ...
$(document).ready(function(){
// When a link is clicked
$("a.tab").click(function () {
// switch all tabs off
$(".active").removeClass("active");
// switch this tab on
$(this).addClass("active");
// slide all elements with the class 'content' up
$(".content").slideUp("slow");
// Now figure out what the 'title' attribute value is and find the element with that id. Then slide that down.
var content_show = $(this).attr("title");
$("#"+content_show).slideDown("slow");
});
});
</script>
HTML:
-
<div id="tabbed_box_1" class="tabbed_box">
<div class="tabbed_area">
<ul class="tabs">
<li><a href="#" title="Topics" class="tab active">Topics</a></li>
<li><a href="#" title="content_2" class="tab">Archives</a></li>
<li><a href="#" title="content_3" class="tab">Pages</a></li>
</ul>
<div id="Topics" class="content">
<ul>
<li><a href="">These will be our forums <small>4 Posts</small></a></li>
</ul>
</div>
<div id="content_2" class="content">
<ul>
<li><a href="">These will be the catagorys<small>6 Posts</small></a></li>
</ul>
</div>
<div id="content_3" class="content">
<ul>
<li><a href="">These will be out settings page</a></li>
</ul>
</div>
</div>
</div>
Can anyone please help me turn this to fade effect ?
Thanks in advance,
Chris