jQuery Accordion header with jQuery UI icon button (hide/show + hover/click)

Tags: javascript,jquery,html,css,jquery-ui

Problem :

What i need: a jQuery UI framework button like the one that can be found here: http://jqueryui.com/themeroller/ (look at Framework Icons) in a jQuery accordion header.

Live Sample: http://www.nikollr3.three.axc.nl/

(From what i understood; a button can also be mimicked by an Achor tag with the right jQuery UI class.)

Requirements: I do not want the button/icon to be shown when the header is NOT currently selected. On the other hand, if the header is selected, and thus also it's DIV is shown, i want the icon/button to be displayed. Look at the first image from the left, in that state i do not want the "+" button to be shown. In all other images (where it is focused/selected) i do want it to be shown.This currently NOT implemented; how to do this?

-> If the button is clicked, i want statProp to be displayed, i have a function showStatProp() for this.

Issues i am having currently: Hover over 'button' is not doing anything, because currently when the header is selected, the same css is somehow applied to the button as is to the header (look at the cross color of the button: dark grey to black) (there is no seperate hover).

How to get to this? i am currently stuck as there is limited documentation/information to be found on the internet about this specific thing i am trying.

function showStatProp()
                if(document.getElementById("statProp").style.display == "none")
                    document.getElementById("statProp").style.display = 'block';
                    document.getElementById("statProp").style.display = 'none';


<body onkeydown="controlCheck(event)" onkeyup="clearPress()" >
        <div id="application" style="position:absolute">
            <div id="accordion">
                 <h3 id="clickStat">Stations
                 <span style="float:right;" class="ui-state-default ui-corner-all">
                <a class="ui-icon ui-icon-plusthick btpad" href="/getPunten.php">Edit</a>
                 <div id="stations">
                    <input type="text" id="stations_ac" onclick="this.value='';" />
                     <div id="selectedStationDiv">
                        <div id="statProp" style="display:none;">
                    <p>Name: <input type="text" style="float:right; clear:right" size="19" id="statNam" onclick="this.value='';" /></p>
                    <p style="margin-top:15px">
                    <select id ="statTyp" style ="float:right" onchange="">
                    <option title="Test">T</option>
                    <p style="margin-top:15px">
                    <select id ="admtyp" style ="float:right" onchange="FilterByToestanden()">
                    <option title="Alarm">A</option>
                    <option title="Alarm">D</option>
                    <option title="Urgent alarm">U</option>
                    <p>Image: <input type="text" id="statBildnam" size="12" style ="float:right;text-transform: uppercase"></p>

                    <p id="devText">Text:
                    <input type="text" style="float:right; clear:right" id="texts_ac" onclick="this.value='';" /></p>
                    <p id ="respLine">Responsible: <select id="statResp" style="margin-bottom:10px;margin-top:6px;"><option>WERKHUIS-EMG-WEVELGEM</option></select></p>
                    <button id="btnCrtStat" onClick="createStation()" type="button" style="margin-left:26px;margin-top:-3px">Create</button>


                <h3 id="clickImages" onclick="listImages()">Images</h3>
                <div id="imagesList" style="overflow:auto">

                    <ul id='imagesUL'></ul>
                <button onClick="addImage()" type="button" style="margin-left:26px;margin-top:-3px">Add image</button>

enter image description here

Solution :

I guess you want something like this:


I have added a CSS class 'action-button' to the button. To hide button in collapsed state use this CSS:

#accordion .action-button {
    float: right;
    display: none;
#accordion .ui-state-active .action-button {
    display: inline;

To add hover effect:

$('#accordion .action-button').hover(
    function() {
    function() {

To make the button clickable, use something like this:

$('#accordion .action-button a').click(function () {
    self.location.href = $(this).attr("href");


To fix the default and hover states of the button, use this CSS: http://jsfiddle.net/mali303/vf4q0eox/1/

#accordion .action-button .ui-icon {
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_888888_256x240.png);
#accordion .action-button.ui-state-hover .ui-icon {
    background-image: url(http://code.jquery.com/ui/1.9.2/themes/base/images/ui-icons_454545_256x240.png);

    CSS Howto..

    How to pass a Rails variable into a view's CSS that must be refreshed dynamically (every 60 seconds)?

    How to delete first pseudo after

    overlaping text with different styles over image, prevent text of one style to be shown on top of the text of another style

    CSS question: how to remove the border from an image in WordPress

    How to call static block with styles.css

    jQuery hide show id

    When I hover left/right side of a div how do I display previous/next button (using CSS/jQuery)

    express: how to send html together with css using sendFile?

    How do you change the modal link color in Foundation?

    How to make images autoscale regardless of height (like on tumblr blogs)

    CSS - how to code for a specific resolution

    How can I get an image to always appear to the right of some associated text using HTML and/or CSS?

    How to remove zoom effect of tile(metro ui css) using javascript

    How to pass a local file name to css-validator.jar?

    How to change tab key selection color with css? [duplicate]

    CSS styles “leaking” to non-intended elements, why does it happen and how to prevent it?

    How to change the behavior of the following css button?

    how to embed css in sass, or use + selector in sass?

    How to get precise borders and sizes in Android KitKat's Webview(Android Chrome) on Nexus 7?

    how to add several td and tr in css

    Show bottom of an overflow string in a div with fixed height/width?

    How to remove the yellow row highlighting

    How to I bring my sticky navbar in front of the contents on my page?

    How to transform (move whole child dives) div to max width with css?

    How to place the text after thumbnails at the bottom?

    How to change elements opacity based on if checkbox is or is not checked with CSS only?

    How to apply CSS style when ID is taken?

    How to quickly create complex web controls for web development? [closed]

    How to include a custom CSS file in TYPO3

    How to use “Wedding text ” in Css font family?