Tabbing Like Stackoverflow
Tags: html, css, javascript, tutorial
Published: 2021-02-11 17:21:26

***Hello guys in this tutorial we will create tabbing like Stackoverflow using Html CSS And jQuery***

First we need to create two files **index.html** and **style.css** then we need to do code for it.

###Step:1###
**Add below code inside index.html**
```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Tour Tabbing</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500&family=IBM+Plex+Serif:wght@300;400&display=swap" rel="stylesheet">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="tour-tabbing-outer">
      <div class="container">
        <header><img src="logo.png"></header>
        <div class="tour-tabbing">
          <div class="grid-col-3-6-3">
            <div class="col col-left">
              <ul class="flex-listing">
                <li data-tab="tab1" class="active">
                  <a href="#">
                    <img src="ask-a-question.svg"> Ask a question
                  </a>
                </li>
                 <li data-tab="tab2">
                  <a href="#">
                    <img src="votes.svg"> Vote on everything
                  </a>
                </li>
                 <li data-tab="tab3">
                  <a href="#">
                    <img src="answer.svg"> Answer questions
                  </a>
                </li>
              </ul>
            </div>
            <div class="col col-center">
              <div id="tab1" class="tab-content current">
                <img src="illo-feats-ask.svg">
                <h4>Ask a question publicly on 170+ Stack Exchange sites or privately using Stack Overflow for Teams.</h4>
              </div>

              <div id="tab2" class="tab-content">
                <img src="illo-feats-vote.svg">
                <h4>Upvoting helps exceptional content rise to the top and bring awareness to useful responses.</h4>
              </div>

              <div id="tab3" class="tab-content">
                <img src="illo-feats-answer.svg">
                <h4>Answer a question to share your knowledge with the world or in private with your team.</h4>
              </div>

              <div id="tab4" class="tab-content">
                <img src="illo-feats-tags.svg">
                <h4>Tags help make information searchable and find answers that are important to you.</h4>
              </div>

              <div id="tab5" class="tab-content">
                <img src="illo-feats-accept.svg">
                <h4>Accept the answer which solved your problem to let others benefit from the valuable information.</h4>
              </div>

              <div id="tab6" class="tab-content">
                <img src="illo-feats-recognize.svg">
                <h4>Our reputation system rewards both the new & experienced based on contribution and activity.</h4>
              </div>
            </div>
            <div class="col col-right">
              <ul class="flex-listing">
                <li data-tab="tab4">
                  <a href="#">
                    <img src="tags.svg"> Tag your question
                  </a>
                </li>
                 <li data-tab="tab5">
                  <a href="#">
                    <img src="accept.svg"> Accept an answer
                  </a>
                </li>
                 <li data-tab="tab6">
                  <a href="#">
                    <img src="get-recognized.svg"> Get recognized
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script type="text/javascript">
      $('.flex-listing > li').click(function(){
        var tab_id = $(this).attr('data-tab');

        $('.flex-listing > li').removeClass('active');
        $('.tab-content').removeClass('current');

        $(this).addClass('active');
        $("#"+tab_id).addClass('current');
      });
    </script>
  </body>
</html>
```
###Step:2###
Then we need to add code for ***style.css*** which code i provide in below screen.
```css
* {
    padding: 0;
    margin: 0; 
    color: #242729;
    font-family: 'IBM Plex Sans', serif; 
}
.container {
    width: 95%;
    max-width: 1060px;
    margin: auto;
}
header {
    margin-bottom: 20px;
    text-align: center;
}
header > img {
    max-width: 700px;
    margin: auto;
}
.tour-tabbing-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f1f2f3;
}
.grid-col-3-6-3 {
    display: grid;
    grid-template-columns: 25% 50% 25%;
    align-items: center;
    justify-content: center;
}
.flex-listing {
    list-style: none;
}
.flex-listing > li {
    margin: 20px 0;
    padding: 10px;
    border-radius: 5px;
    position: relative;
}
.flex-listing > li:hover, .flex-listing > li.active {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, .09),
                0 3px 8px rgba(0, 0, 0, .09),
                0 4px 13px rgba(0, 0, 0, .13);
}
.flex-listing > li > a {
    display: flex;
    align-items: center;
    text-decoration: unset;
}
.flex-listing > li > a > img {
    max-width: 50px;
    margin-right: 10px;
}
.col-left .flex-listing > li.active:after,
.col-right .flex-listing > li.active:after {
    content: '';
    position: absolute;
    top: 50%;
    right: -18px;
    width: 16px;
    height: 16px;
    background-color: #fff;
    border: 1px solid #d6d9dc;
    border-left: transparent;
    border-bottom: transparent;
    box-shadow: 2px -2px 8px rgba(59, 64, 69, .1);
    transform: translateY(-50%) translateX(-50%) rotate(45deg);
    transition: all 0.2s;
}
.col-right .flex-listing > li.active:after {
    right: unset;
    left: 0;
    border-left: 1px solid #d6d9dc;
    border-bottom: 1px solid #d6d9dc;
    border-right: transparent;
    border-top: transparent;
    box-shadow: -2px 2px 8px rgba(59, 64, 69, .1);
}
.tab-content h4 {
    font-weight: 500;
    font-size: 20px;
    text-align: center;
}
.tab-content {
    display: none;
}
.tab-content.current {
    display: block;
}
```
###Output:###
###<a href="https://blog.stackfindover.com" rel="dofollow">Free Tutorial With Source Code</a>###
***Click on the above link to want to learn more***
{% youtube nvW4DUDMO50 %}