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.
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.
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.
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.
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.
No images for this accordion.
