CSS   24
tab accordion styles
Guest on 18th September 2023 07:58:08 AM


  1. ul.tabs {
  2.         margin: 0;
  3.         padding: 0;
  4.         float: left;
  5.         list-style: none;
  6.         height: 32px;
  7.         border-bottom: 1px solid #333;
  8.         width: 100%;
  9. }
  10.  
  11. ul.tabs li {
  12.         float: left;
  13.         margin: 0;
  14.         cursor: pointer;
  15.         padding: 0px 21px;
  16.         height: 31px;
  17.         line-height: 31px;
  18.         border-top: 1px solid #333;
  19.         border-left: 1px solid #333;
  20.         border-bottom: 1px solid #333;
  21.         background-color: #666;
  22.         color: #ccc;
  23.         overflow: hidden;
  24.         position: relative;
  25. }
  26.  
  27. .tab_last { border-right: 1px solid #333; }
  28.  
  29. ul.tabs li:hover {
  30.         background-color: #ccc;
  31.         color: #333;
  32. }
  33.  
  34. ul.tabs li.active {
  35.         background-color: #fff;
  36.         color: #333;
  37.         border-bottom: 1px solid #fff;
  38.         display: block;
  39. }
  40.  
  41. .tab_container {
  42.         border: 1px solid #333;
  43.         border-top: none;
  44.         clear: both;
  45.         float: left;
  46.         width: 100%;
  47.         background: #fff;
  48.         overflow: auto;
  49. }
  50.  
  51. .tab_content {
  52.         padding: 20px;
  53.         display: none;
  54. }
  55.  
  56. .tab_drawer_heading { display: none; }
  57.  
  58. .expanded { display: none; }
  59. .collapsed { display: none; }
  60.  
  61. @media screen and (max-width: 850px) {
  62.         .tabs {
  63.                 display: none;
  64.         }
  65.         .tab_drawer_heading {
  66.                 background-color: #ccc;
  67.                 color: #fff;
  68.                 border-top: 1px solid #333;
  69.         /* border-left: 1px solid #333; */
  70.                 margin: 0;
  71.                 padding: 5px 20px;
  72.                 display: block;
  73.                 cursor: pointer;
  74.                 -webkit-touch-callout: none;
  75.                 -webkit-user-select: none;
  76.                 -khtml-user-select: none;
  77.                 -moz-user-select: none;
  78.                 -ms-user-select: none;
  79.                 user-select: none;
  80.         }
  81.         .d_active {
  82.                 background-color: #666;
  83.                 color: #fff;
  84.         }
  85.     .collapsed { display: inline; }
  86.     .expanded { display: inline; }
  87. }
  88.  
  89. .outer-bullet-list {
  90.     margin-left: 20px;
  91.     font-size: 0.9em;
  92.    
  93. }
  94.  
  95. .outer-bullet-list > li {
  96.     margin: 10px 0;
  97. }
  98.  
  99. .inner-bullet-list {
  100.     margin-left: 40px;
  101.     font-size: 0.9em;
  102. }
  103.  
  104. .inner-bullet-list > li {
  105.     margin: 10px 0;
  106. }
  107.  
  108. /* INNER (non-tabbed) accordion styles (e.g. for FAQs) */
  109. /* based on /accordion-demo.html */
  110. .inner-accordion-toggle {cursor: pointer; margin: 0;}
  111. .inner-accordion-content {display: none;}
  112. .inner accordion-content.default {display: block;}
Raw Paste

Login or Register to edit or fork this paste. It's free.