Portal Engine Questions on portal engine and web parts.
Version 6.x > Portal Engine > Accordion within an article View modes: 
User avatar
Member
Member
alexo - 4/25/2012 6:20:26 AM
   
Accordion within an article
Hi again,

i have a second question:

does anyone know how to simply add an accordion "effect" within in an article (e.g. for headers):


header1 (accordion effect 'onClick' which diplays the full text)
header2
header3

thx for your help guys,

regards alex

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 4/26/2012 3:43:28 AM
   
RE:Accordion within an article
Hi,

you may use a repeater with effect web part. It has an Effect settings section which you can use to include accordion script.

Best regards,
Ivana Tomanickova

User avatar
Member
Member
alexo - 4/26/2012 4:55:01 AM
   
RE:Accordion within an article
hi ivana,

thx for your hint.

what i still can't figure out is, how can i achieve this within an article.

i have an article with header, an image, an intro text and headlines followed by some description. now i want to put an accordion effect only on those headlines - is it also possible with the repeater webpart?

thx for your patience

reg. alex

User avatar
Kentico Developer
Kentico Developer
kentico_ivanat - 4/30/2012 3:07:43 AM
   
RE:Accordion within an article
Hi,

you can download for example script from:
Stupid simple jQuery accordion menu

The 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

User avatar
Member
Member
alexo - 5/3/2012 7:26:05 AM
   
RE:Accordion within an article
very nice...

thank you very much ivana!

best regards,

alex