A Drop-In Replacement For TheThe Tabs And Accordions

Been using TheThe Tabs And Accordions on your website? The bad news is it doesn’t work anymore. The good news is I’ve found a drop-in replacement for you. It takes a little bit of setting up but will give you a more robust solution for the future.

Squelch Web Design Blog: TheThe Fly Tabs and Accordions Replacement

* * * STOP PRESS * * *   Squelch Tabs and Accordions is now available for download as an alternative to the method outlined in this post.

Background

I’ve installed TheThe Tabs And Accordions on a number of client’s websites, so I was a little annoyed when it stopped working. I did come up with a fix that got the script back up and running again which you can install into your theme’s functions.php file, but it was never intended as a long-term solution.

A Quick Fix For TheThe Tabs And Accordions

* * * STOP PRESS * * *   Squelch Tabs and Accordions is now available for download as an alternative to the method outlined in this post.

Add this code to your theme’s functions.php file:

function thethe_fix() {    $protocol = (!empty($_SERVER['HTTPS']) && $_SERVER['HTTPS'] !== 'off' || $_SERVER['SERVER_PORT'] == 443) ? "https:" : "http:";    wp_deregister_script('jquery');    wp_enqueue_script("jquery", $protocol."//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js", array('json2'), '1.8.3'); } if (!is_admin()) add_action( 'wp_print_scripts', 'thethe_fix', 20 );

I provided this code on TheThe Tabs And Accordions plugin’s support forum on the WordPress Plugins Directory, but the plugin seems to have been removed from the directory.

Note: The code above is NOT intended as a long-term solution, but it might get you out of a sticky situation while you arrange a replacement. For a better solution, keep reading. I’m really only providing this quick fix here for posterity, the solution I outline below is the way to go.

Caveat

* * * STOP PRESS * * *   Squelch Tabs and Accordions is now available for download as an alternative to the method outlined in this post.

I’m not generally keen on placing tabs in web pages (there are a few exceptions, but on the whole I believe it to be poor UI design). So this tutorial is all about accordions. If you need tab support then that’s a different story that I’m not covering here. If I get enough interest I’ll look into a replacement solution for the tabs portion of TheThe Tabs and Accordions.

Replace TheThe Tabs And Accordions

* * * STOP PRESS * * *   Squelch Tabs and Accordions is now available for download as an alternative to the method outlined in this post.

TheThe Tabs And Accordions seems to have completely disappeared out of the WordPress.org Plugins Directory, suggesting they have no intention of updating it further.

A more long-term solution than my quick fix (above) is needed, and I don’t want to completely re-engineer every website I’ve put TheThe Tabs And Accordions onto, so I had planned on writing my own replacement plugin. Unless, of course, I can already do it with existing plugins found on the WordPress Plugins directory.

And it turns out I can. Here’s how.

Step #1: Install The Plugins

* * * STOP PRESS * * *   Squelch Tabs and Accordions is now available for download as an alternative to the method outlined in this post.

You will need three plugins:

Install all three plugins and activate them.

Step #2: Configure jQuery UI Widgets

When jQuery UI Widgets is first installed it pulls in EVERYTHING. There’s no need to do this, so go to the configuration panel by going to Settings > jQuery UI Widgets and then untick all the checkboxes on its configuration panel under “Use These jQuery UI Scripts” and “Use These jQuery Effect Scripts”.

We want to use jQuery UI Widgets to pull in the Smoothness jQuery UI Theme, so select “Smoothness” from the “Select jQuery UI Theme” dropdown box.

Untick all checkboxes and choose "Smoothness" theme, as shown

Untick all checkboxes and choose “Smoothness” theme, as shown

Save your changes and then carry on to the next step, creating or editing your accordion content.

Step #3: Add Or Edit Your Accordion Content

Accordion Shortcode’s syntax is compatible with TheThe Tabs And Accordions’, which makes life easy. However, it seems a little more picky about a few things: It doesn’t seem to appreciate any styles getting mixed up with the shortcode tags, and it doesn’t like empty paragraphs between shortcodes either.

Extra empty headings as generated by Accordion Shortcode

Extra empty headings as generated by Accordion Shortcode

So if you see something like this screenshot, then you will need to go to your page or post and tidy up the content in the text editor (it’s easier to get it right with the text editor than with the Visual editor).

So where your code might have looked like this:

Accordion One

My accordion text

Accordion Two

Text in another accordion

You will want to remove the extra spaces using the “Text” view in WordPress, to create code that looks more like this:

Accordion One

My accordion text

Accordion Two

Text in another accordion

