Accordion within a Dialog and Showing/Hiding Accordion Panels

Accordion within a Dialog and Showing/Hiding Accordion Panels

I am unable to get an accordion to function properly within a dialog.  Below is the closest I can get it to working.  It renders well in IE but in Firefox, the accordion scrolls unnecessarily. 

Furthermore, my desire is to hide and show panels based on the link clicked, but the accordian does not respond well to that.  Is that even possible?  If there is any example code available, I have been unable to find it.

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    <head>
    <title>jQuery UI Test</title>
    <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            function showDialog(title) {
                $("#dialog").dialog("open");
                $("#dialog").dialog("option", "title", title);
            }

            // init jQuery UI elements
            $(document).ready(
                function() {
                    $("#accordian").accordion({ fillSpace: true });
                    //$("#accordian").accordion();
                    $("#dialog").dialog({
                        autoOpen: false,
                        height: 600,
                        width: 800,
                        modal: true,
                        draggable: false,
                        resizable: false
                    });

                });
       </script>
    </head>
    <body>

        <div>
            <a href="#" onclick="showDialog('Dialog Title');">Show Dialog</a>
        </div>
       
        <div id="dialog" title="" style="display:none;">
            <div id="accordian">
                <h3 id="h3Type"><a href="#">Type</a></h3>
                <p id="paneType">
                    Type Type Type Type Type Type Type Type Type Type
                    Type Type Type Type Type Type Type Type Type Type
                </p>
               
                <h3 id="h3Size"><a href="#">Size</a></h3>
                <p id="paneSize">
                    Size Size Size Size Size Size Size Size Size Size
                    Size Size Size Size Size Size Size Size Size Size
                </p>
               
                <h3 id="h3Fitting1"><a href="#">Fitting 1</a></h3>
                <p id="paneFitting1">
                    Size Size Size Size Size Size Size Size Size Size
                    Size Size Size Size Size Size Size Size Size Size
                </p>
                <h3 id="h3FittingSize1"><a href="#">Fitting 1 Size</a></h3>
                <p id="paneFittingSize1">
                    Size Size Size Size Size Size Size Size Size Size
                    Size Size Size Size Size Size Size Size Size Size
                </p>
               
                <h3 id="h3Fitting2"><a href="#">Fitting 2</a></h3>
                <p id="paneFitting2">
                    Size Size Size Size Size Size Size Size Size Size
                    Size Size Size Size Size Size Size Size Size Size
                </p>
                <h3 id="h3FittingSize2"><a href="#">Fitting 2 Size</a></h3>
                <p id="paneFittingSize2">
                    Size Size Size Size Size Size Size Size Size Size
                    Size Size Size Size Size Size Size Size Size Size
                </p>
            </div>
        </div>

    </body>
    </html>