Tabbed content in HTML and CSS only

[Historical Forums User]

It is my first time writing a question so my apologies for any confusion or mistakes. Do please point them out to me if any.

I am not a HTML nor CSS programmer but have been asked by someone to tinker with a template and add a tabbed content functionality to it. I looked around for examples of tabbed content and found one but need help in changing a few details.

I am trying to achieve something like this shown in the image below:
http://imgur.com/a/2skDI

The codes I am working with are as follows:

HTML

<link href="" rel="stylesheet" type="text/css">
<div class="main">


          <label for="tab1">New York</label>


          <label for="tab2">London</label>


          <label for="tab3">Mumbai</label>


          <label for="tab4">Tokyo</label>

          <div class="content">  
              <div id="content1">
                <p>
                  New York – referred to as New York City or the City of New York to distinguish it from the State of New York, of which it is a part – is the most populous city in the United States and the center of the New York metropolitan area, the premier gateway for legal immigration to the United States and one of the most populous urban agglomerations in the world. A global power city, New York exerts a significant impact upon commerce, finance, media, art, fashion, research, technology, education, and entertainment.
                <p>
                  Home to the headquarters of the United Nations, New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.
                </p>
              </div>

              <div id="content2">
                <p>
                 London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.
                </p>
                <p>
                  London's ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2) mediaeval boundaries and in 2011 had a resident population of 7,375, making it the smallest city in England. Since at least the 19th century, the term London has also referred to the metropolis developed around this core.
                </p>
              </div>

              <div id="content3">
                <p>
                  Mumbai is the capital city of the Indian state of Maharashtra. It is the most populous city in India, most populous metropolitan area in India, and the eighth most populous city in the world, with an estimated city population of 18.4 million and metropolitan area population of 20.7 million as of 2011. Along with the urban areas, including the cities of Navi Mumbai, Thane, Bhiwandi, Kalyan, it is one of the most populous urban regions in the world.
                </p>
                <p>
                  Mumbai lies on the west coast of India and has a deep natural harbour. In 2009, Mumbai was named an alpha world city. It is also the wealthiest city in India, and has the highest GDP of any city in South, West or Central Asia.
                </p>
              </div>

              <div id="content4">
                <p>
                 Tokyo, officially Tokyo Metropolis, is one of the 47 prefectures of Japan. Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world. It is the seat of the Japanese government and the Imperial Palace, and the home of the Japanese Imperial Family.
                </p>
                <p>
                 Tokyo is in the Kantō region on the southeastern side of the main island Honshu and includes the Izu Islands and Ogasawara Islands. Tokyo Metropolis was formed in 1943 from the merger of the former Tokyo Prefecture and the city of Tokyo.
                </p>
              </div>
          </div>

</div>

   @import url('http://fonts.googleapis.com/css?family=Open+Sans:400,600,700');

   *, *:before, *:after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
   body {background: #FFF; color: #B9B5C7; font: 14px 'Open Sans', sans-serif;}

   h1 {padding: 100px 0; font-weight: 400; text-align: center;}
   p {margin: 0 0 20px; line-height: 1.5;}

   .main {margin: 0 auto; min-width: 320px; max-width: 800px;}
   .content {background: #fff; color: #373737;}
   .content > div {display: none; padding: 20px 25px 5px;}

   input {display: none;}
   label {display: inline-block; padding: 15px 25px; font-weight: 600; text-align: center;}
   label:hover {color: #303030; cursor: pointer;}
   input:checked + label {
    background: #1866A4;
    color: #fff;
}

   #tab1:checked ~ .content #content1,
   #tab2:checked ~ .content #content2,
   #tab3:checked ~ .content #content3,
   #tab4:checked ~ .content #content4 {
     display: block;
   }

   @media screen and (max-width: 400px) { label {padding: 15px 10px;} }

The source where I obtained the code is from the website: https://stanhub.com/create-responsiv…nly-no-jquery/

Also, I would like the width of the tabbed content to conform automatically to the width of the template I will be using. So how do make my current code to look like the tabbed content in the image shown? I know I have to make some changes to the CSS file and have been playing around for a long time but unable to achieve required results so any help will be greatly appreciated.

Thank You

[JeroenR]

Do you mean something like this perhaps? https://codepen.io/jeroenreijs/pen/RLRVXM
Tabs are centered, content is responsive to the width of the window.
I took this example: https://stanhub.com/tutorials/responsive-horizontal-css-only-tabs/
I have added borders to the labels (top, left, right), set the content of ‘main’ to be centered, set the content of ‘content’ to be left aligned. And changed the max-width of main to 100%.

[fre314]

Its nice idea!

[Author]

Posts