Tabs Tutorial

Creating Tabs with HTML, CSS & jQuery

Intro

Creating a tabbed component is actually a simple task, although it may not seem it at first and obviously depends on your level of skill. The difficulty also depends on how advanced you want your tabs to be, but for the sake of this tutorial, let’s keep it simple.

Tabs are a very nice way of grouping lots of content into a very small space. Think of tabs like the TARDIS…bigger on the inside.

You might also like: Creating an Accordion with HTML, CSS & jQuery.

Table of Contents

  1. Skip to the HTML
  2. Skip to the CSS
  3. Skip to the jQuery

1 The HTML

Completed Code (HTML)

I go into detail on the specifics of the HTML layout below.

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
        <li><a href="#tab3">Tab #3</a></li>
        <li><a href="#tab4">Tab #4</a></li>
    </ul>

    <div class="tab-content">
        <div id="tab1" class="tab active">
            <p>Tab #1 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
        </div>

        <div id="tab2" class="tab">
            <p>Tab #2 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

        <div id="tab3" class="tab">
            <p>Tab #3 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
        </div>

        <div id="tab4" class="tab">
            <p>Tab #4 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>
    </div>
</div>

Tab Links

Starting off there’s a div with class="tabs". Inside there’s an un-ordered list, (or an ordered one if you like, it makes no difference to this tutorial), with class="tab-links". Inside the list items there are anchor links. The first list item is marked as class="active". This indicates where to start the tabs.

Note: When the CSS is all done, the tab link parent with class="active" will be the highlighted one on page load.

<div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
        <li><a href="#tab3">Tab #3</a></li>
        <li><a href="#tab4">Tab #4</a></li>
    </ul>
</div>

Tab Content

There’s a div with class="tab-content". Inside that we have 4 divs, each with class="tab", (this number corresponds to how many tab links there are). The currently visible tab will also need an active class, e.g. class="tab active".

<div class="tab-content">
    <div id="tab1" class="tab active">
        <p>Tab #1 content goes here!</p>
        <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa         interdum risus ornare mollis.</p>
    </div>

    <div id="tab2" class="tab">
        <p>Tab #2 content goes here!</p>
        <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
    </div>

    <div id="tab3" class="tab">
        <p>Tab #3 content goes here!</p>
        <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
    </div>

    <div id="tab4" class="tab">
        <p>Tab #4 content goes here!</p>
        <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
    </div>
</div>

2 The CSS

I’m going to keep it simple with basic CSS (as opposed to an SCSS pre-processor like Sass, Less or Stylus). The bulk of this tutorial is aimed at beginners, so I’m taking that into account.

Completed Code (CSS)

I go into detail on the specifics of the CSS styling below.

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}

    /*----- Tab Links -----*/
    /* Clearfix */
    .tab-links:after {
        display:block;
        clear:both;
        content:'';
    }

    .tab-links li {
        margin:0px 5px;
        float:left;
        list-style:none;
    }

        .tab-links a {
            padding:9px 15px;
            display:inline-block;
            border-radius:3px 3px 0px 0px;
            background:#7FB5DA;
            font-size:16px;
            font-weight:600;
            color:#4c4c4c;
            transition:all linear 0.15s;
        }

        .tab-links a:hover {
            background:#a7cce5;
            text-decoration:none;
        }

    li.active a, li.active a:hover {
        background:#fff;
        color:#4c4c4c;
    }

    /*----- Content of Tabs -----*/
    .tab-content {
        padding:15px;
        border-radius:3px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background:#fff;
    }

        .tab {
            display:none;
        }

        .tab.active {
            display:block;
        }

Tabs Container

The display:inline-block; part adds a type of clearfix while also making it more ‘stable’ than if we used display:block;.

The reason we use a clearfix above yet not here is as follows: display:inline-block; sometimes adds 7px-ish of margin below the affected element with no way of removing it. Sometimes using a minus bottom margin works, but it depends heavily how your HTML is structured. In this instance it’s fine.

/*----- Tabs -----*/
.tabs {
    width:100%;
    display:inline-block;
}

Tab Link Wrappers

We declare no list-style to stop it appearing as a default list. Then the margin so the links are spaced evenly apart, (using margin:0px 5px; is the same as using margin:0px 5px 0px 5px;).

