Discover how idsign stacks
makes web designing easier

Just visit our stacks page on this site.You’ll get a brief description of what each stack can do. Click on „Stacks Manuals” - choose a stack and you’ll see a detailed manual (examples included). If a problem occurs while designing your website, please first visit our support page for the answer.

iDSIGN Xpander stack: makes webdeveloping easier

Stacks Image 13683

This Accordion effect Stack can nest a Xpander inside another one. You can also change the effect to bounce. You can even create your own style, start with a clean Xpander and add your css in the "Clean Xpander Style Block" below the Xpanders (standard you see a basic example). Visit my support page to see what i created with the "clean xpander" feature!

Stacks Image 13645
Xpanders:
Choose the amount of Xpanders you want to show.

Clean Xpander::
Enable "Clean Xpander" if you want to style the Xpanders yourself (css will be included inside the html). Example css included (look below your Xpanders in edit mode). Choose "Clean Xpander: styled in theme css" if you want to style your Xpanders inside your theme css file or inside Page info - header - css (example screenshot included inside Xpander example 3).
Available classes:
Xpander button = .xpanderButton1{}
Xpander button Hover = .over1 {}
Xpander button Active = .on1 {}
XpanderContent = .xpanderContent1 {}
(On the end from all these classes you'll see 1 - this is the "Original ID" for this Xpander)

Original ID:
Only works together with "Clean Xpander: styled in theme css". So if you add 2 inside the input field, your classes to style your Xpanders will end with a 2 ( example: .xpanderButton2{} )

Start Open XP:
1 will open your first Xpander block on page enter. 2 your second Xpander and so on...

Bounce Effect:
Initinally disabled. Click enable to add a bounce effect to your Xpanders

Open / Close Speed:
Define the speed to open or close the Xpanders (the higher your number the slower the speed)

Xpander Height:
Define the height from the Xpander buttons

Padding top:
Position the input text untill it looks ok for you

Margin Xpanders:
Define the margin between the Xpander buttons

Border Radius:
Define the radius (round corners) from the button and content blocks. (does not work on IE)

Text-indent:
Position text (from the button) from the left

Font Size:
You can increase the fontsize from all buttons with this slider.

Font weight Bold:
initially font weight = normal, but you can set it to bold in one click.

First 3 color pickers:
Set color state closed, main color and gradient color and also text color

Next 3 color pickers:
same as previous but for open state

Last 3 color pickers:
same as previous but for hover state

Content background color:
Choose a backround color for your content block

Bgr image:
You can link an image to the content block. The image is positioned to the top left side but can be repeated horizontal (Repeat-x) or horizontal and vertical (Repeat)

Scroll to Top:
Can be used if you have lot's of content inside a Xpander content block.

How to style your Xpander with css

Stacks Image 15

This screenshot shows a “Clean Xpander” edit mode. You'll notice below the Xpanders (3 title buttons an content blocks) an area where you can add "css" if you want to style your xpanders yourself. This css will be included inside the html file. If you want to style them in your theme CSS file or inside Page info - header - css, you have to sellect "Clean Xpander: styled in theme css" (example css included inside "Example Xpander" page -> example 3.
Available classes:
Xpander button = .xpanderButton1{} -----> 1 = Original ID
Xpander button Hover = .over1 {} -----> 1 = Original ID
Xpander button Active = .on1 {} -----> 1 = Original ID
XpanderContent = .xpanderContent1 {} -----> 1 = Original ID

How to trigger a Xpander

This example will show you a link that triggers the thirth xpander button. So iif you hit the link this xpander will close and the thirth will open:
OPEN THIRTH XPANDER. You can trigger a xpander by making a link and opening the RW link inspector, url = # and add a custom atribute with name: onclick and value: stacks.JQuery('#Xpander1Button2').click(); return false;
What you have to change in the script is ('#Xpander"REPLACE 1 WITH YOUR ORIGINAL XPANDER ID"Button"CHOOSE WHICH BUTTON TO TRIGGER, START COUNTING WITH 0 - SO 0=BUTTON 1, 1=BUTTON2 AND SO ON'). So in this case my Original Xpander ID was 1 and i triggered my thirth Xpander (set to 2 because counting start at 0)

Stacks Image 404
Title 1

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Title 2

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.

Title 3

Lorem ipsum dolor sit amet, sapien platea morbi dolor lacus nunc, nunc ullamcorper. Felis aliquet egestas vitae, nibh ante quis quis dolor sed mauris. Erat lectus sem ut lobortis, adipiscing ligula eleifend, sodales fringilla mattis dui nullam. Ac massa aliquet.