Back to Top
The nuts and bolts for
Creative web development

DMXzone Accordion

“Organize your content in sections with amazing effects and animation”

If you’ve wondered how you can split your web content into accordion-like fields within Dreamweaver, now we offer you the best tool that makes it possible. With the DMXzone Accordion you can have accordion sections instead of pages anywhere on your site. Arrange your texts, images, videos and even whole pages and style them to create an intuitive and user-friendly navigation that will fit perfectly any window or monitor size. Grab your users' attention with stunning animation effects that will be played when toggling the content of your sections and present your products or ideas more effectively!

Supplied with 24 stylish designs that can be edited through the CSS and options for customizing the size and the header icons, the DMXzone Accordion is live rendered in Dreamweaver so that you can change anything right in place. The extension is fully controllable by behaviors and can be bind to other DMXzone extension.


  • 24 CSS Designs included - You can simply choose one of the 24 amazing styles available or edit them through the CSS to fit your website perfectly.

  • Easy to choose style picker - We've included a style picker where you can see a preview of the chosen design

  • Display your content in a stylish accordion - Divide your web content into different sections that can be easily switched and save space on your pages

  • Display any content - You can add rich content into the sections, such as text, images, videos and even whole pages

  • Fully customizable styles - Our tabs are all CSS based so you can easily make your own adjustments in the CSS from within Dreamweaver's CSS editor

  • All sections are live rendered in Dreamweaver and can be fully navigated in design view! So you can easily visual switch from section to section and edit it right in place! Note that this feature requires Dreamweaver CS3+

  • Add, remove, rearrange or set start sections- You can add, remove, rearrange and add start section from the Inline property inspector

  • Fully resizable - The height of the sections expands depending on the content but the width can be set manually

  • Toggle sections onClick or on mouse over - You can set your sections to be switched onClick or on hover in order to create a more intuitive navigation

  • Amazing animation effects - You can add a stunning animation effect that will be played when switching between sections

  • Auto Height - If you select Auto Height your Accordion will adjust its height according to the size of the highest section.

  • Fill Space - If you select Fill Space your accordion will fill the vertical space allocated by its container.

  • Collapsible sections - You can make the sections collapsible so that when clicked will toggle the content closed/open

  • Opened/Closed Section Icons - Choose the best icons that will fit your website design in order to indicate whether a section is opened or closed

  • Inline property inspector - You can easily change all the visual options later on

  • Fully controllable by behaviors - If you want to navigate to a specific section or start an event within it - it can be easily done with the Control DMXzone Accordion behavior

  • Search Engine Friendly - As the DMXzone Accordion is pure HTML and CSS code it can be nicely indexed by all search engines and web spiders.


  • Property Management Showcase

    For this showcase we used DMXzone Accordion in order to save space on our page by splitting the content into accordion-like fields.

  • Travel Mobile App Showcase

    For this showcase we used DMXzone Accordion to split our web content into accordion-like fields so that it fits the information within the phone image.

  • Iron Man Movie Page Showcase

    For this showcase we used the DMXzone Nivo Slider in order to preview the images, the best possible way and enhance the user experience. The movie cast with detailed information is presented in a ...

  • Music Lessons Showcase

    For this landing page showcase we used the DMXzone Accordion in order to save space for our content and the DMXzone Calendar 2 with a Timepicker for the lessons reservation.

  • 3D Flipping Gallery within a Parallax Slider Showcase

    In this showcase we added four HTML5 3D Flipping Galleries as elements in the HTML5 Parallax Slider in order to design even greater 3D depth illusion. Also we added DMXzone Accordion on the right ...

  • Car Service Showcase

    In this showcase we will show you how you can combine DMXzone Accordion, Universal CSS Navigation Menu and DMXzone Supersized in order to create an awesome Car Service website. For an amazing ...

  • City Guide - Points of interest demo

    In this showcase you can see how easy it is to navigate your DMXzone Google Maps, binded with behaviors for the DMXzone Accordion. In order to get the exact location on the maps, simply click on the ...

  • Real Estate Page Showcase

    In this real estate showcase page you can see how we combined awesome website navigation(Universal CSS Navigation Menu), stunning image slideshow(HTML5 Slideshow) and a right sidebar divided in ...

  • DMXzone Accordion Restaurant Showcase

    Using our DMXzone Accordion, we have created an accordion that folds into discrete sections - Weekly Featured (Images), Our Chef in Action (Videos), and Latest News (Text).

  • DMXzone Tabs Showcase

    In this showcase website you can see how easy it is to put all of your content on one page with the help of DMXzone Tabs, where you can divide it in categories, add images, tables and more.



Type: Behavior
License: External link
Product: Dreamweaver CS3, Dreamweaver CS4, Dreamweaver CS5/CS5.5 and CS6, Dreamweaver CS5.5, Dreamweaver CC
Browser: Chrome 9+, IE 8, Safari 4+, Opera 10+, iPad, IE 9, Safari 5+, Firefox 3.6, Firefox 4+, Chrome 10+, Opera 11
Used Technologies: jQuery UI, CSS
Screen Shot: External link
Tags: dreamweaver, extension, accordion, jQuery UI

The DMXzone Accordion runs on Dreamweaver 8 but we do not support it officially.


Version 1.1.3

  • Included the latest jQuery 1.11.1
  • Improved for Dreamweaver CC 2014
  • Improved for DMXzone Extension Manager

Version 1.1.2

  • Full Dreamweaver CC and Extension Manager CC support
  • Included new Behavior Connector with restyled UI and better Mac OSX Support
  • Updated the automatic file copy and update component for better Dreamweaver CC support
  • Improved compatibility with the latest jQuery
  • Included latest jQuery 1.10.1
  • Improved Windows 8 compatibility

Version 1.1.1

  • Improved support for new addition styling themes, like the DMXzone Metro UI Theme Pack
  • Improved style picker dialog to pick up automatically new available styles

Version 1.1.0

  • New all collapsed option - Now the DMXzone Accordion will stay closed until its clicked
  • Included updated jQuery UI to 1.10.1 for more speed, power and greater user experience
  • Included updated jQuery to 1.8.3 that includes the unbelievable 13 versions
  • Updated jQuery UI Themes

Version 1.0.1

  • Improved Style chooser for DW CS6 on Mac OSX
  • Included the latest jQuery UI 1.8.23
  • Improved file compression for even smaller file sizes
  • Improved Dreamweaver integration
  • Improved installer for DW CS 5.5+ and Mac DW CS6 

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – which is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article