Support » Plugins and Hacks » Using Jquery UI Tabs on Sidebar Widgets

Using Jquery UI Tabs on Sidebar Widgets

  • 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!

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Using Jquery UI Tabs on Sidebar Widgets’ is closed to new replies.