Slide content down when expanding collapsible

Question

I have a collapsible that will be dynamically populated. When I expand the collapsible, it overlaps my flot chart.

Is there a way to slide the chart div down when the collapsible has been expanded? likewise when it's collapsed again(slide up)?

This is currently my setup:

<div id="main" data-role="page">
        <div id="header" data-role="header">
            <h1>Real Time Monitoring</h1>
        </div>

        <div id="parameters" data-role="collapsible" style="position: relative;width: auto; height: 100px;">
            <h3>Parameters</h3>
                <div id="divSensors" class="ui-grid-a">
                    <!-- dynamically generate checkboxes based on available sensors (c#) -->
                </div>
        </div>

        <!-- Div for flot graph -->
        <div id="chart-container" style="position: relative;">
            <!-- <label>LX Accel(g)</label> -->
            <div id="placeholder" style="width: 500px; height: 200px;"></div>
            <label">Time</label>
        </div>


        <!-- Footer -->
        <div id="footer" data-role="footer" data-position="fixed">
            <h3>&copy;&nbsp;Test Test</h3>
        </div>

    </div>

Answer 1

Just remove position: relative from the collapsible and chart container, and also remove height: 100px; from the chart container.