.tab-links li {
    margin:0px 5px;
    float:left;
    list-style:none;
}

Tab Links

These are all basic styles which you should understand if you’re attempting this tutorial. If you don’t, please find the proper values and the definitions for each on the CSS-Tricks Almanac.

You may be wondering why I’ve used transition:all linear 0.15s; instead of transition:background linear 0.15s;. The reason is simple, in my experience you have to think ahead. If you don’t then nasty, (sometimes hard to fix), bugs pop-up seemingly out of nowhere. By using background instead of all, we’d be limiting what can be transitioned on the :hover effect. Since this is a tutorial, many of you may want to change the text color on hover. By using all instead of background that makes it possible.

    .tab-links a {
        padding:9px 15px;
        display:inline-block;
        border-radius:3px 3px 0px 0px;
        background:#7FB5DA;
        font-size:16px;
        font-weight:600;
        color:#4c4c4c;
        transition:all linear 0.15s;
    }

    .tab-links a:hover {
        background:#a7cce5;
        text-decoration:none;
    }

li.active a, li.active a:hover {
    background:#fff;
    color:#4c4c4c;
}

Tab Content

This is the background of the tab content section.

/*----- Content of Tabs -----*/
.tab-content {
    padding:15px;
    border-radius:3px;
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
    background:#fff;
}

Non-Active/Active Tab Content

We set all tabs to display:none; which hides them. Then we set the active tab to display:block; so ONLY that one will show up. It’s a simple case of using CSS the way it was designed, which was to cascade down. Hence the name, Cascading Stylesheets.

.tab {
    display:none;
}

.tab.active {
    display:block;
}

3 The jQuery

Below you can see the completed jQuery code. Keep scrolling for a good explanation of how it all works and what it all means.

Let me clarify something before we start: Everyone has their own way of coding, with jQuery this is mine. Writing it out like this makes it easier for a beginner to grasp, it’s also efficient.

Completed Code (jQuery)

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});

Basic Setup

You have to start by checking if the document is ready, for this we use:

jQuery(document).ready(function() {
    // Code Here
});

Next is to check if the user has clicked on a tab, to do that we simply reference every link that happens to be a tab link with .tab-links a.

jQuery('.tab-links a').on('click', function(e)  {
    // More Code Here
});

Dynamic Variable

Next we create a variable called currentAttrValue, (current attribute value), which grabs the href="" of the clicked anchor link.

var currentAttrValue = jQuery(this).attr('href');

Match Anchor Link to Div #ID

We need a way of matching up the .tab-link achors with .tab sections. We start off by referring to the entire tabs component, with .tabs, then we say “If .tabs has a child with an #id that then matches a .tab-link href="", then they should be linked up”.

Then we say “Show the element with the referenced #id, such as #tab2, then find the other tabs, which are siblings of #tab2, and hide them”.

jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

Giving The Tab Link an Active State

Changing the active state of the tab link is relatively the same as showing/hiding the tab content.

First we look for jQuery(this), which is the current anchor link being clicked. Then we find it’s parent list item with .parent('li') tag. After that we give that parent list item a class of .active by using .addClass('active'). Lastly we find all siblings of that parent list item and remove, if any, classes of .active by using .siblings().removeClass('active').

jQuery(this).parent('li').addClass('active').siblings().removeClass('active');

Prevent Default Anchor Link Behaviour

You may notice that when you click an anchor link with an #id specified instead of an actual URL, it tends to add the #id into the address bar. E.G. http://sebkay.com becomes http://sebkay.com#id. This can be a massive pain-point for users when trying to click the back button.

To get past that UX problem we use:

e.preventDefault();

This handy little function stops the default action of the clicked element from happening.

Remember when we put that function(e) in the start of our click event? Well this is where that ties in.


Extra Credit: jQuery Animations

You may not like the way it just jumps to the new tab content without any nice animation of any kind, well here’s some extra credit.

To apply these changes simply replace the below snippet with the other code snippets that follow.

Default

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).show().siblings().hide();

Fade

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).fadeIn(400).siblings().hide();

Slide 1

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).siblings().slideUp(400);
jQuery('.tabs ' + currentAttrValue).delay(400).slideDown(400);

Slide 2

// Show/Hide Tabs
jQuery('.tabs ' + currentAttrValue).slideDown(400).siblings().slideUp(400);

