Creating button tabs inside a verticle tab layout

resolved (12 posts) (3 voices)

  1. Jon_burke
    Member

    Hi, sorry but another question please. I have alot of content to organise and have set up three verticle tabs. On each one of those tabs I also want to set up tabs with more categories as a button tab style. I tried it and it didn't work - the 5 button tabs just acted added to the verticle tabs. Thanks again. Jon. The code looks something like:

    [tabs_vertical]
    [tab title="Tab 1"]
    [tabs_button]
    [tab title="NSW/ACT"]wSFVSDV[/tab]
    [tab title="QLD"]SDRTHDFH[/tab]
    [tab title="SA"]EAGERS[/tab]
    [tab title="WA"]ASZEHSX[/tab]
    [tab title="VIC/TAS"]STRJDFYJ[/tab]
    [/tabs_button]
    [/tab]
    [tab title="Tab 2"]
    [tabs_button]
    [tab title="NSW/ACT"]wSFVSDV[/tab]
    [tab title="QLD"]SDRTHDFH[/tab]
    [tab title="SA"]EAGERS[/tab]
    [tab title="WA"]ASZEHSX[/tab]
    [tab title="VIC/TAS"]STRJDFYJ[/tab]
    [/tabs_button]
    [/tab]
    [tab title="Tab 3"]
    [tabs_button]
    [tab title="NSW/ACT"]wSFVSDV[/tab]
    [tab title="QLD"]SDRTHDFH[/tab]
    [tab title="SA"]EAGERS[/tab]
    [tab title="WA"]ASZEHSX[/tab]
    [tab title="VIC/TAS"]STRJDFYJ[/tab]
    [/tabs_button]
    [/tab]
    [/tabs_vertical]

    Posted 5 years ago #
  2. Hi Jon!

    Could you send us a link of the wrong result, and how it should be?

    []'s

    Posted 5 years ago #
  3. Jon_burke
    Member

    Just pm'd you. Thanks.

    Posted 5 years ago #
  4. Jon_burke
    Member

    Hi thanks for replying to my pruvate mail. I haven't tried wrapping all of my contents with a [raw] shortcode? So would you suggest placing a [raw] before and a [/raw] below all of the above code? Thanks Jon.

    Posted 5 years ago #
  5. Elliott
    Support

    This is possible if you type out the HTML of your tabs and include a link to the tab script like so,

    <div class="tabs_container">
    <ul class="tabs">
    <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    </ul>
    <div class="tabs_content">tab 1 content</div>
    <div class="tabs_content">
    
    <div class="tabs_container">
    <ul class="tabs">
    <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    </ul>
    <div class="tabs_content">tab 1 content</div>
    <div class="tabs_content">tab 2 content</div>
    </div>
    
    </div>
    </div>
    
    <script type = 'text/javascript' src = 'YOUR DOMAIN/wp-content/themes/YOUR THEME/lib/scripts/tabs.min.js'></script>

    All of this can be typed into the HTML editor of your page / post to nest tabs.

    Posted 5 years ago #
  6. Jon_burke
    Member

    Thanks very much Elliot that seems to be just what I need. Just one thing, I would like the main tabs to be vertical tabs and the nested tabs to be button tabs. What would I amend? jon.

    Posted 5 years ago #
  7. Jon_burke
    Member

    Elliott I've sent you a pm of the page I am trying to create. Thanks Jon.

    Posted 5 years ago #
  8. Elliott
    Support

    It's the same thing, you would just switch the class names around a bit,

    <div class="tabs_button_container">
    <ul class="tabs_button">
    <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    </ul>
    <div class="tabs_button_content">tab 1 content</div>
    <div class="tabs_button_content">tab 2 content</div>
    </div>

    The vertical tab will look a little different though,

    <div class="tabs_vertical_container">
    
    <div class="tabs_vertical_frame">
    <span class="bg_top"></span>
    <ul class="tabs_vertical">
    <li class = "current"><a href="#"><span>tab 1</span></a></li>
    <li><a href="#"><span>tab 2</span></a></li>
    </ul>
    <span class="bg_bottom"></span>
    </div>
    
    <div class="tabs_vertical_content">tab content 1</div>
    <div class="tabs_vertical_content">tab content 2</div>
    
    </div><div class="clearboth"></div><!--end_raw-->
    Posted 5 years ago #
  9. Jon_burke
    Member

    Elliott, thankyou big time. This is exactly what I needed - there's just one last thing sorry. When I use the code below, the name of the first verticle tab is squashed over to the right against the arrow. What's could be causing this? Jon.

    <div class="tabs_vertical_container">
    
    <div class="tabs_vertical_frame">
    <span class="bg_top"></span>
    <ul class="tabs_vertical">
    <li class = "current"><a href="#"><span>tab 1</span></a>
    
    <li><a href="#"><span>tab 2</span></a></li>
    <span class="bg_bottom"></span>
    </div>
    
    <div class="tabs_vertical_content"><div class="tabs_button_container">
    <ul class="tabs_button">
    
    <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    <div class="tabs_button_content">tab 1 content</div>
    <div class="tabs_button_content">tab 2 content</div>
    </div>
    </div>
    <div class="tabs_vertical_content"><div class="tabs_button_container">
    <ul class="tabs_button">
    
    <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    <div class="tabs_button_content">tab 1 content</div>
    <div class="tabs_button_content">tab 2 content</div>
    </div>
    </div>
    
    </div><div class="clearboth"></div><!--end_raw-->

    I will pm you a link to the page. Thanks again. I am 99% there.

    Posted 5 years ago #
  10. Jon_burke
    Member

    Sorry see if this is clearer.

    <div class="tabs_vertical_container">
    <div class="tabs_vertical_frame">
    <span class="bg_top"></span>
    <ul class="tabs_vertical">
    <li class = "current"><a href="#"><span>tab 1</span></a>
    
    <li><a href="#"><span>tab 2</span></a></li>
    <span class="bg_bottom"></span>
    </div>
    <div class="tabs_vertical_content"><div class="tabs_button_container">
    <ul class="tabs_button">
    
    <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    <div class="tabs_button_content">tab 1 content</div>
    <div class="tabs_button_content">tab 2 content</div>
    </div>
    </div>
    <div class="tabs_vertical_content"><div class="tabs_button_container">
    <ul class="tabs_button">
    
    <li><a href="#">tab 1</a></li>
    <li><a href="#">tab 2</a></li>
    <div class="tabs_button_content">tab 1 content</div>
    <div class="tabs_button_content">tab 2 content</div>
    </div>
    </div>
    </div><div class="clearboth"></div><!--end_raw-->
    Posted 5 years ago #
  11. Jon_burke
    Member

    Problem solved Elliott. Thanks for all your help.

    Posted 5 years ago #
  12. Hi!

    That's great!

    Let us know if you need more help!

    []'s

    Posted 5 years ago #

Reply

You must log in to post.

Construct WordPress Theme
Construct wordpress theme
Myriad WordPress Theme
Myriad wordpress theme
Method WordPress Theme
Method wordpress theme
Fusion WordPress Theme
Fusion wordpress theme
Elegance WordPress Theme
Elegance wordpress theme
Echelon WordPress Theme
Echelon wordpress theme
Dejavu WordPress Theme
Dejavu wordpress theme
Modular WordPress Theme
Modular wordpress theme