选项卡响应仅限javascript和CSS

我想只使用JavaScript和CSS3来创建响应选项卡。我不想要jQuery或其他库依赖项

我试过这个。

但它尚未完全响应。请调整大小并查看

另外，请让我知道使选项卡只使用JavaScript和CSS响应的最佳方法。或者，如果不使用jQuery或任何其他库，就无法创建

/**
*CSS3仅水平和垂直手风琴
*作者：红旗网的保罗·安德伍德
*网站：www.paulund.co.uk
*日期：2011年11月27日
*版本：1.0
*/
@媒体屏幕和屏幕（最小宽度：401px）{
塔布苏尔先生{
列表样式：无；
/*显示：内联块*/
保证金：0；
填充：0；
溢出：隐藏；
}
塔布斯利先生{
浮动：左；
}
/*定义手风琴盒*/
.accordion{宽度：830px；溢出：隐藏；边距：10px自动；颜色：#474747；背景：#414141；填充：10px；}
/*通用手风琴****************************************************************************/
/*设置开放式幻灯片的样式*/
.手风琴部分：目标{背景：#FFF；填充：10px；}
.手风琴部分：目标：悬停{背景：#FFF；}
.手风琴部分：目标h2{宽度：100%；}
.手风琴部分：目标h2 a{颜色：#333；填充：0；}
.accordio节：目标p{display:block；}
.手风琴部分h2 a{填充：8px 10px；显示：块；字体大小：16px；字体重量：正常；颜色：#eee；文本装饰：无；}
/*设置闭合幻灯片的样式*/
.accordion部分{float:左；overflow:隐藏；颜色：#333；光标：指针；/*背景：#333；*/边距：3px；}
.手风琴部分：悬停{背景：#444；}
.手风琴部分p{显示：无；}
.手风琴部分：{位置：相对；字体大小：24px；颜色：#000；字体重量：粗体；}
/*.手风琴部分：第n个子（1）：在{content:'1'；}之后
.手风琴部分：第n个子（2）：在{content:'2'；}之后
.手风琴部分：第n个孩子（3）：在{content:'3'；}之后
.手风琴部分：第n个子（4）：在{content:'4'；}之后
.手风琴部分：第n个孩子（5）：在{content:'5'；}之后*/
/*结束普通手风琴****************************************************************************/
/*水平手风琴*********************************************************************/
.水平截面{宽度：5%；高度：250px；
-moz过渡：宽度0.2s放松；
-webkit过渡：宽度0.2s放松；
-o型过渡：宽度为0.2s；
-ms过渡：宽度为0.2s；
过渡段：宽度0.2s放松；
}
/*定位滑块的编号*/
.水平部分：{顶部：140px；左侧：15px；}之后
/*闭式滑道集箱*/
.水平段h2{
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
-ms变换：旋转（90度）；
变换：旋转（90度）；
宽度：240px；位置：相对；左侧：-100px；顶部：85px；
}
/*鼠标悬停在打开的幻灯片上*/
.水平：目标{宽度：73%；高度：230px；}
.水平：目标h2{顶部：0px；左侧：0；
-webkit变换：旋转（0度）；
-moz变换：旋转（0度）；
-o变换：旋转（0度）；
-ms变换：旋转（0度）；
变换：旋转（0度）；
}
/*末端水平手风琴*********************************************************************/
/*竖琴*************************************************************************/
.垂直截面{宽度：15%；高度：40px；
-webkit过渡：高度为0.2秒；
-moz过渡：高度0.2s放松；
-o型过渡：高度为0.2s；
-ms转换：高度0.2s缓降；
过渡段：高度0.2s放松；
}
/*设置幻灯片的高度*/
.垂直：目标{高度：250px；宽度：97%；}
垂直截面h2{位置：相对；左侧：0；顶部：-15px；}
/*设置编号在幻灯片上的位置*/
/*.垂直部分：{顶部：-60px；左侧：810px；}之后
.垂直部分：目标：在{left:-9999px；}之后*/
}
/*--#####################################################################################################################################################*/
@媒体屏幕和（最小宽度：0px）和（最大宽度：400px）{
/*定义手风琴盒*/
.accordion{宽度：830px；溢出：隐藏；边距：10px自动；颜色：#474747；背景：#414141；填充：10px；}
/*通用手风琴****************************************************************************/
/*设置开放式幻灯片的样式*/
.手风琴部分：目标{背景：#FFF；填充：10px；}
.手风琴部分：目标：悬停{背景：#FFF；}
.手风琴部分：目标h2{宽度：100%；}
.手风琴部分：目标h2 a{颜色：#333；填充：0；}
.accordio节：目标p{display:block；}
.手风琴部分h2 a{填充：8px 10px；显示：块；字体大小：16px；字体重量：正常；颜色：#eee；文本装饰：无；}
/*设置闭合幻灯片的样式*/
.手风琴部分{浮动：左；溢出：隐藏；颜色：#333；光标：指针；背景：#333；边距：3px；}
.手风琴部分：悬停{背景：#444；}
.手风琴部分p{显示：无；}
.手风琴部分：{位置：相对；字体大小：24px；颜色：#000；字体重量：粗体；}
.手风琴部分：第n个子（1）：在{content:'1'；}之后
.手风琴部分：第n个子（2）：在{content:'2'；}之后
.手风琴部分：第n个孩子（3）：在{content:'3'；}之后
.手风琴部分：第n个子（4）：在{content:'4'；}之后
.手风琴部分：第n个孩子（5）：在{content:'5'；}之后
/*结束普通手风琴****************************************************************************/
/*水平手风琴*********************************************************************/
.水平截面{宽度：5%；高度：250px；
-moz过渡：宽度0.2s放松；
-webkit过渡：宽度0.2s放松；
-o型过渡：宽度为0.2s；
-ms过渡：宽度为0.2s；
过渡段：宽度0.2s放松；
}
/*定位滑块的编号*/
.水平部分：{顶部：140px；左侧：15px；}之后
/*闭式滑道集箱*/
.水平段h2{
-webkit变换：旋转（90度）；
-moz变换：旋转（90度）；
-o变换：旋转（90度）；
<h1>CSS3 Only Accordion Examples</h1>
<div class="accordion horizontal">
  <section id="about">
    <!--  See demo -->
   </section> 

  </div>

.