Hi,
you can download for example script from:
Stupid simple jQuery accordion menuThe downloaded package will contain jQuery file and css classes which you will net to link in the repeater with effect web part.
The script works with $(), which you need to replace with jQuery(). The result is here:
/***********************************************************************************************************************
DOCUMENT: includes/javascript.js
DEVELOPED BY: Ryan Stemkoski
COMPANY: Zipline Interactive
EMAIL: ryan@gozipline.com
PHONE: 509-321-2849
DATE: 3/26/2009
UPDATED: 3/25/2010
DESCRIPTION: This is the JavaScript required to create the accordion style menu. Requires jQuery library
NOTE: Because of a bug in jQuery with IE8 we had to add an IE stylesheet hack to get the system to work in all browsers. I hate hacks but had no choice :(.
************************************************************************************************************************/
jQuery(document).ready(function() {
//ACCORDION BUTTON ACTION (ON CLICK DO THE FOLLOWING)
jQuery('.accordionButton').click(function() {
//REMOVE THE ON CLASS FROM ALL BUTTONS
jQuery('.accordionButton').removeClass('on');
//NO MATTER WHAT WE CLOSE ALL OPEN SLIDES
jQuery('.accordionContent').slideUp('normal');
//IF THE NEXT SLIDE WASN'T OPEN THEN OPEN IT
if(jQuery(this).next().is(':hidden') == true) {
//ADD THE ON CLASS TO THE BUTTON
jQuery(this).addClass('on');
//OPEN THE SLIDE
jQuery(this).next().slideDown('normal');
}
});
/*** REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
//ADDS THE .OVER CLASS FROM THE STYLESHEET ON MOUSEOVER
jQuery('.accordionButton').mouseover(function() {
jQuery(this).addClass('over');
//ON MOUSEOUT REMOVE THE OVER CLASS
}).mouseout(function() {
jQuery(this).removeClass('over');
});
/*** END REMOVE IF MOUSEOVER IS NOT REQUIRED ***/
/********************************************************************************************************************
CLOSES ALL S ON PAGE LOAD
********************************************************************************************************************/
jQuery('.accordionContent').hide();
});
Now you only need to define transformation and content before after to match requested css classes. Example of transformation:
<div class="accordionButton"><%# Eval("ArticleName",true) %></div>
<div class="accordionContent"><%# Eval("ArticleText") %></div>
The package contains example page, so you can find inspiration in its code.
Best regards,
Ivana Tomanickova