Tabs Tutorial

Creating Tabs with HTML, CSS & jQuery

Update! I’ve just updated this tutorial to work with the latest version of jQuery (1.11.1). Let me know if you have any questions or problems below! Intro Creating a tabbed...

Update!

I’ve just updated this tutorial to work with the latest version of jQuery (1.11.1). Let me know if you have any questions or problems below!


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.

  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!

Leave a Comment

180 Comments (Leave a Comment)

Guillermo Perez

“Thank you!, excellent job!

SHATEL

very very very good…
thanks.

Twinkle Star

hi there! i tried working on tabs using your tutorial. but i think the jquery is not working.
nothing happens when i click any of the tabs. i don’t know where im doing here. below is a portion of my code:

on my header, i have written this:

and on my body:

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

// Show/Hide Tabs
$m(‘.tabs’ + currentAttrValue).slideDown(400).siblings().slideUp(400);

// Change/remove current tab to active
$m(this).parent(‘li’).addClass(‘active’).siblings().removeClass(‘active’);

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

i followed the html as written on the tutorial.
please advise me how to fix this. thanks.

    Twinkle Star

    also, i find this error on Chrome:
    Uncaught TypeError: undefined is not a function and it pointed to this line:
    $(‘.tabs .tab-links a’).on(‘click’, function(e)

    same when i tried inspecting element in firefox.

      Seb Kay

      Hi, the code in this tutorial only works with jQuery 1.10.1. If you’re using the latest version write

      jQuery(some code)

      instead of

      $(some code)

      .

      I’ll update the tutorial now for future reference.

Jordi

Seb, you did it! You helped me learn and become the best I can be (still working on this :) This is a great tutorial. Thank you for sharing Seb.

Ahmed Salim

Great Article

I have Simple Question For Arabic Language We Always Use Direction From Right To Left can You Advise Me To Do That

    Seb Kay

    Hi Ahmed,
    I haven’t got much experience with Arabic language in web design, however I found those 2 articles that might help:

    - http://viget.com/flourish/designing-for-rtl-languages-the-basics
    - http://demosthenes.info/blog/88/Using-Arabic-Hebrew-and-Other-Right-To-Left-Languages-In-Web-Pages

    They seem to have a good idea on the pricipals of designing/developing for Arabic language. Hope this helps.

Zy

Hi Seb,

Been wanting to apply this tab but on a vertical display. What CSS should I change based from the top?

    Seb Kay

    It shouldn’t be too difficult. I’ll give it a try and post a jsFiddle within the next day or two for you :-)

Cate

Hi Seb,
Thanks for your tutorial, I am having the same problem as everyone else with the tabs not changing and I have tried all of the solutions you have previously posted and none of them work. I have uploaded my code to JSFiddle. Have you got time to have a look? http://jsfiddle.net/P2Swf/
Thank you so much in advance!
Congratulations on your wedding!
Cate

    Seb Kay

    Hi Cate,

    Thanks for the congrats!

    To solve your problem simply change the first part of the jquery to this

    $(' .tab-links a ')

    . Let me know if this solves your problem.

      Cate

      Hi Seb,

      Thanks for getting back to me so quickly :)
      Your fix didn’t work :( (I wish it had!). Any other suggestions would be great…

      I am just a beginner with all this jquery stuff too and even though this particular code isn’t working at the moment I’ve been using your tutorial to add other jquery elements to my site – so thank you :)

      Cate

      Seb Kay

      If it’s still not working then I’m pretty sure the reference to jQuery is somehow the problem. On jsFiddle you have to set the jQuery version in the sidebar. Can you try referencing jQuery from here

      http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js

      Let me know how you get on.

      Cate

      Hi Seb,
      IT WORKS :)
      You gave me a clue that I was missing a file. I wasn’t sure what you meant by “I have set the jquery version in the sidebar” (I am a really new beginner) but I cut and paste the code from the link you included and saved it as a .js file in my website folder and added the file to the head of my code and then it worked. There’s nowehere to ‘download’ any files and no reference (that I understood) that I needed extra info. This has been a steep learning curve for me and I appreciate your time and patience in explaining things to me and helping me out.
      Thank you!
      Cate

    Beto

    Hi Cate and Seb,
    Did you really fixed the problem with no changing tabs?
    I alreaddy did all fixes that you had (I have the same), but is not still working.

    I have the HTML, CSS and Js same as yours, but I don’t really know whats going on.

    Thanks!!!

      Seb Kay

      Can you post your code to http://jsfiddle.net? I’d be more than happy to take a look for you :-)

