Jquery Accordion : set action to a specific element inside header
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>
&开发者_如何学Pythonlt;/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 ...
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
精彩评论