Conclusion

If you’re reading this conclusion, (most people, including me, tend to leave after they’ve got the code they were after), then please leave a comment below with any problems or bugs regarding this tutorial. I’m writing this to help people learn and become the best they can be.

I hope you’ve enjoyed this tutorial. Many more are on the way from the new Inspirational Pixels!


Author: Seb Kay

I’m a freelance web designer and WordPress developer. I created Inspirational Pixels. I like exercise, movies and games.

Follow me: Twitter | Google+ | Instagram | Dribbble

Leave a Comment

Markdown is enabled for comments!

Comments (Leave a Comment)

pranao walekar

your tutorial was really helpful.
Thanks!

Razvan

Thank you for sharing this code

Alez

Great job,
The only problem is when one tab is longer (height is bigger) than another, then switching causes the content to “jump” (especially of you have something below the tab).
I haven’t been able to find a good solution to this (other than making the tabs the same size with javascript every time the window resizes)

Ivan

Thank you for sharing! Great job! Thank you!

Nir

Hi Seb.

First of all, thanks for the tutorial! Much appreciated. I wonder if you could help me out though, because I’m having trouble – I’ve added two script tags in the head, one pointing to Google’s JQuery and one for the local tabs.js file. Inspecting my website (which is local, otherwise I would’ve linked it here) and following the links shows they’re written properly.

In any case, I can’t get this to work. I’m a novice, so I’ve probably messed up somewhere silly. Here’s the JSFiddle: http://jsfiddle.net/ad2rcncp/

Thanks!

    Seb Kay

    Here is the working code: http://jsfiddle.net/ad2rcncp/1/

    The problem was that the wrapping “tabs” was an ID but should be a class.

      Nir

      Thanks Seb! I must have gone through the code a hundred times, it keeps amazing me how little things mess up code so easily. Finally was able to catch it by myself since posting the question, but I sincerely appreciate your answer :) Thanks again!

John

Brilliant for my website! How do you ‘stack’ tabs on top of each other if you have many of them? I have nine items across a fairly narrow page so the tabs will need to be on two levels.

Jamell Daniels

Hey the code isn’t working. I can see the tabs but they all show the same thing, plus my text appeared to the far right instead underneath. Can you please help? I’m trying to do a school project.

    Seb Kay

    Hey Jamell,

    Can you post your code to JSFiddle so I can take a look for you?

      Jamell Daniels

      http://jsfiddle.net/vsLbz859/ here is the link

      Seb Kay

      Hi Jamell,

      Here is the working code.

      The problem was adding a # at the start of the div ID’s in the HTML.

      Have a great day!

      Jamell

      Hey Seb, Thanks it workds on JSFiddle, but for some reason not my own computer. I’m using Dreamweaver to code up my project, is there something I’m missing? Perhaps a JS library or something? I’ve tried adding some but it didn’t work.

      Seb Kay

      Have you included jQuery (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js) before the tabs.js script?

Andreas

So many thanks! Helped me a whole lot! Got some working Tabs now, and it took me less time than some much less impressive things

:))

Nate

Is it possible to change the tabs from an external jQuery function? I am working on a WordPress theme, with post formats, and I want to have different settings for when the radio button is selected. So, selecting “Link” as the post format, for example, will open the “Link” tab in this tutorial so I can add the appropriate settings, or selecting “Audio” would open the “Audio” tab.

Ra Su

Thanks!

Eric

Hey Seb,

Thanks for this tutorial!

I have a question regarding the tabs. For some reason, on my site, whenever I click a tab, the url I’m at becomes __________.html#tab2 or 3 or 4 depending on what tab I’m clicking. This obviously doesn’t happen in your demo, which is a constant fluid url. Am I doing something wrong or is something else on my site conflicting with the code?

Would also love how to make anchor links never show up in general if you happen to have some insight in to that. Please let me know if I can provide any further information and thank you so much for the help!

    Eric

    I figured out that it was my smoothscroll code that was screwing with it, I’m a complete noob at javascript so I don’t exactly know why it does this. Do you happen to have any insight? Still trying to learn and any pointers would be appreciated :)

    Code I’m using for smoothscroll can be found here: http://www.kryogenix.org/code/browser/smoothscroll/smoothscroll.js

    Thanks!

santos

