radio button in header of accordion

radio button in header of accordion

Hi,
 
In my accordion I have inserted a radio button. I would like to be able to click on the radio button et expand or collapse. This is my code or see attach. It does not work properly.
 
Please help.
 
Thx
Joe
 

  1. <

    html>

    <

    head>

    <title>jQuery UI Accordion - Collapse content</title>

    <link type="text/css" href="css/jquery.ui.all.css" rel="stylesheet" />

    <script type="text/javascript" src="javascripts/jquery-1.4.2.js"></script>

    <script type="text/javascript" src="javascripts/jquery.ui.core.js"></script>

    <script type="text/javascript" src="javascripts/jquery.ui.widget.js"></script>

    <script type="text/javascript" src="javascripts/jquery.ui.accordion.js"></script>

    <script type="text/javascript">

    $(

    function() {

    $(

    "#accordion").accordion({

    collapsible:

    false

    });

    $(

    "#accordion h3 input").click(function(evt) {

    evt.stopPropagation();

    });

    });

    </script>

    </

    head>

    <

    body>

    <

    div id="accordion">

    <h3><a href="#"><input type=radio name=sel /> Section 1</a></h3>

    <div>

    <p>test 1</p>

    </div>

    <h3><a href="#"><input type=radio name=sel />Section 2</a></h3>

    <div>

    <p>test 2</p>

    </div>

    </

    div>

    </

    body>

    </

    html>