How to insert tabbed content

[brookelustig]

Hello everyone, I have custom template and I'm trying insert a function where I can create simple tabbed content on posts. Can't seem to figure out how to accomplish this without the use of plugins. Anyone with any ideas or tips on how I can do this?

Cheerios

Brooke

[Brad Dalton]

You can code it yourself using something like this jQuery with HTML https://jqueryui.com/tabs/

Or

This premium template http://wpsites.net/wordpress-themes/genesis-tabbed-content-template/

---

Tutorials for StudioPress Themes.

[brookelustig]

Hi Brad, I tried the jquerey one but the tab dosen't show for some reason. Do you know if the wpsites code would let me add the tabs on posts or would they be hardcoded to the template?

Thank you

[Victor Font]

The jQuery tabs are pre-registered in the WordPress distribution. You have to make sure you're loading the jQuery plugin in functions.php. Add wp_enqueue_script( 'jquery-ui-tabs' ); to your functions file.

Activate the tabs by adding the jQuery code to your page header:

 <script>
 jQuery(function($) {
    $( "#tabs" ).tabs();
  });
  </script>

Follow this example to create your tabs: http://jqueryui.com/tabs/

Here's an example I created with this process: http://modernrenaissancemarketing.com/. Scroll down to the second panel.

---

Regards,

Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?

[Brad Dalton]

The tabs can be added anywhere you paste the HTML. Its a complete working solution.

---

Tutorials for StudioPress Themes.

[brookelustig]

This reply has been marked as private.

[Susan]

Brooke:

Victor won't be able to see your reply, as it is private. The only people who can read a private reply are the creator of the thread (you), and moderators (such as me).

[brookelustig]

Lol thanks Susan:) Omg thank you Victor! Saved my day:) One last issue I’m trying to solve is formatting the page around my inserted shortcode. As you can see here on my website http://www.bokanet.se/16-2/ the content is fine one the first tab but becomes a little out of place when you click on different tabs. Why is that? Do you know how I could solve that?

I copied the style from code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css

Once again thank you for your time and help!

Brooke

[Author]

Posts