JQuery UI Accordion, how to put a button / link to header with another function

Question

I'm really getting mad about this issue and I would be glad to get a little bit help from you.

I do have a JQuery accordion which is working fine. I like to put a X in the right corner of the header which then deletes the item from the list but I'm not able to do that. The header itself is within a <h3><a> HEADER </a></h3 tag. this is opening the conent. When I put another link to the header the accordion is not shown correctly. Is there a chance to put on another link/button, and if the user clicks on it I can catch it and delete the item?

I tried another method, I put the button in a div in the content and tried to move it to the top via position: relative and -20px, but it's not shown, it's overwritten from the header, although I set the Z-INDEX to a higher value.

Sounds like a very easy thing, and maybe I missed something... but I spent so many hours on this now and searched so many sites but was not able to solve it. Any help would be appreciated.

Thanks, Marcel

Answer 1

This helps me to put UI-button into UI-accordion header without interfere of events:

$( "#accordion" ).accordion({ header: "> div > .h3" });
$( "#check" ).button();
$( "#check-label" ).click(function(event){
    event.stopPropagation(); // this is
    event.preventDefault(); // the magic
    log("clicked!");
});

<div id="accordion">
    <div>
        <div class="h3">
            <div class="right-button">
                <input type="checkbox" id="check" /><label for="check" id="check-label"></label>
            </div>
            <a href="#">First</a>
        </div>
        <div>
            <p>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</p>

        </div>
    </div>
    <div>
        <div class="h3">
            <a href="#">Second</a>
        </div>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <div class="h3">
            <a href="#">Third</a>
        </div>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>

Answer 2

An older post, but for those looking, this is what I ended up doing is creating a block inside of the h3 header. Then I added the class called toolbar to the block. Then used the jquery selector to get all the anchors inside of the blocks with the toolbar class and bind the click event of each. Inside the click event, I used the current elements href attribute to set the window.location value to force the browser to the page I wanted to navigate to. In this instance it is an edit and delete page.

<div id="accordion">
   <h3>Header 1
   <span style="float:right;" class="toolbar ui-widget-header ui-corner-all">
     <a href="/EditPage.html">Edit</a>
     <a href="/DeletePage.html">Delete</a>
   </span>
   </h3>
   <div>
    Content 1
   </div>
   <h3>Header 2
   <span style="float:right;" class="toolbar ui-widget-header ui-corner-all">
     <a href="/EditPage.html">Edit</a>
     <a href="/DeletePage.html">Delete</a>
   </span>
   </h3>
   <div>
    Content 2
   </div>
</div>

<script type="text/javascript">
 $("#accordion").accordion();

 $(".toolbar a").live("click", function() { 
  window.location($(this).attr("href")); 
 }); 
</script>

Answer 3

Just catch accordion activation and prevent it if click occurs on element which should not trigger accordion

$("#accordion").accordion({
     beforeActivate: function(event, ui) {
          var target = event.originalEvent.target;
          if (target.text == "x") {
             //do your logic
             return false;
         }
     }
});