title: jQuery Accordion header with jQuery UI icon button (hide/show + hover/click)
body: <p>What i need: a jQuery UI framework button like the one that can be found here: <a href="http://jqueryui.com/themeroller/" rel="noreferrer">http://jqueryui.com/themeroller/</a> (look at Framework Icons) in a jQuery accordion header.</p>
  
  <p>Live Sample: <a href="http://www.nikollr3.three.axc.nl/" rel="noreferrer">http://www.nikollr3.three.axc.nl/</a></p>
  
  <p>(From what i understood; a button can also be mimicked by an Achor tag with the right jQuery UI class.)</p>
  
  <p>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.<strong>This currently NOT implemented; how to do this?</strong></p>
  
  <p>-> If the button is clicked, i want statProp to be displayed, i have a function showStatProp() for this.</p>
  
  <p>Issues i am having currently:
  <strong>Hover over 'button' is not doing anything</strong>, 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).</p>
  
  <p>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.</p>
  
  <pre><code>function showStatProp()
              {
                  if(document.getElementById("statProp").style.display == "none")
                  {
                      document.getElementById("statProp").style.display = 'block';
                  }
                  else
                  {
                      document.getElementById("statProp").style.display = 'none';
                  }
              }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body onkeydown="controlCheck(event)" onkeyup="clearPress()" &gt;
          &lt;div id="application" style="position:absolute"&gt;
              &lt;div id="accordion"&gt;
                   &lt;h3 id="clickStat"&gt;Stations
                   &lt;span style="float:right;" class="ui-state-default ui-corner-all"&gt;
                  &lt;a class="ui-icon ui-icon-plusthick btpad" href="/getPunten.php"&gt;Edit&lt;/a&gt;
                  &lt;/span&gt;&lt;/h3&gt;
                   &lt;div id="stations"&gt;
                      &lt;input type="text" id="stations_ac" onclick="this.value='';" /&gt;
                       &lt;div id="selectedStationDiv"&gt;
                       &lt;/div&gt;
                      &lt;hr&gt;
                          &lt;div id="statProp" style="display:none;"&gt;
                      &lt;p&gt;Name: &lt;input type="text" style="float:right; clear:right" size="19" id="statNam" onclick="this.value='';" /&gt;&lt;/p&gt;
                      &lt;p style="margin-top:15px"&gt;
                      Type:
                      &lt;select id ="statTyp" style ="float:right" onchange=""&gt;
                      &lt;option&gt;&lt;/option&gt;
                      &lt;option title="Test"&gt;T&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;/p&gt;    
                      &lt;p style="margin-top:15px"&gt;
                      Admtyp:
                      &lt;select id ="admtyp" style ="float:right" onchange="FilterByToestanden()"&gt;
                      &lt;option&gt;&lt;/option&gt;
                      &lt;option title="Alarm"&gt;A&lt;/option&gt;
                      &lt;option title="Alarm"&gt;D&lt;/option&gt;
                      &lt;option title="Urgent alarm"&gt;U&lt;/option&gt;
                      &lt;/select&gt;
                      &lt;/p&gt;
                      &lt;p&gt;Image: &lt;input type="text" id="statBildnam" size="12" style ="float:right;text-transform: uppercase"&gt;&lt;/p&gt;
  
                      &lt;p id="devText"&gt;Text:
                      &lt;input type="text" style="float:right; clear:right" id="texts_ac" onclick="this.value='';" /&gt;&lt;/p&gt;
                      &lt;p&gt;
                      &lt;p id ="respLine"&gt;Responsible: &lt;select id="statResp" style="margin-bottom:10px;margin-top:6px;"&gt;&lt;option&gt;WERKHUIS-EMG-WEVELGEM&lt;/option&gt;&lt;/select&gt;&lt;/p&gt;
                      &lt;button id="btnCrtStat" onClick="createStation()" type="button" style="margin-left:26px;margin-top:-3px"&gt;Create&lt;/button&gt;
                          &lt;/div&gt;
  
                  &lt;/div&gt;                                          
  
                  &lt;h3 id="clickImages" onclick="listImages()"&gt;Images&lt;/h3&gt;
                  &lt;div id="imagesList" style="overflow:auto"&gt;
  
                      &lt;ul id='imagesUL'&gt;&lt;/ul&gt;
                  &lt;button onClick="addImage()" type="button" style="margin-left:26px;margin-top:-3px"&gt;Add image&lt;/button&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/rWgQB.png" alt="enter image description here"></p>