Project Assignment 1: Create a T

This is a simple tab project. The original code can be found in Code Pen

Screen Shot 2017-01-07 at 7.41.25 PM.png

Let's start from HTML structure. Instead of traditional ul, li list, I use radio type of input to switch between tabs.

<div id='tabComponent'>
  <div class='tabComponent'>
    <input type="radio" id='homeDec' name='tab' />
    <label for="homeDec">Home Dector</label>
    <div class='content'>Browse through our list of Home Decor Items</div>
  </div>
  <div class='tabComponent'>
    <input type="radio" id='furniture' name='tab' />
    <label for="furniture">Furniture</label>
    <div class='content'>Flash Sale on Living Room and Bedroom Furniture</div>
  </div>
  <div class='tabComponent'>
    <input type="radio" id='kitchen' name='tab' />
    <label for="kitchen">Kitchen</label>
    <div class='content'>Bring the best out of the masterchef in you!!</div>
  </div>
  <div class='tabComponent'>
    <input type="radio" id='clearance' name='tab' />
    <label for="clearance">Clearance</label>
    <div class='content'>Red hot deals at affordable prices. Check out our clearance section for more details.</div>
  </div>
</div>

From the above example, we can see that all HTML code is included in a div with id=tabComponent. We can treat every tab along with its content as one whole set, so every tabComponent` class will be displayed when we click on one tab. Let's take a look at one tab for example:

<div class='tabComponent'>
    <input type="radio" id='homeDec' name='tab' />
    <label for="homeDec">Home Dector</label>
    <div class='content'>Browse through our list of Home Decor Items</div>
</div>

Firstly, there is a radio input, so we can check the radio to select one tab. After input tag, we have a label to show as tag info. Following label tag, there is a content div. One thing needs to be mentioned is that name attributes in input tag, all the tab should have a same name so that they can switch between each other.

Okay. It is time for us to take a look at our CSS file.

#tabComponent {
  margin: 25px 0;
  min-height: 200px;
  clear: both;
  position: relative;
}

div.tabComponent {
  float: left;
}

div.tabComponent [type=radio] {
  display: none;
}

div.tabComponent label {
  padding: 10px;
  background: #eee;
  border: 1px solid #ccc;
}

div.tabComponent .content {
  position: absolute;
  left: 0;
  top: 28px;
  bottom: 0;
  right: 0;
  background: #fff;
  padding: 20px;
  border: 1px solid #ccc;
}

[type=radio]:checked ~ label {
  background: #000;
  color: #fff;
  border: 1px solid #fff;
}

[type=radio]:checked ~ .content {
  z-index: 2;
}

Forget about CSS styling for now. Let's look at some basic functions for tabs. Firstly, we need to float all the label tabs, so they can be on the same line. display: none; line is aim to hide the radio check circle. Please pay attention to the .content class, because we need all content share the same space so they need to be placed in the same place. Here we use position: absolute to fulfill our needs. Do not forget to give background: #fff;, otherwise, the extra length of the content will be shown.

How we click on one tab and let the according content shows up? Okay, here goes our important rules.

[type=radio]:checked ~ .content {
  z-index: 2;
}

From the code above, we let input be checked every time and then we select the checked input's content, we set it z-index:2; so it will be on top of others.

I hope this will help someone in need. =) Happy Coding~