Accordion like button

Question

Relatively new to jquery. I'm trying to make a button like the accordion button...something that will take the button and slide out a div beneath it like the theme selector on this page: http://craigsworks.com/projects/qtip2/demos/#themeroller (not even sure what to call it).

The big parts are that it slides out and that it sits above the content on the page and doesn't change the div's height when it slides out.

Does anyone know of a widget or a way to work an accordion button (or other button) to do this?

Thanks!

Answer 1

This fiddle should get you started. Be aware there are some issues with ie 7, if you are worried about IE7. You can fix the issues with a bit of conditional styling.

To Break it down

HTML

<div class="multiButton">
    <input class="main" type="button" Value="Set Up"/><input type="button" class="Selector" value="^"/>
    <ul class="options">
        <li><a href="linka.html">Set Up</a></li>
        <li><a href="linkb.html">Update</a></li>
    </ul>
</div>
<div>Some more content</div>

CSS

/*This is the "Slider"*/
.multiButton ul
{
    display:none;
    border: solid 1px black;
    width:75px;
    position: absolute;
    background-color:#FFF;
} 


/*Main Part of the button*/    
.multiButton .main
{
    border: solid 1px black;
    width:60px;
}


/*Slider "trigger"*/
.multiButton .Selector
{
    border: solid 1px black;
    border-left:none;
    width:15px;
}


/*The Whole "Button"*/
.multiButton { position: relative;}

Javascript

 /* Trigger the dropdown */    
 $(".multiButton .Selector").click(function(){
    $(".multiButton ul").slideToggle();
 });


 /* Slide up the drop down if the mouse leaves the button */
 $(".multiButton").mouseleave(function() {
    $(this).children("ul").slideUp();
});

/* Change the button text and slide the dropdown up on link click */
$(".multiButton a").click(function(){
    $(this).closest(".multiButton").children(".main").val($(this).text());
    $(this).closest(".options").hide();
    return false; /* Remove this line if you want to use the links in the drop down */
});

NOTE: this is just meant to get you started. You may need to wire up further event handlers for clicking the button on links depending on your needs.