Jquery Accordion : set action to a specific element inside header

Posted by J.Tay on Stack Overflow See other posts from Stack Overflow or by J.Tay
Published on 2010-05-17T16:52:39Z Indexed on 2010/05/17 17:20 UTC
Read the original article Hit count: 272

Filed under:
|
|
|

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 ...

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about accordion