[teaser]CSS3 accordion shortcodes and versatile pricing tables make it even easier to display your content. The accordions are simple to use, and you can choose which one to start open (if any). And the pricing tables give you full control over colors, featured columns, content, and much more![/teaser] [line] [h4]Accordion Shortcodes[/h4] [accordion_item title=”Title”]Accordions can hold other shortcodes within them (like most of our shortcodes can actually…). This is an example with just text, but the other tabs are a bit more complex! Lorem ipsum dolor sit amet, consectetuer adipiscing elit, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.[/accordion_item] [accordion_item title=”Title”][articlequote]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.[/articlequote][/accordion_item] [accordion_item title=”Title”][vimeo_video height=”490″ autoplay=”no”]http://vimeo.com/1084537[/vimeo_video][/accordion_item] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][/code_line] [code_line][accordion_item title=”title”]Lorem ipsum…[/accordion_item][/code_line] [code_line][accordion_item title=”title”]Lorem ipsum…[/accordion_item][/code_line] [code_line][accordion_item title=”title”]Lorem ipsum…[/accordion_item][/code_line] [code_line][/code_line] [/code_table] [/toggle_box] [line] [h4]Accordion Toggles[/h4] When used with only one item, the accordions also double as a pretty nifty toggle box (in addition to all the other toggles available in the theme of course)! [accordion_item title=”Title”]Lorem ipsum dolor sit amet, consectetuer adipiscing elit, nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in.[/accordion_item] [toggle_box title=”See The Shortcodes”] [code_table] [code_line][/code_line] [code_line][accordion_item title=”title”]Lorem ipsum…[/accordion_item][/code_line] [code_line][/code_line] [/code_table] [/toggle_box] [line] [h4]Pricing Tables[/h4] [pricing_table columns=”3″] [pricing_table_column] [pricing_table_top]FIRST OPTION[/pricing_table_top] [pricing_table_middle] [bullet_list type=”check”] [item]Lorem Ipsum[/item] [item]Sit Amet Dolor[/item] [item type=”x”]Consecteteur[/item] [item type=”x”]Unum Sut Ete[/item] [/bullet_list] [/pricing_table_middle] [pricing_table_bottom] [large_price]26.00[/large_price] [gradient_button url=”#” color=”green”]Buy Now[/gradient_button] [/pricing_table_bottom] [/pricing_table_column] [pricing_table_column featured=”yes”] [pricing_table_top]SECOND ONE[/pricing_table_top] [pricing_table_middle] [bullet_list type=”check”] [item]Lorem Ipsum[/item] [item]Sit Amet Dolor[/item] [item]Consecteteur[/item] [item type=”x”]Unum Sut Ete[/item] [/bullet_list] [/pricing_table_middle] [pricing_table_bottom] [large_price]32.00[/large_price] [gradient_button url=”#” color=”green”]Buy Now[/gradient_button] [/pricing_table_bottom] [/pricing_table_column] [pricing_table_column] [pricing_table_top]THE THIRD[/pricing_table_top] [pricing_table_middle] [bullet_list type=”check”] [item]Lorem Ipsum[/item] [item]Sit Amet Dolor[/item] [item]Consecteteur[/item] [item]Unum Sut Ete[/item] [/bullet_list] [/pricing_table_middle] [pricing_table_bottom] [large_price]40.00[/large_price] [gradient_button url=”#” color=”green”]Buy Now[/gradient_button] [/pricing_table_bottom] [/pricing_table_column] [/pricing_table] [line] Pricing tables have a top, middle, and bottom section where you can control the colors and content separately. They also allow you to mark columns as featured (the middle one is an example here) to emphasize them. They’re the perfect way to compare plans or products!

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Leave a Reply

Your email address will not be published. Required fields are marked *