Menu icon Foundation
Foundation Accordions in WordPress widgets

Has anyone attempted to use Foundation's accordions to layout sidebars in WordPress? What I want to do is create a sidebar area, and for every widget in the sidebar, have a corresponding title + content appear in the sidebar. The Foundation accordion's dependency on IDs means the usual of altering before_title and after_title aren't sufficient.

I guess I could just use straight JS to build what I want, but I sort of would like to stick with Foundation's elements for consistency.

wordpressaccordions

Has anyone attempted to use Foundation's accordions to layout sidebars in WordPress? What I want to do is create a sidebar area, and for every widget in the sidebar, have a corresponding title + content appear in the sidebar. The Foundation accordion's dependency on IDs means the usual of altering before_title and after_title aren't sufficient.

I guess I could just use straight JS to build what I want, but I sort of would like to stick with Foundation's elements for consistency.

Sjoerd Koelewijn about 3 years ago

I've been struggling with this too. I wanted to display the widget title in the sidebar and only when people click the title show the complete widget to save some space. As you can't use unique identifiers like %1$s in before_title and after_title like you can in before_widget it proved to be a bit of a challenge.

I managed to get it to work using the dynamic_sidebar_params hook. Below the full code I use for the widget area. Hope it helps.

function magason_sidebar_widgets() {

  register_sidebar(array(
     'id' => 'sidebar-widgets-accordion',
     'name' => __('Sidebar widgets with Accordion', 'magason'),
     'description' => __('Drag widgets to place them in the sidebar with accordion effect', 'magason'),
     'before_widget' => '<article id="%1$s" class="row widget %2$s"><div class="small-12 columns accordionwidget_wrap"><ul class="accordion" data-accordion>',
     'after_widget' => '</div></li></ul></div></article>',
     'before_title' => '',
     'after_title' => ''
  ));

}

add_action( 'widgets_init', 'magason_sidebar_widgets' );

function check_sidebar_params( $params ) {
    global $wp_registered_widgets;

    $params[0][ 'before_title' ] .= '<li class="accordion-navigation"><a href="#accordion-'. $params[0]['widget_id'] .'"><h3>';
    $params[0][ 'after_title' ] .= '</h3></a><div id="accordion-'. $params[0]['widget_id'] .'" class="content">';

    return $params;
}
add_filter( 'dynamic_sidebar_params', 'check_sidebar_params' );