Creating Accordion menu in SharePoint 2013

Question

I am new to SharePoint. As per a requirement from a client, I need to develop a teamsite in SharePoint. Some of the pages would need to display the content in an accordion menu as shown in the screenshot below. Screenshot

This is available on Microsoft's SharePoint help. Below is the link for the same. I believe they would also be using SharePoint for this support site. Can anyone share their experience with this type of page? Is it possible with SharePoint features only or do we need to create custom HTML page? Some examples would be really appreciated. Thanks in advance.

https://support.office.com/en-us/article/SharePoint-Online-help-83c1c11b-3d7c-4852-b597-46309e0892b3?ui=en-US&rs=en-US&ad=US

Answer 1

Build it custom using the SharePoint API as your datasource. Anything that isn't purely out-of-the-box should be made from scratch. It's like trying to fit a square peg in a round hole. You whittle away at the corners of the square peg but it'll never quite fit in the round hole exactly.

The code below is located here.

You'll probably need to wait for all of SharePoint to be loaded, there are built-in functions that help you like this one

Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(YOURINITFUNCTIONHERE);

Goodluck!

	
$(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();
    });
    
});

/*----- Accordion -----*/
.accordion, .accordion * {
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
}
 
.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:3px;
    background:#f7f7f7;
}
 
/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding:15px;
    display:inline-block;
    border-bottom:1px solid #1a1a1a;
    background:#333;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.200em;
    text-shadow:0px 1px 0px #1a1a1a;
    color:#fff;
}
 
.accordion-section-title.active, .accordion-section-title:hover {
    background:#4c4c4c;
    /* Type */
    text-decoration:none;
}
 
.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}
 
/*----- Section Content -----*/
.accordion-section-content {
    padding:15px;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accordion">
    <div class="accordion-section">
        <a class="accordion-section-title" href="#accordion-1">Accordion Section #1</a>
         
        <div id="accordion-1" class="accordion-section-content">
            <p>Mauris interdum fringilla augue vitae tincidunt. Curabitur vitae tortor id eros euismod ultrices. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent nulla mi, rutrum ut feugiat at, vestibulum ut neque? Cras tincidunt enim vel aliquet facilisis. Duis congue ullamcorper vehicula. Proin nunc lacus, semper sit amet elit sit amet, aliquet pulvinar erat. Nunc pretium quis sapien eu rhoncus. Suspendisse ornare gravida mi, et placerat tellus tempor vitae.</p>
        </div><!--end .accordion-section-content-->
    </div><!--end .accordion-section-->
</div><!--end .accordion-->