obi-wayne

Hello,

Nice tutorial up there. As a beginner I got most of the stuff that you explained. My question is, can I use only the HTML and CSS codes to work more on them? I mean can I just leave the jQuery part, because I’m yet to learn the basics of jQuery. You see I’m trying to create this interface that’ll have multiple tabs with multiple textboxes in them. Now the questions I had for creating the tabs, you pretty much cleared those out. Will knock you later if I face any problems. Can you please tell me a bit on how can I play with textboxes in each of my tab contents? I mean since I’m a beginner, I don’t know much on the positioning and padding/margin stuff. Maybe a bit on the designing of the textboxes too if you can.

Thanks!

    Seb Kay

    Hi obi-wayne,

    I don’t really understand your question. Did you mean you want help with general CSS styling?

Indraja

thank you for lovey explanation on this… the demo seems enough for basic learning… :D thanks.

Jan Hof

Thanks for this elegant solution and clear explanation. It was very usefull for me. And a bonus is that I donĀ“t need an extra plugin for tabs on a webpage.

Felix

Hi Seb,
I have only been coding in really basic html for a day. I have tried to make the background colour of the tabs different from one another so one green one purple and so on. Could you please help me do this.
Thanks Felix :)

    Seb Kay

    Hi Felix, my apologies for the late reply. I got married in the week and time just seemed to dissapear.

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

sarah

Hi Seb – fantastic tutorial, thanks! Your tab solution is one of the best out there.

Harmony

Hi Seb,

I’m super new to CSS and jQuery (like virtually no knowledge). I’ve done some research and I’m being told I need to paste the jQuery in the header.php file in between the header and meta tag. When I just copy and paste your code from above, all of a sudden all this weird wording shows in my header on the website. I’m sure I’m doing something obvious wrong. Any guidance for a newby like me? Thanks so much!!

    Seb Kay

    Hi Harmony, I would advise against putting your jQuery in the header. It’s perfectly ok to do so but in practice it makes it easier to manage you code when it’s in separate files. HTML, CSS and jQuery all separate.

    If you go to http://inspirationalpixels.com/wp-content/themes/inspirational-pixels-v6/assets/js/custom.jquery.js (which is the jQuery used on this site), you’ll see there isn’t much there when you take away the comments. This is because in the future I may want to add more code/features.

    Another reason to put your code in separate files is so you can just have one piece of code (which is in the separate file), otherwise on a large site you’ll be updating loads of different pages just to fix a spelling error.

      Harmony

      Thank you so much for the advice. Really stupid question, I’m sure, but how do I create a separate file? I’ve searched this too, and am not seeming to come up with an answer. Thank you for your help!!

      Seb Kay

      It’s not a stupid question at all :-)

      You need to add your code to a separate file with a .js extension. Then link to it like so

      <script src="PATH-TO-FILE.js"></script>

Harmony

Oh! Nicole E, I figured it out!! See where I’ve got the -55px? That makes the tabs go left and align with the content box. Where I have 45px is where you can change the distance between tabs. 45px leavs just a very small gap between :-) Only took me an hour to figure out, LOL

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

.tab-links a {
padding:7px 40px;
display:inline-block;
border-radius:10px 10px 0px 0px;
background:#aaaaaa;
font-size:16px;
font-weight:600;
color:#4c4c4c;
transition:all linear 0.15s;
text-decoration:none;
margin:-15px 0px 0px -55px;
}

Harmony

This was really great, thanks! Similar to Nicole, I can’t figure out how to get rid of the gap before the first tab and left edge of my page. Any guidance would be awesome thanks.

Nicole, you can control the gap between the tabs by changing the number 20px below. However, a small gap is still left, they aren’t completely flush against each other, but it helps :-)

}

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

