1

I am currently building according on the page base on the heading "h2". The accordion is working but i want to achieve that the other heading is collapse while the one that click is only expand.

The current behavior: On first load, will collapse all the heading. When you click first heading, it will expand the first heading. When you click second heading the second heading is expand but the first heading is not collapse until you click.

HTML format

<h2> Test 1 </h2> 
<p >data</p> 
<h2> Test 2 </h2> 
<p >data</p> 
<h2> Test 3 </h2> 
<p >data</p>

SCRIPT

<script language="javascript" type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="/Style%20Library/accordion.css"/>
<script language="javascript" type="text/javascript">

    $(document).ready(function () {
        var inEditMode = Utils.checkPageInEditMode();
        // Prevent the collapsing of <h2> blocks when in SharePoint's [Edit Mode]
        if (!inEditMode) {
            UI.collapseContentHeaders();
            UI.toggleContentHeaders();
        }
    });

    var UI = {
        collapseContentHeaders: function () {
            $('#DeltaPlaceHolderMain h2').each(function (index, value) {
                // Collapses all <h2> blocks except for the first encountered
                if (index > 0) {
                    $(this).toggleClass('expand').nextUntil('h2').slideToggle(100);
                }
            });
        },
        toggleContentHeaders: function () {
            // Toggles the accordion behavior for <h2> regions onClick
            $('#DeltaPlaceHolderMain h2').click(function () {
                $(this).toggleClass('expand').nextUntil('h2').slideToggle(100);
            });
        }
    }

    var Utils = {
        checkPageInEditMode: function () {
            var pageEditMode = null;
            var wikiPageEditMode = null;

            // Edit check for Wiki Pages
            if (document.forms[MSOWebPartPageFormName]._wikiPageMode) {
                wikiPageEditMode = document.forms[MSOWebPartPageFormName]._wikiPageMode.value;
            }
            // Edit check for all other pages
            if (document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode) {
                pageEditMode = document.forms[MSOWebPartPageFormName].MSOLayout_InDesignMode.value;
            }
            // Return the either/or if one of the page types is flagged as in Edit Mode
            if (!pageEditMode && !wikiPageEditMode) {
                return false;
            }
            return pageEditMode == "1" || wikiPageEditMode == "Edit";
        }
    }
</script> 
  • Considering your already using Jquery i suggest you look up jquery-UI. It has a great accordion feature. – Roland Dec 8 '16 at 22:38
1

Check jQuery-UI (per Roland's comment). Using the collapsible switch, this would be for you:

$( function() {
    $( "#DeltaPlaceHolderMain" ).accordion({
        collapsible: true
    });
});

UI is a great library; it works wonders on my SP 2010 site.

0

Try the following changes in the toggleContentHeaders function.

toggleContentHeaders: function () {
        // Toggles the accordion behavior for <h2> regions onClick
        $('#DeltaPlaceHolderMain h2').click(function () {
            $('#DeltaPlaceHolderMain h2').removeClass('expand');
            $(this).addClass('expand').nextUntil('h2').slideToggle(100);
        });
    }
  • tried but first heading not collapse when when heading 2 clicked. Unless heading 1 click which is what is the original behaviour.thanks – Supermode Dec 8 '16 at 22:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.