page39_1
For this tabbed interface I wanted a small dark font so chose both the size and color and also enabled the "Text CSS Tag." I set the tag name to "DIV" which will use a generic DIV for the title tag. This will produce generic looking text for the titles. I also set up a blue border but only enabled it on one edge. This allows the selected tab to "stand out" since the border color I choose is just white.
For the background I chose a faint blue and a the same darker color That I used as the highlight in the border. This let's the two border blend together.
page39_2
For the structure I started with a rather small basic size. To keep the tabs together I set the Margin to zero. I added padding to position the text within the tab.
page39_3
No images in the titles.
page39_4
I started by setting the alignment to Left. This particular accordion fills up most of the content space, so that's not too noticeable.
To get the side-tabs instead of the regular Accordion effect I choose the Title Position to be on the Right.
This is a fast one, 0 milliseconds. That removes the entire transition. That should provide an immediate tab "jump" like most people are used to.
page39_5
I've chosen the similar text style for the content as the titles. For the border and background I chose the exact same colors as the the titles. This allows the title area to blend into the content area and make the tab style work.
page39_6
The content area will be 350 pixels plus a little bit of padding on each side. The total size of the content can always be accurately determined to be the Width + Margin-Left + Margin-Right + Padding-Left + Padding-Right + Border-Left + Border-Right. Basically just add all the horizontal numbers up and you get the total width.
page39_7
No images for this accordion.

Title Styles

Title Structure

Title Image

Title Effect

Content Style

Content Structure

Content Image