January 15, 2015

Tabs & Toggles Example

Vertical Tabs

Organize your content in Tabs and Toggles, which can contain any combination of content, short codes and layouts. This is a great way to break up the content on your webpage and have some Design Variety. This encourages your website visitors to interact with your website as well.  Give your website a Interactive feel and touch Design.

Add any kind of content here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus. Aenean facilisis malesuada ante vel ornare. Morbi lobortis orci id interdum rutrum. Morbi ipsum elit, porttitor sit amet euismod a, cursus a lectus.

 

This is how the HTML Code looks that created the Tabs above.

Enter HTML Code here


Vertical Tabs

menu_image1Add any kind of content here. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum porta orci a interdum ullamcorper. Donec tempus sem eu massa vehicula tincidunt. Maecenas auctor dolor magna, vitae adipiscing justo commodo vel. Cras nulla purus, fermentum sed elit ut, fringilla consequat quam. Integer nec elementum arcu, non euismod tellus. Aenean facilisis malesuada ante vel ornare. Morbi lobortis orci id interdum rutrum. Morbi ipsum elit, porttitor sit amet euismod a, cursus a lectus.

This is how the HTML Code looks that created the Tabs above.

Enter HTML Code here


Content Toggle

Content Toggles can be used in many ways and limited...really ONLY by your imagination. I like to use Content Toggles to display FAQs and the Answer is hidden inside.

Click To Reveal More

http://buildmyfirstwebsite.org/

Custom Toggle Title

http://buildmyfirstwebsite.org/

FAQ Question Here - Can I order more than 1 'DFY' Website?

Yes, You can get as many as you like.

This is how the HTML Code looks that created the Post List above.

Enter HTML Code here


Accordions

The Accordion is a variation of the Content Toggle. The difference is that in an accordion, one section is always expanded, but there’s never more than one section expanded. Whenever you expand one section, the previously open one automatically closes.  Play with the Example below:

Accordion Section 1

Accordion Section 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra, leo quis vestibulum laoreet, nulla odio hendrerit arcu, nec sodales eros lorem eu dolor. In ornare porttitor ante, ac placerat leo hendrerit sed. In vitae sodales massa. Nam iaculis laoreet lacus, ut facilisis urna blandit sit amet. Mauris hendrerit urna id urna pretium bibendum. Suspendisse id quam congue, tristique enim sit amet, congue sapien. Maecenas porta sagittis sapien, et pellentesque quam faucibus in. Aliquam tempus suscipit lorem, et malesuada dui rhoncus vitae. Duis eleifend tempus nisl at bibendum.

Where can I get Accordions for my Website?

Every (DFY) Done-For-You website template comes with the ability to create as many Accordion Sections as you desire.

Section 3 (these Are Custom Titles)

Duis condimentum tellus arcu, nec interdum lorem adipiscing at. Phasellus ac arcu congue, vulputate quam at, rhoncus velit. Sed sit amet tempus lacus, nec vestibulum sapien. Curabitur aliquet, nibh nec viverra ornare, nisl arcu ullamcorper leo, quis suscipit neque nunc a elit. Fusce a dolor sit amet enim egestas blandit. Sed sem nibh, pellentesque ut semper sed, dapibus sit amet sem. In hac habitasse platea dictumst. Phasellus luctus diam ut facilisis malesuada. Phasellus luctus neque hendrerit, gravida mi in, consectetur dui. Fusce id nulla at magna laoreet convallis quis a leo.

Another Accordion Section

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed viverra, leo quis vestibulum laoreet, nulla odio hendrerit arcu, nec sodales eros lorem eu dolor. In ornare porttitor ante, ac placerat leo hendrerit sed. In vitae sodales massa. Nam iaculis laoreet lacus, ut facilisis urna blandit sit amet. Mauris hendrerit urna id urna pretium bibendum. Suspendisse id quam congue, tristique enim sit amet, congue sapien. Maecenas porta sagittis sapien, et pellentesque quam faucibus in. Aliquam tempus suscipit lorem, et malesuada dui rhoncus vitae. Duis eleifend tempus nisl at bibendum.

This is how the HTML Code looks that created the Post List above.

Enter HTML Code here

2nd Admin

Click Here to Leave a Comment Below

Leave a Reply: