Jquery Accordion and Fading
Posted
by Slick Willis
on Stack Overflow
See other posts from Stack Overflow
or by Slick Willis
Published on 2010-05-12T18:37:46Z
Indexed on
2010/05/12
20:34 UTC
Read the original article
Hit count: 430
I am trying to create a jquery accordion that fades the header of the accordion out when the page is loaded then fades it in when the mouse hovers. The accordion also opens when the mouse hovers. I am able to get all of this working, the problem I am having is when the accordion opens the header moves away and the mouse is no longer on it to keep it lit. I would like the links to keep the header lit as well as if the mouse is on the header itself. Below is the code that I wrote for it.
<html>
<head
<script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-1.4.2.min.js'></script>
<script type='text/javascript' src='http://accidentalwords.squarespace.com/storage/jquery/jquery-custom-181/jquery-ui-1.8.1.custom.min.js'></script>
</head>
<body bgcolor="black">
<style = "css/text">
.links {
font-family: "Georgia", "Verdana", serif;
line-height: 30px;
margin-left: 20px;
margin-top: 5px;
}
.Title {
font-family: "Geneva", "Verdana", serif;
font-weight: bold;
font-size: 2em;
text-align: left;
font-variant: small-caps;
border-bottom: solid 2px #25FF00;
padding-bottom:5px;
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$(".Title").fadeTo(1,0.25);
$(".Title").hover(function () {
$(this).stop().fadeTo(250,1)
.closest(".Title").find(".links").fadeTo(250,0.75);
},
function() {
$(this).stop().fadeTo(250,0.25);
});
});
$(function() {
$("#accordion").accordion({
event: "mouseover"
});
});
</script>
<p> </p>
<div id="accordion">
<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Reference</a></div>
<div class="links">
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Jquery Documentation/Help</a><br>
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">Stack Overflow</a><br>
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #25FF00;">w3schools.com</a><br>
</div>
<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Gaming</a></div>
<div class="links">
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Jquery Documentation/Help</a><br>
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">Stack Overflow</a><br>
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #FF7200;">w3schools.com</a><br></div>
<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Grub</a></div>
<div class="links">
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Jquery Documentation/Help</a><br>
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Stack Overflow</a><br>
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">w3schools.com</a><br>
</div>
<div class="Title"><a href="#"STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">Drinks</a></div>
<div class="links">
<a href="http://docs.jquery.com/Main_Page" STYLE="TEXT-DECORATION: NONE; color: #F9FF00;">Jquery Documentation/Help</a><br>
<a href="http://stackoverflow.com/" STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">Stack Overflow</a><br>
<a href="http://www.w3schools.com/" STYLE="TEXT-DECORATION: NONE; color: #F8FF00;">w3schools.com</a><br>
</div>
</div>
</body>
</html>
© Stack Overflow or respective owner
