Jquery Accordion : set action to a specific element inside header

Question

by default, if we have something like this as a Header in jQuery Accordion :

<h3>
    <div class="1">TEXT</div>
    <div class="2">ICON</div>
    <div class="3">BUTTON</div>
</h3>

by clicking anywhere on this , accordion works and toggle the next element and ...

the question is , how can we set an option and select a specific element ( like: 'div' with class '1' ) to click on it to and toggle the accordion.

i mean i don't want the whole Header remain click able. i just want to click on a icon or div o something inside the header and toggle open/close the accordion.

thank you

Update 1 :

HTML :

<div id="testAcc">

    <h3>
        <div class="one">Text</div>
        <div class="two">Icon</div>
        <div class="three">Button</div>
    </h3>
    <div class="accBody">
        text text text text text text text text text text 
    </div>

    <h3>
        <div class="one">Text</div>
        <div class="two">Icon</div>
        <div class="three">Button</div>
    </h3>
    <div class="accBody">
        text text text text text text text text text text 
    </div>

</div>

JS :

$('#testAcc').accordion({
        autoHeight: false,
        header: 'h3',
        collapsible: 'ture',
});

this codes working fine. but i want to use something like ( header: 'h3>.one' ) means i want to set a specific class and element inside the header , then if user click ONLY on that element, the accordion will open or close ...

Answer 1

You can return false with a click handler on the elements you don't want to have the accordion toggling effect, like this:

$('#testAcc').accordion({
  autoHeight: false,
  header: 'h3',
  collapsible: true
});
$("#testAcc .two, #testAcc .three").click(function() {
  return false;
});
​

You can see a working demo here