Using Jquery UI Tabs on Sidebar Widgets (2 posts)

  1. Lady Meda
    Posted 3 years ago #

    I could really use a point in the right direction. I've started applying jquery ui in my sidebars, but am stuck on getting tabs to work. I'm looking to create tabs with each having a different widget in it. So for example: Tab 1= Login widget, Tab 2= Currently online widget, Tab 3= Recent posts widget.

    I created a new sidebar, and feel like I am really close to a solution, but missing a small piece of the puzzle. The new sidebar is structured like this:

        'name' => 'Tabbed Widget Area',
        'id' => 'tabs-widgets',
        'description' => 'jQuery UI tab enabled widget area',
        'before_widget' => '',
        'after_widget' => '',
        'before_title' => '<ul><a href="#">',
        'after_title' => '</a></ul>',

    With this, jquery is styling the widgets, but isn't tabbing them correctly. I am having trouble figuring out how to make the markup for the sidebar match the necessary markup for tabs, like this:

    <div id="tabs">
        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
      <div id="fragment-1">
        Content of one
      <div id="fragment-2">
        Content of two
      <div id="fragment-3">
        Content of three

    I know that ALL of the widget titles need to be wrapped in a ul, and then each one separately in a li. But I'm stuck on how to implement the ul correctly. Any advice or pointers would be extremely appreciated!

  2. Lady Meda
    Posted 3 years ago #

    Anyone? Any help would be very appreciated.

Topic Closed

This topic has been closed to new replies.

About this Topic