CODEWITHSUNDEEP
jquerytwitter-bootstrapaccordion
Deepak Biswal
Deepak Biswal

Reputation: 4320

jQuery accordion exclude expand/collapse event for a inner header element.

HTML

<div id="accordion">
    <h3>
        <span>Unit 1</span>
        <i class="fi-pencil editWorkUnit" title="Edit work unit" unit="1"></i>
    </h3>
    <div>Unit 1 Details</div>
    <h3>
        <span>Unit 2</span>
        <i class="fi-pencil editWorkUnit" title="Edit work unit" unit="2"></i>
    </h3>
    <div>Unit 2 Details</div>
    <h3>
        <span>Unit 3</span>
        <i class="fi-pencil editWorkUnit" title="Edit work unit" unit="3"></i>
    </h3>
    <div>Unit 3 Details</div>
</div>

JavaScript

$(function() {
    $( "#accordion" ).accordion({
       heightStyle: "content",
       collapsible: true
    });
});

This is working fine. When you click on accordion header it will expand/collapse their contents. If you see the HTML markup I have an edit icon inside each header <h3> tag. What I want is when user clicks on the icon I don't want to expand/collapse the accordion.

How to exclude the click event on that element inside a header.

Upvotes: 0

Views: 507

Answers (2)

Rashmi T
Rashmi T

Reputation: 1

I have just updated the fiddle for you here

you just have to add :

 $( ".editWorkUnit" ).on( "click",function(e) {
      .stopPropagation();
  });

Upvotes: 0

Andrei Todorut
Andrei Todorut

Reputation: 4526

You need to stop propagation on click for element .editWorkUnit

Check this code:

$('.editWorkUnit').click(function(e){
     e.stopPropagation();
})
.... your code

And codepen http://codepen.io/todorutandrei/pen/XKrZYG

Upvotes: 2

Related Questions