a
We a team of artists, producers, brand strategists and marketing professionals dedicated to visual problem solving in all media, The Attic develops visual identities and branding strategies in broadcast, print, interactive and digital formats for a wide variety of clients, from cable networks to theme parks to regular TV advertisers and everything in between.
549 Water Street, Celebration FL, 34747
+1 (407) 491.5049
javier.beltran@theattic.tv
Follow Us
 

Accordion & Toggles

[av_heading heading=’Accordion & Toggles’ tag=’h2′ style=’blockquote modern-quote’ size=’40’ subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=” admin_preview_bg=”][/av_heading]

[av_textblock size=” font_color=” color=” admin_preview_bg=”]

  • Any number of toggle/accordion elements are possible.
  • You can either run them in accordion mode (only one open element) or in toggle mode (multiple open elmenets)
  • Deeplinking support via hashtag (click on one item and see how the page url changes. You can link to the site with this url and the correct toggle will be opened)
  • If you got a large number of toggles you can make them sortable by any number of tags

[/av_textblock]

[av_toggle_container initial=’1′ mode=’accordion’]
[av_toggle title=’You can have open Toggles by default’]
Behavior

Should only one toggle be active at a time and the others be hidden or can multiple toggles be open at the same time?
[/av_toggle]
[av_toggle title=’Funky’]
Add/Edit Toggles

Here you can add, remove and edit the toggles you want to display.
[/av_toggle]
[av_toggle title=’Lorem’]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.
[/av_toggle]
[/av_toggle_container]

[av_hr class=’invisible’ height=’30’ position=’center’]

[av_one_half first]

[av_heading heading=’One toggle open at a time’ tag=’h2′ style=’blockquote modern-quote’ size=’30’ subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=” admin_preview_bg=”][/av_heading]

[av_toggle_container initial=’0′ mode=’accordion’]
[av_toggle title=’Toggle 2′]
Initial Open

Enter the Number of the Accordion Item that should be open initially. Set to Zero if all should be close on page load
[/av_toggle]
[av_toggle title=’Toggle 1′]
Behavior

Should only one toggle be active at a time and the others be hidden or can multiple toggles be open at the same time?
[/av_toggle]
[av_toggle title=’Funky’]
Add/Edit Toggles

Here you can add, remove and edit the toggles you want to display.
[/av_toggle]
[av_toggle title=’Lorem’]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut.
[/av_toggle]
[/av_toggle_container]

[/av_one_half][av_one_half min_height=” vertical_alignment=” space=” custom_margin=” margin=’0px’ padding=’0px’ border=” border_color=” radius=’0px’ background_color=” src=” background_position=’top left’ background_repeat=’no-repeat’ animation=” mobile_display=”]

[av_heading heading=’Multiple open toggles possible’ tag=’h2′ style=’blockquote modern-quote’ size=’30’ subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=” admin_preview_bg=”][/av_heading]

[av_toggle_container initial=’0′ mode=’toggle’]
[av_toggle title=’Toggle 2′]
Initial Open

Enter the Number of the Accordion Item that should be open initially. Set to Zero if all should be close on page load
[/av_toggle]
[av_toggle title=’Toggle 1′]
Behavior

Should only one toggle be active at a time and the others be hidden or can multiple toggles be open at the same time?
[/av_toggle]
[av_toggle title=’Funky’]
Add/Edit Toggles

Here you can add, remove and edit the toggles you want to display.
[/av_toggle]
[av_toggle title=’Lorem’]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis
[/av_toggle]
[/av_toggle_container]

[/av_one_half][av_one_full first]

[av_heading heading=’Sortable’ tag=’h2′ style=’blockquote modern-quote’ size=’30’ subheading_active=” subheading_size=’15’ padding=’10’ color=” custom_font=” admin_preview_bg=”][/av_heading]

[av_toggle_container initial=’0′ mode=’accordion’ sort=’true’]
[av_toggle title=’Are there additional costs?’ tags=’Installation, Misc’]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
[/av_toggle]
[av_toggle title=’Support Included?’ tags=’Installation’]
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
[/av_toggle]
[av_toggle title=’How to set up the theme?’ tags=’Pricing, Misc’]
Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis
[/av_toggle]
[av_toggle title=’What about Refunds?’ tags=’Pricing’]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
[/av_toggle]
[av_toggle title=’Can I change Plans or cancel at any time?’ tags=’Installation, Misc’]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
[/av_toggle]
[av_toggle title=’Support Included?’ tags=’Pre Sales’]
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
[/av_toggle]
[av_toggle title=’How to set up the theme?’ tags=’Installation, Pre Sales’]
Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis
[/av_toggle]
[av_toggle title=’Can I change Plans or cancel at any time?’ tags=’Pre Sales, Pricing’]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
[/av_toggle]
[av_toggle title=’What about Refunds?’ tags=’Pre Sales’]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
[/av_toggle]
[av_toggle title=’How to set up the theme?’ tags=’Pricing, Misc’]
Nullam sagittis. Suspendisse pulvinar, augue ac venenatis condimentum, sem libero volutpat nibh, nec pellentesque velit pede quis nunc. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis
[/av_toggle]
[av_toggle title=’Are there additional costs?’ tags=”]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
[/av_toggle]
[av_toggle title=’Can I change Plans or cancel at any time?’ tags=’Pre Sales’]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
[/av_toggle]
[av_toggle title=’Are there additional costs?’ tags=’Pricing’]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
[/av_toggle]
[av_toggle title=’Support Included?’ tags=’Pricing’]
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.
[/av_toggle]
[av_toggle title=’What about Refunds?’ tags=”]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
[/av_toggle]
[/av_toggle_container]

[/av_one_full]