Hi all,

I have a VF page using SLDS markup (I am in LEX) and I would like to implement expandable/collapsible sections in my form.

This is a code for one of my section with SLDS Expandable section https://www.lightningdesignsystem.com/components/expandable-section/

<div class="slds-form slds-form_compound">
                <fieldset class="slds-box slds-theme--default slds-container--medium slds-align_absolute-center"> 
                    <div class="slds-section">
                        <h3 class="slds-section__title">
                            <button class="slds-button slds-section__title-action" aria-controls="content" aria-expanded="false">
                                <svg aria-hidden="true" class="slds-section__title-action-icon slds-button__icon slds-button__icon--left" aria-hidden="true">
                                    <use xmlns:xlink="http://www.w3.org/1999/xlink" 
                                         xlink:href="/apexpages/slds/latest/assets/icons/utility-sprite/svg/symbols.svg#switch"></use>
                                </svg>XXXX</button>
                        </h3>
                        <div class="slds-section__content" id="content" aria-hidden="true" >
                            <div class="slds-form-element">
                                <label class="slds-form-element__label" >ABC</label>
                                <div class="slds-form-element__control">
                                    <apex:inputfield value="{!FF.ABC}" styleClass="slds-input"/>
                                </div>
                            </div>                 
                            <div class="slds-form-element">
                                <label class="slds-form-element__label" ">XYZ</label>
                                <div class="slds-form-element__control">
                                    <apex:inputfield value="{!FF.XYZ}" styleClass="slds-input"/>
                                </div>
                            </div> 
....
</fieldset>
            </div>

I have tried to implement this solution with jquery: http://www.minerva18.com/blog/creating-expandablecollapsible-lightning-design-sections-in-salesforce/#comment-1763 but the section open only for a few second and close again and the screen jump to the top of the page (I am using Chrome). 

I have also tried other solutions such as

<script type="text/javascript">
    function toggle_visibility() {
   var e = document.getElementById('content'); 
          if(e.style.display == 'none')
          e.style.display = 'block';
       else
          e.style.display = 'none';
    }
</script>

adding onclick="toggle_visibility();" on the button

or

function showContent() {
   {
        document.getElementById('content').style.visibility="visible";
    }
    else
    {
        document.getElementById('content').style.visibility="hidden";
    }
}

or

$(function () { 
    $('content').on('click', function (e) {
        var menuItem = $( e.currentTarget );

        if (menuItem.attr( 'aria-expanded') === 'true') {
            $(this).attr( 'aria-expanded', 'false');
            $(this).attr( 'aria-hidden', 'true')
        } else {
            $(this).attr( 'aria-expanded', 'true');
            $(this).attr( 'aria-hidden', 'false')
        }
    });
});

using jquery: <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

But nothing is working.
Any help will be greatly appreciated!
Sylvie