This will stop WordPress from creating lots of extra paragraph tags between the shortcodes, and stop Accordion Shortcode from turning those paragraphs into titles.

When you’re done editing the page save your changes and check that there are no empty headings in your accordion.

Step #4: Tidy Up The Styles

* * * STOP PRESS * * *   Squelch Tabs and Accordions is now available for download as an alternative to the method outlined in this post.

At this point you will have something a little like this:

Here is the page once the content has been tidied up. Still not looking too great though.

Here is the accordion once the content has been tidied up. Still not looking too great though.

Let’s go add some custom CSS to remove those gaps. This is why we installed Best Custom CSS. If you already have a plugin installed for providing custom CSS then feel free to use that. You can also add your styles to your theme’s styles if you want, assuming you know how to and understand the potential ramifications of doing so. For the purposes of this tutorial we’ll just put the styles into Best Custom CSS, so go to “Custom CSS” in the menu, tick the “Custom” checkbox and then click “Update Settings”. Then click the “custom.css” link to go to the editor for that stylesheet.

Now we add the custom CSS. We’re removing the gaps from the h3 tags Accordion Shortcode adds to the page, but we only want to affect those h3 tags and not ALL h3 tags. We can target just those h3 tags with this selector: .ui-accordion h3.ui-accordion-header and margin: 1px 0; will neaten up those enormous gaps.

.ui-accordion h3.ui-accordion-header {
   margin: 1px 0;
}

margin: 1px 0; makes a world of difference to the gaps

margin: 1px 0; makes a world of difference to the gaps

Looking a lot better already, but the titles are still too big. This is caused by padding, we can fix that easily enough:

.ui-accordion h3.ui-accordion-header {
   margin: 1px 0;
   padding: 0 0 0 2.2em;
}

By reducing the padding the accordion starts to look more like TheThe Tabs And Accordions did out of the box

By reducing the padding the accordion starts to look more like TheThe Tabs And Accordions did out of the box

We need to keep the left padding of 2.2em on the h3 because otherwise the text for the heading ends up on top of the arrow. Not ideal. As you can see we’re nearly there. Only problem is the line under the header, separating it from the content. Maybe you like it, but I wasn’t keen and TheThe Tabs And Accordions doesn’t have this line, so we need one more rule just to neaten that up: 

.ui-accordion h3.ui-accordion-header {
   margin: 1px 0;
   padding: 0 0 0 2.2em;
}
.ui-accordion h3.ui-accordion-header-active {
   border-bottom: 0;
}

By removing this line we finally end up with an accordion that looks near enough the same as TheThe Tabs And Accordions out of the box

By removing this line we finally end up with an accordion that looks near enough the same as TheThe Tabs And Accordions out of the box

And, as you can see, we’re there. It looks pretty much identical to TheThe Tabs And Accordions out of the box.

Step #5 (Optional): Try Alternative jQuery UI Themes

* * * STOP PRESS * * *   Squelch Tabs and Accordions is now available for download as an alternative to the method outlined in this post.

We can now quickly and easily change the appearance of the accordion by going back to the jQuery UI Widgets plugin and changing the theme we use. With TheThe Tabs And Accordions we had no way of changing the jQuery UI Theme, as you can see this is a better solution.

m4s0n501

About Matt Lowe

Matt Lowe is a WordPress web designer / developer based in Newbury, Berkshire. After 8 years of doing the nine-to-five for other companies and watching them make the same mistakes over and over he set out in business on his own. He writes in the third person. Read more »

Posted on by Matt Lowe This entry was posted in Content, Featured, Presentation, Squelch Web Design Blog, User Interfaces, Web design, Web Development and tagged , , , , , , , , , , .


5 meditations upon A Drop-In Replacement For TheThe Tabs And Accordions

  1. On Randy King was pontificating thus:

    Matt –

    Thanks for the functions.php hack, it works completely for me, and wanted to let you know that it also handles the HACCORDIONS (horizontal accordions) cases as well.

    I haven’t looked hard into your longer-term solution yet; hoping that there is the ability to use horizontal accordions there as well.

    Thanks again for posting this – it really is a livesaver!

    • On Matt Lowe was pontificating thus:

      Hi Randy,

      As far as I know you cannot do horizontal accordions with Accordion Shortcode. But if there’s interest in this then I may create an alternative to Accordion Shortcode that allows you to do accordions, horizontal accordions and tabs, just as TheThe Fly used to.

  2. On Vnu was pontificating thus:

    Hello!

    I am looking for a plugin that let us to have hAccordians. May I know if you are planning to create one for that?

    Thanks

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>