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"
                        <apex:selectOptions value="{!details}" />
                        <apex:actionSupport event="onchange" action="{!display}"
                            reRender="a1" />

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

$(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')) {
        }else {

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



Can anyone suggest how I can make this work?

  • 1
    Is this question really relevant to Salesforce? Isn't it a pure CSS question, and hence perharps better suited to Stackoverflow?
    – mkorman
    Commented Feb 29, 2016 at 15:39
  • Man it is related to salesforce...here i am facing problem in ReRendering of action support.. Commented Feb 29, 2016 at 15:56
  • apologies... I only saw the CSS at a glance because of the funky indentation
    – mkorman
    Commented Feb 29, 2016 at 16:55
  • what is op.Parent.Profile.Name supposed to be? If a controller property, it is not in proper merge field syntax
    – cropredy
    Commented Feb 29, 2016 at 16:55
  • no @crop1645 it is hardcoded value ... as of now it is nowhere related to controller !!! Commented Mar 1, 2016 at 5:11


You must log in to answer this question.

Browse other questions tagged .