Is it okay for me to use your code for my website or is this just for tutorial purpose? I don’t want to copy your work without your permission.

    Seb Kay

    You can use the code however you like, personal AND commercial :-)

Ollie

Hey, the code is fully working and I must say, brilliant.

I have only one problem, it doesn’t seem to work in IE at all and there are no CSS transitions so -webkit etc is out of the question as a solution.

I’m unsure but I believe the Jquery doesn’t work on IE?

Or is there a simple solution which will make me feel like an idiot?

Thanks in advance :)

    Seb Kay

    How are you testing it in IE? If you’re using IE tester that may be the problem. IE tester doesn’t play well with JavaScript.

      Ollie

      Here is your code running on IE using localhost

      Here I have attached a print screen link which shows your code running on IE/localhost

      (if this comment software lets me)

      http://prntscr.com/4jb9ql

      Seb Kay

      It looks as if the CSS isn’t being loaded from what I can see. Try putting it up on a server to test as it may be a localhost problem in IE.

shannon

Hi Seb,

Great tutorial.
I ponder can you point me to another of your tutorials that may help me further.
I want to have tabs like you have set up.
Tab1 Tab2 Tab3 Tab4

But when someone clicks the tab, i am trying to load a php page and wrap it all within a form submit

MyForm
Applicant(Tab1)
(load) Applicant.php
Submit
Employer(Tab2)
(load) Employer.php
Submit
/MyForm

    Seb Kay

    I think your request is a little past what this tutorial is for. However I’ll have a look and see how easy it’ll be to change the current code to accomodate your request.

nigel

same as what you did to your previous help to someone

http://jsfiddle.net/niah/c10gqqdz/17/

    Seb Kay

    Hi Nigel, here is a working example: http://jsfiddle.net/c10gqqdz/28/

    The problem was your inclusion of jQuery. Try loading it from Google: http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

mwaride

I have a problem, tabs see to change when selected, but the content displayed is the content of the first tab! Please help

Much appreciation for the tutorial mr.

    Seb Kay

    Can you post a http://jsfiddle.net/ of you code for me to look at?

      Hai

      Tks much Seb Kay but I have the same problem like Mwaride: “tabs see to change when selected, but the content displayed is the content of the first tab!”

      Look like Script not work. When I click tab2, no change content and the link is http://vipreal.blogspot.com…..html#tab2. I do many times but… Please help me. Tks much.

shayan

where to find the js files????

    Seb Kay

    There currently isn’t a download but you can copy the code from the tutorial :-)

Borek Hanzl

Thank you for the nice tutorial, few suggestions though:
In the jquery code you can use “return false;” instead of “e.preventDefault();” for the same result.
Also, it might be more useful if you specify the css values in relative size rather than “px”, for example “em”.

Aravind

The tab3 remains a different color throughout the process…

Malli

Thanks for the good tutorial !!!..

NetIntel

thanks for the article, just what i need.

Andre Bueno

Great! Exactly what I need!

Thanks for sharing this!

Shahbaz Ahmed Bhatti

Where is Download Link

    Seb Kay

    There isn’t one yet but I’ll try and add one soon.

Brett

Hi,

Thanks for this tutorial. Question for you…is there a way to put a link inside the tab content div that says “Next Tab” and would behave in the same way as the tabs? If so, how would you code that link? I’ve tried Next tab but that is not working. Thanks for any help you can provide!

    Seb Kay

    The easiest way would most likely be to have a separate piece of jQuery that hides all tabs then shows the one you linked to. Did you want me to work up a jsFiddle for you to look at?

Larry

Great tuts! Thanks a lot for sharing it.

Jeff

This is fantastic! Written and layed out very well. I only had one problem that you may or may not want to address. I am a novice, so it took me a while to realize that “jQuery(‘.tabs ‘ + currentAttrValue).show().siblings().hide();” required the content div to be inside (child of) the tab div. In order for me to properly slice and impliment the .psd I was given, I needed my tabs and content to be in different divs. Maybe add a sentence saying to change what is inside of the ‘.tabs ‘ if the content is not a child?

Again, this was a great tutorial!

    Seb Kay

    Thanks for the suggestion Jeff. I’ll try to revise some of the post at some point this week and make it a little clearer. I’m also taking what you said into account for future tutorials as well.

Joe

Hi Seb

