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';
                }
                else
                {
                    document.getElementById("statProp").style.display = 'none';
                }
            }

HTML:

<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>
                </span></h3>
                 <div id="stations">
                    <input type="text" id="stations_ac" onclick="this.value='';" />
                     <div id="selectedStationDiv">
                     </div>
                    <hr>
                        <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">
                    Type:
                    <select id ="statTyp" style ="float:right" onchange="">
                    <option></option>
                    <option title="Test">T</option>
                    </select>
                    </p>    
                    <p style="margin-top:15px">
                    Admtyp:
                    <select id ="admtyp" style ="float:right" onchange="FilterByToestanden()">
                    <option></option>
                    <option title="Alarm">A</option>
                    <option title="Alarm">D</option>
                    <option title="Urgent alarm">U</option>
                    </select>
                    </p>
                    <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>
                    <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>
                        </div>

                </div>                                          

                <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>
                </div>

enter image description here



Solution :

I guess you want something like this:

http://jsfiddle.net/mali303/gxemn34h/

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() {
        $(this).addClass('ui-state-hover');
    },
    function() {
        $(this).removeClass('ui-state-hover');
    }
);

To make the button clickable, use something like this:

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

Edit:

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 set readonly property of textbox from css

    How to access dynamic controls having same properties in the Javascript

    How can I change the CSS values of multiple elements when my sticky menu becomes fixed?

    How can I align a button at the bottom of a div?

    how to remove small space that only appear in iphone browser

    Using jqTransform on hidden contact form, select box value not showing

    How to set columns 100% height within body using css

    How to dim an image keeping transparency untouched with CSS or JS?

    How do I use CSS to add a non-rectangular border around an image?

    how to load multiple lazy css load file

    how to set up responsive columns with pure CSS?

    How to change default value in counter-increment?

    css: how to remove pseudo elements (after, before, …)

    How to switch css based table column with nested content using jquery?

    How to center menu css

    How can I split this image into pieces so when I write a long text, it doesn't go outside of the div?

    How can I make the menu to wrap when I resize my browser?

    css - jquery - how to remove wrapper div element?

    How can i fit my webPage in browser when user makes browser window big?

    How to add a second slideshow on the same webpage

    specifiy UL properties for nested class (sociallinks) but still it is working as a property of parent class (header) how can i solve it?

    How to apply CSS page-break to print a table with lots of rows?

    How to position
    element absolute from browser window?

    How to load css and js

    Z-index problem with ie7 … working in firefox. Images showing behind other img's

    How to control number of items per row using media queries in Flexbox?

    How to give style to iframed page content using parent pages css?

    How to indent items of a sublist using css and html in wordpress

    Android Layout, how to make a radius and border like css

    CSS Sprites - How to leave Hover button in depressed state