ansaurus

Question

Answer 1

A:

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();
        }
    );
});

Jage 2010-05-12 18:47:28

That doesn't work because of the way that jquery reads the code. It loses the header part and calls the "content" as the header. Think of it as pushing everything down. Also I am just looking for it to fade to an opacity not totally fade out.

Slick Willis 2010-05-12 19:02:41

Answer 2

A:

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);
        }
    });
});

fudgey 2010-05-12 19:55:15

Thanks for the help it is exactly what I needed it to do. The next problem that I am having is that the first panel, labled "Reference", is shown open when the page loads. Is there a way that I can have that hidden when the page loads and show after the user mouses over "Reference". But still keep the same smooth up/down motion?

Slick Willis 2010-05-12 20:08:33

I updated my answer above and the demo (http://jsfiddle.net/U83Rd/1/), just add `collapsible: true, active: false` to the options when you initialize the accordion.

fudgey 2010-05-12 20:30:34

Thanks, I really like the jsfiddle "online render" that you used to do this. How did you find it?

Slick Willis 2010-05-14 12:58:18

ansaurus

tags:

views:

answers:

Jquery Accordion and Fading

related questions