Utilizing WordPress' Admin UI for plugin settings: getting accordion style

Question

As a plugin developer, it's important to make sure the Dashboard has the same look-and-feel as the rest of the native components of WordPress to provide a better User Experience.

For my plugin, I want to implement an accordion in my settings page. From reading this article and using wp_enqueue_script() function, it looks like this is possible by doing the following:

<?php
wp_enqueue_script( 'jquery-ui-accordion' );
?>
<script type="text/javascript">
jQuery(function($){
    $(".accordion").accordion({ header: "h3" });
    $(".accordion").last().accordion("option", "icons", false);
});
</script>

<div class="accordion">
    <div>
        <h3><a href="#">First</a></h3>
        <div>Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.</div>
    </div>
    <div>
        <h3><a href="#">Second</a></h3>
        <div>Phasellus mattis tincidunt nibh.</div>
    </div>
    <div>
        <h3><a href="#">Third</a></h3>
        <div>Nam dui erat, auctor a, dignissim quis.</div>
    </div>
</div>
<?php

Result

This was taken from the WordPress Admin Pattern Library plugin that I found on GitHub. Yet, in their demo, the accordion example looks like the following:

The repo looks like it hasn't been maintained and it seems that this is a styling issue. Is there another function that I need to run such as wp_enqueue_style() that is natively built in in order to get the proper styling for the accordion?

Answer 1

Here's how I do it for my plugin/options page (which is inside a class, thus the $this-> construct):

/* enqueue our css */
public function enqueue_options_style( $hook ) {
    if( $hook == $this->admin_page )
        wp_enqueue_style( 'my-options', '/some-directory/my-options.css', false, $this->version );  // only present for our plugin's settings page
}

$this->admin_page is the slug returned from prior options page init:

$this->admin_page = add_menu_page( __( 'Settings' ), __( 'Settings' ), 'some-user-capability', 'my-options', array( &$this, 'display_page' ), 'dashicons-my-icon' );

and, the call to enqueue the options style is hooked thusly:

add_action( 'admin_enqueue_scripts', array( &$this, 'enqueue_options_style' ), 10, 1 );     // add the css we need for our options settings page

Now, it's just a matter of constructing that my-options.css file, with the appropriate markup for your .accordion h3 element.