views:

317

answers:

1

I added delete and edit link to the accordion header, yet those links are not working since every time i click on them the accordion open. And advice on how can I do it? Note that I'm doing nested accordion. this is how i defined it on js:

$("#acc2").accordion({  alwaysOpen: false,active: false,autoheight: false,
   header: 'h3.ui-accordion2-header',clearStyle: true,
    event: 'click' });

and on html I have it like this:

<div class="ui-accordion2-group">
  <h3 class="ui-accordion2-header">
  <table border=0 width=100% class= 'DarkGray12'  >
    <tr>
      <td>
      <a href="javascript:toggel_new_activity('1');">Section Title</a>
      </td>
      <td align='right'>
        <table border=0>
          <tr>
            <td>
              <a href="javascript:toggel_new_activity('1');">New Activity</a>
            </td>
            <td>
              <a href='#'>Edit</a>
            </td>
            <td>
              <a href='#'>Delete</a>
            </td>
          </tr>
        </table>
      </td>
    </tr>
  </table>
  </h3>
</div>
+2  A: 

First thing, get rid of those tables in the h3's. Use divs with css:

<style>
.ui-accordion2-header .tools{
    position: absolute;
    right: 10px;
    top: 10px;
    width: 345px;
}
.ui-accordion2-header .tools a {
    width: auto;
    display: inline;
}
</style>
<div id="accordion" class="ui-accordion2-group">
    <h3 class="ui-accordion2-header" data-sectionid="1">
        <a href="#">Section Title</a>
        <div class="tools">
      <a href="#" class="newactivity">New Activity</a>
      <a href="#" class="edit">Edit</a>
      <a href="#" class="delete">Delete</a>
        </div>
    </h3>
    <div>
     <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.</p>
    </div>    
</div>

Second, No need to add events inline do it up at the top:

<script type="text/javascript">
$(function() {
$("#accordion").accordion({
    alwaysOpen: false,
    active: false,
    autoheight: false,
    clearStyle: true
}).find('.tools a').click(function(ev){
    ev.preventDefault();
    ev.stopPropagation();
    var $obj = $(this);
    var sectionid = $obj.closest('h3').attr('data-sectionid');
    if ($obj.hasClass('newactivity')){
     toggel_new_activity(sectionid);
    } else if ($obj.hasClass('edit')){
     edit(sectionid);
    } else if ($obj.hasClass('delete')){
     delete(sectionid);
    }
});
});
</script>

ev.preventDefault() prevents the normal things that happen when you click an "a" tag from happening. ev.stopPropaggation() prevents the click event from getting to the according and toggling the status of the section

The rest just figures out the id for the current section and makes the correct function call based on what link was clicked.

PetersenDidIt
I tried this and it worked. Now if I want for "New Section" to open the accordion in case it was closed only what shall i do? IE how can I check if the accordion is opened or closed?
zeina
I guess I found out how: I added this line: $("div.ui-accordion2-content").show();
zeina