-1

I want to make responsive Tab by only using JavaScript, CSS3 only. I don't want jQuery or other libraries dependency.

I have tried this from. http://media02.hongkiat.com/css-based-accordion/demo/

But it is not full responsive yet.Please resize and see.

Please also let me know best way to make tab responsive with only JavaScript and CSS only. Or it is not possible to create without using jQuery or any other libraries.

/**
 *     CSS3 Only Horizontal and Vertical Accordion
 *     Author: Paul Underwood for Hongkiat.com
 *  Website: www.paulund.co.uk
 *  Date: 27/11/11
 *  Version: 1.0
 */
 @media screen and (min-width : 401px){

.TabsUL{
    list-style:none;
    /*display:inline-block;*/
    margin: 0;
    padding: 0;
    overflow: hidden;
}
.TabsLI{
    float:left;
}
/*Define Accordion box*/
.accordion { width:830px; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:10px; }

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { background:#FFF; padding:10px;}
.accordion section:target:hover { background:#FFF; }
.accordion section:target h2 {width:100%;}
.accordion section:target h2 a{ color:#333; padding:0;}
.accordion section:target p {display:block;}
.accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }

/*set style of closed slide*/
.accordion section{ float:left;    overflow:hidden; color:#333; cursor:pointer;/* background: #333;*/ margin:3px; }
.accordion section:hover {background:#444;}
.accordion section p { display:none; }
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
/*.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
.accordion section:nth-child(4):after{content:'4';}
.accordion section:nth-child(5):after{content:'5';}*/
/*End General Accordion****************************************************************************/

/*Horizontal Accordion *********************************************************************/
.horizontal section{ width:5%; height:250px;
    -moz-transition:width 0.2s ease-out;
    -webkit-transition:width 0.2s ease-out;
      -o-transition:width 0.2s ease-out;
    -ms-transition:width 0.2s ease-out;
      transition:width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after{top:140px;left:15px;}

/*Header of closed slide*/
.horizontal section h2 {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    width:240px; position:relative; left:-100px; top:85px;
}

/*On mouse over open slide*/
.horizontal :target{ width:73%;height:230px; }
.horizontal :target h2{ top:0px;left:0;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
/*End Horizontal Accordion *********************************************************************/

/*Vertical Accordion *************************************************************************/
.vertical section{ width:15%; height:40px;
    -webkit-transition:height 0.2s ease-out;
    -moz-transition:height 0.2s ease-out;
      -o-transition:height 0.2s ease-out;
    -ms-transition:height 0.2s ease-out;
      transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{ height:250px; width:97%; }

.vertical section h2 { position:relative; left:0; top:-15px; }

/*Set position of the number on the slide*/
/*.vertical section:after{ top:-60px;left:810px;}
.vertical section:target:after{ left:-9999px;}*/

}

/*--#####################################################################################################################################################*/
@media screen and (min-width : 0px) and (max-width : 400px) {

/*Define Accordion box*/
.accordion { width:830px; overflow:hidden; margin:10px auto; color:#474747; background:#414141; padding:10px; }

/*General Accordion****************************************************************************/
/*Set style of open slide*/
.accordion section:target { background:#FFF; padding:10px;}
.accordion section:target:hover { background:#FFF; }
.accordion section:target h2 {width:100%;}
.accordion section:target h2 a{ color:#333; padding:0;}
.accordion section:target p {display:block;}
.accordion section h2 a{padding:8px 10px;display:block; font-size:16px; font-weight:normal;color:#eee; text-decoration:none; }

/*set style of closed slide*/
.accordion section{ float:left;    overflow:hidden; color:#333; cursor:pointer; background: #333; margin:3px; }
.accordion section:hover {background:#444;}
.accordion section p { display:none; }
.accordion section:after{position:relative;font-size:24px;color:#000;font-weight:bold;}
.accordion section:nth-child(1):after{content:'1';}
.accordion section:nth-child(2):after{content:'2';}
.accordion section:nth-child(3):after{content:'3';}
.accordion section:nth-child(4):after{content:'4';}
.accordion section:nth-child(5):after{content:'5';}
/*End General Accordion****************************************************************************/

/*Horizontal Accordion *********************************************************************/
.horizontal section{ width:5%; height:250px;
    -moz-transition:width 0.2s ease-out;
    -webkit-transition:width 0.2s ease-out;
      -o-transition:width 0.2s ease-out;
    -ms-transition:width 0.2s ease-out;
      transition:width 0.2s ease-out;
}

/*Position the number of the slide*/
.horizontal section:after{top:140px;left:15px;}

/*Header of closed slide*/
.horizontal section h2 {
    -webkit-transform:rotate(90deg);
    -moz-transform:rotate(90deg);
    -o-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    width:240px; position:relative; left:-100px; top:85px;
}

/*On mouse over open slide*/
.horizontal :target{ width:73%;height:230px; }
.horizontal :target h2{ top:0px;left:0;
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
}
/*End Horizontal Accordion *********************************************************************/

/*Vertical Accordion *************************************************************************/
.vertical section{ width:100%; height:40px;
    -webkit-transition:height 0.2s ease-out;
    -moz-transition:height 0.2s ease-out;
      -o-transition:height 0.2s ease-out;
    -ms-transition:height 0.2s ease-out;
      transition:height 0.2s ease-out;
}
/*Set height of the slide*/
.vertical :target{ height:250px; width:97%; }

.vertical section h2 { position:relative; left:0; top:-15px; }

/*Set position of the number on the slide*/
.vertical section:after{ top:-60px;left:810px;}
.vertical section:target:after{ left:-9999px;}

}
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <link rel="stylesheet" href="css/style.css" />
        <!--[if lt IE 9]>
          <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>
        <h1></h1>

        <div class="accordion vertical">

        <ul class="TabsUL">
        <li class="TabsLI"><h2><a href="#vertabout">About Us</a></h2></li>
        <li class="TabsLI"><h2><a href="#vertservices">Services</a></h2></li>
        <li class="TabsLI"><h2><a href="#vertblog">Blog</a></h2></li>
        <li class="TabsLI"><h2><a href="#vertportfolio">Portfolio</a></h2></li>
        <li class="TabsLI"><h2><a href="#vertcontact">Contact</a></h2></li>

        </ul>
          <section id="vertabout">

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
          </section>
          <section id="vertservices">

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
          </section>
          <section id="vertblog">

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
          </section>
          <section id="vertportfolio">

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
          </section>
          <section id="vertcontact">

              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse id lobortis massa. Nunc viverra velit leo, sit amet elementum mi. Fusce posuere nunc a mi tempus malesuada. Curabitur facilisis rhoncus eros eget placerat. Aliquam semper mauris sit amet justo tempor nec lacinia magna molestie. Etiam placerat congue dolor vitae adipiscing. Aliquam ac erat lorem, ut iaculis justo. Etiam mattis dignissim gravida. Aliquam nec justo ante, non semper mi. Nulla consectetur interdum massa, vel porta enim vulputate sed. Maecenas elit quam, egestas eget placerat non, fringilla vel eros. Nam vehicula elementum nulla sed consequat. Phasellus eu erat enim. Praesent at magna non massa dapibus scelerisque in eu lorem.</p>
          </section>
        </div>
    </body>
</html>
Dylan Wheeler
  • 6,928
  • 14
  • 56
  • 80
Mike Phils
  • 3,475
  • 5
  • 24
  • 45
  • Have you got a responsive design? If you have a horizontal accordion, you need to change to vertical accordion in devices with less than 640 pixels of width, or make something with your requirements. But all of this requires **a minimum amount of effort for your end**. – Marcos Pérez Gude Jul 19 '16 at 06:53
  • no its not about accordion...I need tab. Accordion just for smaller device.I have to write precise media queries, right now it is initial hence I have define the just device width. My question is it possible to make tab to accordion??? – Mike Phils Jul 19 '16 at 07:01
  • With tabs you need to make another markup because you need `:checked` pseudoelement and `` to hold the active tab. See this: http://stackoverflow.com/questions/37840691/tab-system-with-pure-css-anchor-avoids-the-propagation-to-label . You can make tabs+accordion depending on the device, but you need two markups or really a big effort from your end. – Marcos Pérez Gude Jul 19 '16 at 07:06
  • ok.That's sound comprehensive now.I can't keep two markup that's not code coding standard that what i think. – Mike Phils Jul 19 '16 at 07:11

2 Answers2

0

when you inspect the code , you need to do : right click on the webpage , then select View page source , not the final rendered HTML .

My DEMO here is successful : 

<h1>CSS3 Only Accordion Examples</h1>
<div class="accordion horizontal">
  <section id="about">
    <!--  See demo -->
   </section> 

  </div>
Abdennour TOUMI
  • 87,526
  • 38
  • 249
  • 254
0

I googled: CSS responsive tabs.

The first 5 results were:

  1. Responsive CSS Tabs - CodePen
  2. Create Responsive Tabs Using CSS Only (no jQuery)
  3. Simple Responsive Tabs With JavaScript & CSS
  4. Responsive Tabs
  5. CSS3 flat responsive tabs

(and other 1,390,000 results)

Have you try googling before?

.

Please also let me know best way to make tab responsive with only javascript and CSS only.

Use media queries to have different CSS on different screen sizes and use percentage values for dimensions instead of hardcoded pixel values.

Or it is not possible to create without using jquery or any other libraries.

Of course it is possible to not use jQuery but since you can't do it then the question is - is it worth the trouble?

rsp
  • 107,747
  • 29
  • 201
  • 177
  • I have already googled that and I saw all that.My question is it possible to make tab to accordion???.I agree jquery is awesome, But right now I need solution of without jquery. – Mike Phils Jul 19 '16 at 07:08