jQuery UI - sortable accordion not working

Question

I made a nested sort-able accordion, but there's something not working. In id 'accordian2', the heights of each item are too small, and a vertical scroll bar is showing. The value of the item which is '1' is getting clipped so only half of it shows.

Can someone please tell me what the problem is in my code?

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
        <title>jQuery UI Example Page</title>
        <link type="text/css" href="css/custom-theme/jquery-ui-1.8.23.custom.css" rel="stylesheet" />
        <script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
        <script type="text/javascript" src="js/jquery-ui-1.8.23.custom.min.js"></script>

    </head>
    <body>

    <script>
    $(function() {
        function create_accordian(str) {
            $( str )
                .accordion({
                    header: '> div > h3'
                })
                .sortable({
                    axis: 'y',
                    handle: 'h3',
                    stop: function( event, ui ) {
                        // IE doesn't register the blur when sorting
                        // so trigger focusout handlers to remove .ui-state-focus
                        ui.item.children( 'h3' ).triggerHandler( 'focusout' );
                    }
                });
        }
        create_accordian('#accordion');
        create_accordian('#accordion1');
        create_accordian('#accordion2');
        //create_accordian('#accordion3');
    });
    </script>

        <style type='text/css'>
            /*demo page css*/
            #accordion { font: 62.5% 'Trebuchet MS', sans-serif; margin: 10px;}
        </style>


            <div id='accordion'>
                <div class='group'>
                    <h3>
                        <a href='#'>1. blah</a>
                    </h3>
                    <div>



                        <div id='accordion1'>
                            <div class='group'>
                                <h3>
                                    <a href='#'>blah</a>
                                </h3>
                                <div>
                                    <a href='#'>
                                        Edit Item
                                    </a>
                                    <br/>
                                    <span style='display:none;'>
                                        4900bc3b-a086-4d0c-89b8-09e3724aac8e
                                    </span>
                                </div>
                            </div>
                            <div class='group'>
                                <h3>
                                    <a href='#'>blah</a>
                                </h3>
                                <div>
                                    <a href='#'>
                                        Edit Item
                                    </a>
                                    <br/>
                                    <span style='display:none;'>
                                        0d59f87e-a294-4f85-beae-a0e266ab6a7e
                                    </span>
                                </div>
                            </div>
                        </div>



                    </div>
                </div>
                <div class='group'>
                    <h3>
                        <a href='#'>2. blah</a>
                    </h3>
                    <div>


                        <div id='accordion2'>
                            <div class='group'>
                                <h3>
                                    <a href='#'>blah</a>
                                </h3>
                                <div>
                                    1
                                </div>
                            </div>
                            <div class='group'>
                                <h3>
                                    <a href='#'>blah</a>
                                </h3>
                                <div>
                                    1
                                </div>
                            </div>
                            <div class='group'>
                                <h3>
                                    <a href='#'>blah</a>
                                </h3>
                                <div>
                                    1
                                </div>
                            </div>
                        </div>


                    </div>
                </div>

            </div>

    </body>
</html>

Answer 1

@omega, set autoHeight option to false in your accordion script. eg.

function create_accordian(str) {
        $( str )
            .accordion({
                header: '> div > h3',
                autoHeight: false  // set this to false
            })
            .sortable({
                axis: 'y',
                handle: 'h3',
                stop: function( event, ui ) {
                    // IE doesn't register the blur when sorting
                    // so trigger focusout handlers to remove .ui-state-focus
                    ui.item.children( 'h3' ).triggerHandler( 'focusout' );
                }
            });
}

DEMO

jQuery UI - sortable accordion not working

Question

1 answers

solution1
4 ACCPTED 2012-08-21 16:53:08

jQuery UI - sortable accordion not working

Question

1 answers

solution1 4 ACCPTED 2012-08-21 16:53:08

solution1
4 ACCPTED 2012-08-21 16:53:08