Nicole E.

The tabs work except there is a gap between the tab links and the content. I tried playing with the padding and margins, but it didn’t seem to work. Do you know how I can get rid of this gap?

    Seb Kay

    Hi Nicole, is it possible to create a http://jsfiddle.net of your problem? If not then I’d suggest using the web inspector (both Chrome and Firefox have one). Just right click on the tab links and choose “Inspect Element” or something similar. That will show you any paddings and margin being applied.

    Harmony

    See me responses up top which I think will help Nicole :-)

      Seb Kay

      Thank you for your help. This solution also works.

      Community FTW! :-)

    Seb Kay

    Sorry I didn’t notice the link :-P

    Here it is fixed: http://jsfiddle.net/BxR3E/19/

    The problem was the default ul having margin as well as the link parents (li).

Paul

Nice, thanks for sharing!

Johan

Awesome tutorial, and great results.

I would like to ask if it is possible to link directly to one of the tabs from another page, something like “page.html#tab2″ ?

    Seb Kay

    As far as I can tell it would require a little extra coding. If I have the time I’ll try and work up a JSFiddle of this functionality.

Nicole

I put my code into JSFiddle and it works perfectly fine, but when I put it in my website, the tabs don’t seem to switch. I don’t think it’s linking the tabs. Instead it’s just doing ‘www.url.com/#tab4′.

    Nicole

    I have fixed it, thank you for the tutorial. My jQuery references needed to be fixed, so it wasn’t doing the jQuery code correctly.

Ivan Y

very helpful tutorial. thanks.

for the javascript, it only works for me with :

$(‘.tab-content ‘ + currentAttrValue).show().siblings().hide();

vinayak

Hi seb,
I copied the code that you fixed in:http://jsfiddle.net/HrC4j/2/ but the tabs are not switching can u help me out pls?

    Seb Kay

    It looks as though the tabs are changing but because it’s at the bottom of the JSFiddle the page is scrolling up when the tabs change so you can’t actually see that they’ve changed :-)

Dennis

Hey, thanks for this tutorial, it’s great. Although I was wondering if you knew a way to not change the active tab when the page reloads (ex. submitting a form). So far I’ve tried something like this with jQuery: http://jsfiddle.net/7rA9d/ (just the javascript that’s abit different in my example otherwise your html/css). Would be awesome if you had an idea otherwise thanks for the tutorial! (just linked to jsfiddle for the code, don’t think the update process will work there)

    Seb Kay

    For submitting a form your best bet is to submit it with Ajax.

    Here is a good place to start with Ajax (if you’re brand new to it). It’s a little old but still worth watching: http://blog.themeforest.net/tutorials/jquery-for-absolute-beginners-day-10/ and here’s the whole series of videos: http://code.tutsplus.com/articles/jquery-for-absolute-beginners-the-complete-series–net-2134

Timmy

Please i have used your above code but the tabs still does not switch. It remains on active #tab1. What could be the possible cause. I enclosed the jquery code in …Thanks Plus You Doing a great Job helping people like me out..

    Seb Kay

    Can you please post your code to http://jsfiddle.net for to look at?

Dan

Hi Seb,

I copied eveything onto JSFiddle but it is not working on my files, i copied the exact same thing. Is there a need to include a jquery extension?

    Seb Kay

    Hi Dan,

    In the sidebar to the left you have to select the version of jQuery (in this case 1.10.1). Can you send me a link? If so I’ll take a look for you.

Tricia

This really REALLY helped me out. I was using jquery ui tabs, but couldn’t get the tabs to animate like I needed them too. The way you broke this down allowed me to build my own – and throw out the the bloat. Thanks so much!

Seb Kay

Hi Swat, Rahul and Frank,

I’ll take a look later today and let you know :-)

Frank

I am having the same problem as Swat and Rahul. Any news on a fix?

    Seb Kay

    Hey Frank, I’ve just fixed the problem. Can you post a http://jsfiddle.net of your problem if the solution I posted for Rahul doen’t work for you?

    Here’s the link to his jsFiddle that I fixed: http://jsfiddle.net/HrC4j/2/

1 3 4 5