YouTubeBuzz.com - Buy real YouTube video views safe & cheap

How to Add Tabs and Accordions to a WordPress Site Without a Plugin

Tabs and Accordions

Tabs and accordions add functionality to your site that is not only beautiful, but intuitive. Every visitor, from the seasoned programmer to the novice PC user, knows what to do when he sees a set of tabs. Accordions, on the other hand, can save an awful lot of screen real estate and let a user view content at her own pace.

While there are a number of plugins that can add this functionality to your WordPress site (in fact, we’ve got a dandy one right here), what if you’d rather code it directly into your site? Look no further. Using a few simple jQuery scripts, we’ll show you how to add tabs and accordions.

First, call the Javascript and CSS files by adding the following code to your theme’s header.php file before wp_head();:

wp_enqueue_style('jquery-ui-style','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css');
wp_enqueue_script( 'jquery-ui','http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js');

Note: smoothness here is a style name. All style names you can find here: http://jqueryui.com/themeroller/

To add tabs to a single.php you should create:
<div id="tabs">
    <ul>
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>
    <div id="tabs-1">
        <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. </p>
    </div>
    <div id="tabs-2">
        <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. </p>
    </div>
    <div id="tabs-3">
        <p>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
        <p>Duis cursus. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
    </div>
</div>

Then call script:

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

Do the same for accordions:

<div id="accordion">
    <h3><a href="#">Section 1</a></h3>
    <div>
        <p>
        Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
        ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
        amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
        odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
        </p>
    </div>
    <h3><a href="#">Section 2</a></h3>
    <div>
        <p>
        Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
        purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
        velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
        suscipit faucibus urna.
        </p>
    </div>
    <h3><a href="#">Section 3</a></h3>
    <div>
        <p>
        Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
        Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
        ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
        lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
        </p>
        <ul>
            <li>List item one</li>
            <li>List item two</li>
            <li>List item three</li>
        </ul>
    </div>
    <h3><a href="#">Section 4</a></h3>
    <div>
        <p>
        Cras dictum. Pellentesque habitant morbi tristique senectus et netus
        et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
        faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
        mauris vel est.
        </p>
        <p>
        Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
        Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.
        </p>
    </div>
</div>
<script>
    jQuery(function() {
        jQuery( "#accordion" ).accordion();
    });
</script>

If you’re not feeling up to the task of making these manual changes, you can also download our free tabs and accordions plugin for WordPress. Important: Our plugin allows to create not only Tabs and Accordions but also Toggles and Horizontal Accordions!

Leave a Reply

Captcha Captcha Reload

manahewp

Free Newsletter

Opt-in to benefit from our monthly WordPress Tips, Tricks & Hacks newsletter and get FREE gifts:

  • Our coming soon themes info
  • 101 WP Power Tips (Video)
  • Advanced WP Tips (eBook)

Club Members Say

I really look forward to the release of each new theme. With such an intuitive and interactive back end, customizations are a breeze. My favorite: the color schemes, of course!

Carolyn Moore

As a Best Selling Author and International Therapist my website has become a key to running my busy offices in Sydney, London and New York. I purchased the THETHE Marketing theme as it appeared to be the best one for my practice. During that time my team have needed help with several items and indeed the list began to grow as our people were not that familiar with code.

The technical support, back up and service that we required meant that the staff at THETHE went out of their way to help us. They have been the very best technical support team I have experienced since the Internet arrived... and I have owned many websites over the years and these guys are brilliant.

Every time we contacted them they were there to offer assistance and advice.Thank you guys your service and expertise is remarkable.

Dr Patrick McNally PhD
Author and Philosopher

Testimonials


 


 

Recent Comments

Subscribe to WP Tips & Hacks Newsletter