red-X red-X - 6 months ago 77
Javascript Question

radio button in head of jquery ui accordion causes it to not react

I have a pretty simple jQuery accordion with radio buttons inside each header.

See this JSFiddle

When i select a radio button it should get checked and the accordion should open on that location. Weird problem is that the accordion opens but the radio doesn't get checked.

To me this looks like a bug in jQuery-ui, any help would be appreciated.

<div class="accordion">
<h3>
test1
<input type="radio" checked="checked" name="radio" />
</h3>
<div>
content<br />
content<br />
content<br />
content<br />
</div>
<h3>
test2
<input type="radio" name="radio" />
</h3>
<div>
content<br />
content<br />
content<br />
content<br />
</div>
<h3>
test3
<input type="radio" name="radio" />
</h3>
<div>
content<br />
content<br />
content<br />
content<br />
</div>
</div>


js:

$(".accordion").accordion()


As you can see its about as simple as it can get...

Answer

Whatever event you use (the default is "click") will have .preventDefault() called on it, so you may just want to change to a similar event, like this:

$(".accordion").accordion({ event: "mouseup" });

You cant test it here.