Tabbed Content

I figured it out for myself.

Just wrap the shortcode in a div and give it the id you want for your tabs.

<div id="az-tabs">[a-z-listing taxonomy="conditions" display="terms"]</div>

Then write your script:

//jquery-ui-tabs
jQuery(document).ready(function($) {
jQuery( "#az-tabs" ).tabs();
});

Now each letter will load as it’s own tab with jQuery.

• This reply was modified 6 years, 10 months ago by Clayton Chase.

That’s an interesting solution. In the next release I’ll add an extra div around the default template, and add your jQuery snippet as an opt-in on the short-code.

Be ready to remove your customisation when I release the new version, because the change might confuse your site with the new div in the plugin conflicting with the extra div that you’re currently putting in the post-content.

I’ll keep an eye out for the update!

This was SUPER helpful and EXACTLY what I was looking for!

Just a note to all who need to implement this. Make sure you have the jQuery UI script link in order to make the tabs work.

I used this in my header:
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

If anyone has suggestions on what the link would be for the current version at all times or do you just need to update it.

You would place the code that claytonchase used after the script tag above. You need that to load first (script tag) I believe.

Please feel free to chime in (anyone) if you have better ways ??

Glad this helped! Also, you are right on about loading jQuery UI. Thanks for adding that. I forgot in my original post!

aww, shucks, you guys, thanks for helping each other out *hug* love you all for being awesome people!

I failed with getting the right script URL in the 2.0.0 update, but it’ll be fixed in 2.1.0 *pinky swear* :-p

This is an AWESOME plugin Daniel!! THANK YOU!!!

And thanks for confirming Clayton ??