Table of Contents

  1. Intro
  2. Install
  3. Integrate in your project
  4. Customise It
  5. FAQ
  6. Developer Tips

Tabs and Accordions DZS

Created: 10/04/2013
By: Digital Zoom Studio
Twitter: http://twitter.com/
Facebook: http://facebook.com/dzs
Support Forum: http://dzs.net/support/

Thank you for purchasing my component. If you have any questions that are beyond the scope of this help file, please feel free to apply for membership on the forum, it's the fastest way of support [ link to the left ] and post a thread about your question after your membership is validated.

WordPress ZoomTabs Intro - top

WordPress ZoomTabs and Accordions is the perfect tool for creating Tabs or Accordions. The tabs automatically minimize to accordions when the responsive switch is achieved in order to be displayed fine on mobile devices.

WordPress ZoomTabs Features

Other Great Plugins

Credits

 

 

Installation - top

All you have to do for installing on your site (ie. yoursite.com) is copy the contents of the /source folder to a folder (ie. yourfolder) on your site via ftp ( with filezilla ) or any other upload service. You can then access your contents via http://yoursite.com/yourfolder.

 

Integrating in your project - top

In order to install this component in your html page you need to:

  1. unpack the download package, open the source folder
  2. copy the folder /zoombox into your project folder
  3. open your html file and insert this inside your <head> tag

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel='stylesheet' type="text/css" href="dzstabsandaccordions/dzstabsandaccordions.css"/>
    <script src="dzstabsandaccordions/dzstabsandaccordions.js"></script>

    note: if you already have included jQuery in your document, do not include it again, jQuery should only be included once

  4. insert this inside your <body> tag where you want the plugin to appear

    <div class="dzs-tabs auto-init skin-melbourne" data-options="{ 'design_tabsposition' : 'left'
    ,design_transition: 'slide'
    ,design_tabswidth: 'default'
    ,toggle_breakpoint : '400'
    ,toggle_type: 'accordion'}    ">

    <div class="dzs-tab-tobe">
    <div class="tab-menu with-tooltip">
    Fully Responsive
    </div>
    <div class="tab-content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    </div>
    </div>

    <div class="dzs-tab-tobe">
    <div class="tab-menu with-tooltip">
    Multiple Skins
    </div>
    <div class="tab-content">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
    </div>
    </div>

    <div class="dzs-tab-tobe">
    <div class="tab-menu ">
    Easy Setup
    </div>
    <div class="tab-content">
    Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </div>
    </div>

    </div>

  5. modify settings ( emphatized ) and content to your wish
  6. All done!

 

Customise It - top

So let's explain the structure of the above so you can customize it to your needs.

 
The Item

<div class="dzs-tab-tobe">
<div class="tab-menu with-tooltip">
Easy Setup
</div>
<div class="tab-content">
Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>
</div>

This is the item structure. You can modify the title and content with any

The Script Call

There are two ways to init zoomtabs.

Auto-init mode.

<div id="demotabs" class="dzs-tabs auto-init skin-melbourne" data-options="{ 'design_tabsposition' : 'left'
,design_transition: 'slide'
,design_tabswidth: 'default'
,toggle_breakpoint : '400'
,toggle_type: 'accordion'}">

[...]

</div>

The advantage is that you do not have a script call. The tabs will auto initiate.

Script call mode

<div id="demotabs" class="dzs-tabs skin-melbourne">

[...]

</div>

<script>
jQuery(document).ready(function($){

dzstaa_init('#demotabs', { 'design_tabsposition' : 'left'
,design_transition: 'slide'
,design_tabswidth: 'default'
,toggle_breakpoint : '400'
,toggle_type: 'accordion'});

});

</script>

 

The Settings
settings_skin
skin-default, skin-boxed, skin-melbourne or skin-blue
settings_enable_linking
enable deeplinking on tabs
settings_startTab
the start tab, default or a fixed number
design_transition
default, fade or slide
design_tabsposition
set top, right, bottom or left
design_tabswidth
set the tabs width for position left or right, if tabs position top or bottom and this is set to fullwidth, then the tabs will cover all the width
settings_appendWholeContent
take the whole tab content and append it into the dzs tabs, this makes complex scripts like sliders still work inside of tabs
toggle_breakpoint
a number at which bellow the tabs will trasform to toggles
toggle_type
normally, the toggles act like accordions, but they can act like traditional toggles if this is set to toggle


How to set up fontawsome

this is an example how to set a fontawesome icon inside the tab title

<div class="tab-menu with-tooltip">
<i class="fa fa-mobile"></i> Fully Responsive
</div>

fontawesome library must be included

 


FAQ - top

 

What's the difference between jQuery(document).ready and jQuery(window).load?

When you want to manipulate pictures - ie: you depend on their size - like a ken burns slider or scroller does, it's best to use jQuery(window).load because that executes the code in it AFTER all the images and content has loaded. For everything else, there is jQuery(document).read -which only waits for the html to be parsed corectly & all elements formed.

 

Developer Tips - top

Recommended Programs

You can generally use any text editing software [ like notepad ] to edit content/code but this is what I recommend:

SASS

If you are a developer you will notice there are some .scss files included too. This is the language for a css preprocessor which makes a developer's life easier. This is optional but if you want to try it here is the site.

 

 

Digital Zoom Studio

Go To Table of Contents