Jquery Accordion and Fading

StackOverflow https://stackoverflow.com/questions/2821731

Question

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>&nbsp</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>
Was it helpful?

Solution

I posted a demo for you... here is the script I used:

$(function() {
    $("#accordion").accordion({
        event: "mouseover",
        collapsible: true,
        active: false
    });
    // Fade out all Titles except for the active one
    $(".Title:not(.ui-state-active)").fadeTo(1,0.25);
    $(".Title").hover(function () {
        $(this).stop().fadeTo(250,1)
            .closest(".Title").find(".links").fadeTo(250,0.75);
    }, function() {
        // Fade out all titles except the active one
        $(".Title:not(.ui-state-active)").fadeTo(1,0.25);
        // Make sure the active title is faded in
        if ($(this).is('.ui-state-active')) {
            $(this).stop().fadeTo(250,1);
        }
    });
});

OTHER TIPS

Each item in your accordion consists of a div.Title and a div.links. Wrap each of those accordion items in another div and apply your hover function to that:

<div class="accordionItemWrap">
    <div class="Title"><a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Grub</a></div>
    <div class="links">
        <a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Jquery Documentation/Help</a><br>
        <a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">Stack Overflow</a><br>
        <a href="#" STYLE="TEXT-DECORATION: NONE; color: #00DEFF;">w3schools.com</a><br>
    </div>
</div>

JS:

$(document).ready(function(){
    $(".Title").fadeTo(1,0.25);
    $(".accordionItemWrap").hover(
        function () {
            $(this).find('.Title').fadeIn();
            $(this).find(".links").fadeIn();
        }, 
        function () {
            $(this).find('.Title').fadeOut();
            $(this).find(".links").fadeOut();
        }
    );
});
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top