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:
register_sidebar(array( '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"> <ul> <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> </ul> <div id="fragment-1"> Content of one </div> <div id="fragment-2"> Content of two </div> <div id="fragment-3"> Content of three </div> </div>
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!