Thanks for the codes. It works like a charm and responsive to. Much appreciated.
Any chance you could tell me how to use/link an image for the tabs background and hover?

Joe

    Seb Kay

    It should just be a case of using a CSS background image. Let me konw if you need help with the code and I’ll make a JSFiddle for you.

koonal

Thank you brother it really helped.

Donald Moore

I need help this is my jsfiddle – http://jsfiddle.net/herbal8488/5hcfmque/1/. I used this coding as my frame work for what I want to do but for some reason when you select the third tab the links above it as well as the background disappear… Did i do something wrong with the coding?

if that link above does work try this – http://jsfiddle.net/herbal8488/5hcfmque/1/embedded/result/

I would greatly like a response to help me figure this out. I’ve pouring over it to see what I dd wrong and I cannot see it.

    Seb Kay

    Hi Donald,

    Here is the working code http://jsfiddle.net/SebKay/5hcfmque/2/

    The problem was an unclosed div somewhere in your code which was causing a few nesting issues. Let me know if you need anything else.

      Donald Moore

      Thank you so much.
      It’s been a very long since I’ve done web design and even then I didn’t handle with javascript or css, just basic html coding and with a start of a new business I’m trying to relearn the process and learn the other features.

      Either way it works and a appreciate your assistance!

Lisa | Sweet 2 Eat Baking

Hi Seb, These CSS tabs are just what I’m looking for as I have a detailed review post coming up shortly and I’d like to break it into tabs. However, I’ve copied and pasted all of the HTML, CSS and JQuery code into a test part of my site before it goes live as I’m having problems. It’s not working for me at all. Maybe I’m missing something?

Here’s the link to where it’s at temporarily: http://www.sweet2eatbaking.com/tabs/index.html

The html file is basic with just the HTML coding. The CSS is linked up via a separate style sheet (as that’s where the code will be, later), and it didn’t state in the tutorial what to name to jquery file, but I took a lot at the demo page source code and it seemed to be named ‘tabs.js’ so I named it that. However, clicking on the tabs does nothing.

If you could take a peek at the following url and let me know where I’ve gone wrong, that would be wonderful. Thanks again Seb, I appreciate these kind of tutorials.

    Seb Kay

    Hi Lisa, the problem is that you need to link to a recent version of jQuery like so: //ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

    Then link to the tabs file below the jQuery like so: tabs.js

    Please note that you must include these files in the header.

    Let me know you need anything else!

      Lisa | Sweet 2 Eat Baking

      Wonderful. Thanks Seb. Got it working great now.

      Just one more Q though. As I said before, I’m intending on doing a detailed review using these tabs for specs on the product. The review will be on a WordPress blog using the Genesis framework and a custom child theme.

      I understand that I can easily add the css to my child theme’s stylesheet, and I could add the other header parts to my genesis theme header, but was wondering if there was a way around that on a WordPress.org blog?

      If I add the header code and leave it there permanently will it interfere with any aspects of the already present jquery at all? Also wondering if it will reduce page load times on the blog too if the tabs is only present on just a few sporadic review posts?

      Thanks again for your help.

      Seb Kay

      As far as I know you’re best adding it to your theme directly into your files. You may want to consider a PHP conditional tag to only display the code when on a single post.

      Even if you add it to the header it shpuldn’t interfer with anything. To make sure you could change the CSS classes of the tabs to something more specific, that way the jQuery will only affect those tabs.

      The performance hit would be very minimal but it is best practice to use a conditional PHP tag to only display the tabs.js file on post pages. Something like this should do:

      if(is_single()) {
          // Include the JS file here
      }
      

      Derek

      I am having a similar problem. Would you be able to take a look at my site and help me out? I am using the tabbing in the Resume portion of the site for now.

      http://derekmacdonaldtools.net/#resume

      I tried to move the jquery import into the head as you stated, but my tabs still don’t change. I copy pasted the css and jquery into their own files, the css looks good, I think the main problem is the jquery, but I am relatively new to jquery.

      Seb Kay

      Hey Derek,

      I’ve checked your site and tabs seem to be changing fine. Are you still having problems?

1 4 5 6

Pingbacks

jQuery / jQuery-UI Tabs Will Not Show New Content

[…] in advance for any help you can offer! I am using the example posted here as a proof of concept on my website page, which is located here. I am using “Use Google […]