Rerender jquery accordion is not working properly

Question

I am trying to reRender my accordion panel which is not working. On page load accordion works but on selection of object from object picklist it does not.

Page Code :

    <apex:page controller="testCntrl">

    <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
    <link rel="stylesheet"
        href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
    <apex:includeScript value="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js" />
    <apex:includeScript value="//code.jquery.com/jquery-1.10.2.js" />
    <apex:includeScript value="//code.jquery.com/ui/1.11.4/jquery-ui.js" />
    <apex:includeScript value="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" />
    <apex:includeScript value="//path/to/jquery.mCustomScrollbar.concat.min.js" />
    <apex:includeScript value="http://code.jquery.com/jquery-1.9.1.js" />
    <apex:includeScript value="http://code.jquery.com/ui/1.10.3/jquery-ui.js" />
    <link rel="stylesheet" href="/resources/demos/style.css" />
    <link rel="stylesheet" href="/path/to/jquery.mCustomScrollbar.css" />

    <!--To display the page in a form-->
    <apex:form id="theform">

        <apex:pageBlock id="optionListId">
            <apex:pageBlockSection title="">
                <apex:pageblocksectionitem >
                    <apex:outputLabel value="Select Object :" />
                    <apex:selectList value="{!selectedObject}" multiselect="false"
                        size="1">
                        <apex:selectOptions value="{!details}" />
                        <apex:actionSupport event="onchange" action="{!display}"
                            reRender="a1" />
                    </apex:selectList>
                </apex:pageblocksectionitem>
            </apex:pageBlockSection>
        </apex:pageBlock>


<apex:outputPanel id="a1">
        <div class="accordion">
            <div class="accordion-section">

                <a class="accordion-section-title" href="#accordion-1">op.Parent.Profile.Name</a>

                <div id="accordion-1" class="accordion-section-content">
                    <p>Mauris interdum fringilla augue vitae tincidunt.</p>
                </div><!--end .accordion-section-content-->

            </div><!--end .accordion-section-->
        </div><!--end .accordion-->
</apex:outputPanel>
    </apex:form>

    <script>
$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).attr('href');

        if($(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            $(this).addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
});
    </script>

</apex:page>

Can anyone suggest how I can make this work?