1. First I added the Summary link web part in my page and added grouping
of those links. See in fig
2. Now enable the all group as an Accordion I simply added Script
Editor Web part to this page. See in fig
3. Now I am going to making this web part into a fully functional
accordion for this I added a simple JQuery script the performs hide all
hyperlinks in this groups and when a user clicks a group header, hide all
sections that is not the current header and expand current selected link
selection. So add the following code
<style type="text/css">
.groupheader{
background-color: #0072C6;
color: white;
font-family: "Segoe
UI", Tahoma, Geneva, Verdana, sans-serif;
font-size: 140%;
padding: 0.5em;
padding-left: 0.75em;
margin-right: 0.5em;
margin-bottom: 1px;
}
.groupmarker:hover .groupheader{
cursor: pointer;
background-color: #0597FF;
}
.dfwp-list{
background-color: #181009;
margin-bottom: 0.5em;
margin-right: 0.75em;
margin-left: 0.75em;
margin-bottom: 1px;
}
.dfwp-list .item:hover{
background-color: #db9356;
}
.dfwp-list .link-item a{
margin-left: 2em;
color: white;
}
</style>
<script type="text/javascript"
src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript"
src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<script>
$(document).ready(function(){
// Detect if user view
or edit the page
if($("#MSOSPWebPartManager_DisplayModeName").val()
== "Browse"){
// Register
accordion
accordion();
}
})
var accordion = function(){
/* Do fancy easing */
$.easing.def =
"easeOutBounce";
/* Slide up all link
items and hide them */
/*$(".dfwp-list").slideUp("fast");*/
$(".dfwp-list").not(":first").slideUp("fast")
/* Binding a click
event handler to the links: */
$('.groupheader').click(function(e){
/* Finding
the drop down list that corresponds to the current section: */
var
dropDown = $(this).next(".dfwp-list");
/* Closing
all other drop down sections, except the current one */
$('.dfwp-list').not(dropDown).slideUp('slow');
dropDown.slideToggle('fast');
})
}
</script>
4. Whole code
added here. See in fig
5. Now you able
to see your web part work as an Accordion. See in figs and compare with first
fig you able to see the changes.
