Summary of process:
- Add reference to appropriate script.aculo.us libraries in your master page
- Edit or add new group style for summary link web part to call the appropriate script function
However, in my example I also needed a function which would do some work for me to expand and collapse the headings (groups), so in reality my EditModePanel looked like this:
What you will notice is that the DIV with the display set to none is not in any of the default Group styles for the Summary Link web part, and of course the DIV element above that which has the class of slideheader. These were added by creating a new Group style in header.xsl. Note: this article is not supposed to be the end-end guide on editing and adding new styles for summary link web part and content query web part, so you will need to research this yourself if what I am talking about doesn’t make sense. Heather Solomon has some great information on her blog about this)
Here is my template section for my new group called Slider for header.xsl. This adds the display none and slideheader class DIVS.
Of course we also need the closing DIV for the one just opened here, for this I edited contentquerymain.xsl and added a closing DIV if the Slide template was used for the web part, this is done in the CallFooterTemplate template. E.g.
That is it. All I need to do now is add my Summary Links web part and change the group style to Slider. What is great about this is that it doesn’t matter what styles are used for the items inside the Summary Links web part the sliding function will work for the group.
I hope you have managed to follow the steps in this article to get your script.aculo.us functions working. Good luck.