Home/ Questions/Q 8410985
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T00:19:21+00:00

I made a nested sort-able accordion, but there’s something not working. In id ‘accordian2’,

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    @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

    • 0