|$ curl https://forge-ai.dev/api/markdown?path=docs/components/tabs
$cat docs/tabs.md
updated Recently·12 min read·published
Tabs
◆CSS◆HTML◆UI◆Intermediate
Tabbed interfaces with underline and pill styles, interactive JavaScript switching, and keyboard navigation.
Underline Tabs
Material-style underline tabs with animated indicator that slides between active items.
underline-tabs
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="tabs"> |
| 3 | <button class="tab active" data-tab="tab1"> |
| 4 | Profile |
| 5 | </button> |
| 6 | <button class="tab" data-tab="tab2"> |
| 7 | Security |
| 8 | </button> |
| 9 | <button class="tab" data-tab="tab3"> |
| 10 | Billing |
| 11 | </button> |
| 12 | <button class="tab" data-tab="tab4"> |
| 13 | Team |
| 14 | </button> |
| 15 | <div class="indicator"> |
| 16 | </div> |
| 17 | </div> |
| 18 | <div class="panel active" id="tab1"> |
| 19 | <div class="panel-icon"> |
| 20 | <svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24"> |
| 21 | <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/> |
| 22 | <circle cx="12" cy="7" r="4"/> |
| 23 | </svg> |
| 24 | </div> |
| 25 | <h3 class="panel-title"> |
| 26 | Profile Settings |
| 27 | </h3> |
| 28 | <p class="panel-desc"> |
| 29 | Manage your personal information, profile picture, and public profile settings. |
| 30 | </p> |
| 31 | </div> |
| 32 | <div class="panel" id="tab2"> |
| 33 | <div class="panel-icon"> |
| 34 | <svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24"> |
| 35 | <rect x="3" y="11" width="18" height="11" rx="2" ry="2"/> |
| 36 | <path d="M7 11V7a5 5 0 0 1 10 0v4"/> |
| 37 | </svg> |
| 38 | </div> |
| 39 | <h3 class="panel-title"> |
| 40 | Security |
| 41 | </h3> |
| 42 | <p class="panel-desc"> |
| 43 | Configure password, two-factor authentication, and security preferences. |
| 44 | </p> |
| 45 | </div> |
| 46 | <div class="panel" id="tab3"> |
| 47 | <div class="panel-icon"> |
| 48 | <svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24"> |
| 49 | <rect x="1" y="4" width="22" height="16" rx="2" ry="2"/> |
| 50 | <line x1="1" y1="10" x2="23" y2="10"/> |
| 51 | </svg> |
| 52 | </div> |
| 53 | <h3 class="panel-title"> |
| 54 | Billing |
| 55 | </h3> |
| 56 | <p class="panel-desc"> |
| 57 | View invoices, update payment method, and manage subscription plan. |
| 58 | </p> |
| 59 | </div> |
| 60 | <div class="panel" id="tab4"> |
| 61 | <div class="panel-icon"> |
| 62 | <svg viewBox="0 0 24 24" fill="none" stroke="#00FF41" stroke-width="2" width="24" height="24"> |
| 63 | <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> |
| 64 | <circle cx="9" cy="7" r="4"/> |
| 65 | <path d="M23 21v-2a4 4 0 0 0-3-3.87"/> |
| 66 | <path d="M16 3.13a4 4 0 0 1 0 7.75"/> |
| 67 | </svg> |
| 68 | </div> |
| 69 | <h3 class="panel-title"> |
| 70 | Team |
| 71 | </h3> |
| 72 | <p class="panel-desc"> |
| 73 | Invite team members, manage roles, and configure permissions. |
| 74 | </p> |
| 75 | </div> |
| 76 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | max-width:480px; |
| 3 | margin:16px auto; |
| 4 | background:#111; |
| 5 | border-radius:10px; |
| 6 | border:1px solid #2A2A2A; |
| 7 | overflow:hidden |
| 8 | } |
| 9 | .tabs { |
| 10 | display:flex; |
| 11 | position:relative; |
| 12 | border-bottom:1px solid #2A2A2A; |
| 13 | background:#0A0A0A; |
| 14 | padding:0 4px |
| 15 | } |
| 16 | .tab { |
| 17 | flex:1; |
| 18 | padding:14px 12px; |
| 19 | font-size:12px; |
| 20 | font-weight:500; |
| 21 | font-family:system-ui, |
| 22 | sans-serif; |
| 23 | color:#666; |
| 24 | cursor:pointer; |
| 25 | border:none; |
| 26 | background:transparent; |
| 27 | transition:color .2s; |
| 28 | position:relative; |
| 29 | z-index:1 |
| 30 | } |
| 31 | .tab:hover { |
| 32 | color:#A0A0A0 |
| 33 | } |
| 34 | .tab.active { |
| 35 | color:#00FF41 |
| 36 | } |
| 37 | .indicator { |
| 38 | position:absolute; |
| 39 | bottom:0; |
| 40 | height:2px; |
| 41 | background:#00FF41; |
| 42 | border-radius:2px 2px 0 0; |
| 43 | transition:left .3s ease, |
| 44 | width .3s ease; |
| 45 | z-index:1 |
| 46 | } |
| 47 | .panel { |
| 48 | display:none; |
| 49 | padding:24px; |
| 50 | text-align:center |
| 51 | } |
| 52 | .panel.active { |
| 53 | display:block |
| 54 | } |
| 55 | .panel-icon { |
| 56 | margin-bottom:12px; |
| 57 | display:flex; |
| 58 | justify-content:center; |
| 59 | opacity:.8 |
| 60 | } |
| 61 | .panel-title { |
| 62 | font-size:15px; |
| 63 | font-weight:600; |
| 64 | color:#E0E0E0; |
| 65 | margin-bottom:6px; |
| 66 | font-family:system-ui, |
| 67 | sans-serif |
| 68 | } |
| 69 | .panel-desc { |
| 70 | font-size:12px; |
| 71 | color:#808080; |
| 72 | line-height:1.5; |
| 73 | font-family:system-ui, |
| 74 | sans-serif; |
| 75 | max-width:300px; |
| 76 | margin:0 auto |
| 77 | } |
untitled.js
JavaScript
| 1 | const tabs=document.querySelectorAll('.tab');const panels=document.querySelectorAll('.panel');const indicator=document.querySelector('.indicator');function updateIndicator(el){const parent=el.parentElement;const idx=Array.from(parent.children).indexOf(el);const tabsArr=Array.from(parent.querySelectorAll('.tab'));const total=tabsArr.length;const w=(100/total);indicator.style.left=idx*w+'%';indicator.style.width=w+'%'}tabs.forEach(tab=>{tab.addEventListener('click',()=>{tabs.forEach(t=>t.classList.remove('active'));tab.classList.add('active');const id=tab.dataset.tab;panels.forEach(p=>p.classList.remove('active'));document.getElementById(id).classList.add('active');updateIndicator(tab)})});updateIndicator(document.querySelector('.tab.active')) |
Pill Tabs
Pill-style segmented tabs with icon support — great for settings pages and filters.
pill-tabs
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="pill-nav"> |
| 3 | <button class="pill active" data-id="preview"> |
| 4 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"> |
| 5 | <rect x="3" y="3" width="7" height="7"/> |
| 6 | <rect x="14" y="3" width="7" height="7"/> |
| 7 | <rect x="14" y="14" width="7" height="7"/> |
| 8 | <rect x="3" y="14" width="7" height="7"/> |
| 9 | </svg> |
| 10 | Preview |
| 11 | </button> |
| 12 | <button class="pill" data-id="code"> |
| 13 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"> |
| 14 | <polyline points="16 18 22 12 16 6"/> |
| 15 | <polyline points="8 6 2 12 8 18"/> |
| 16 | </svg> |
| 17 | Code |
| 18 | </button> |
| 19 | <button class="pill" data-id="settings"> |
| 20 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="14" height="14"> |
| 21 | <circle cx="12" cy="12" r="3"/> |
| 22 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 23 | </svg> |
| 24 | Settings |
| 25 | </button> |
| 26 | </div> |
| 27 | <div class="content"> |
| 28 | <div class="content-panel active" id="preview-view"> |
| 29 | <div class="preview-box"> |
| 30 | <div class="preview-circle"> |
| 31 | </div> |
| 32 | <div class="preview-lines"> |
| 33 | <div class="preview-line" style="width:60%"> |
| 34 | </div> |
| 35 | <div class="preview-line" style="width:80%"> |
| 36 | </div> |
| 37 | <div class="preview-line" style="width:40%"> |
| 38 | </div> |
| 39 | </div> |
| 40 | </div> |
| 41 | </div> |
| 42 | <div class="content-panel" id="code-view"> |
| 43 | <pre class="code-sample"> |
| 44 | <span class="code-comment"> |
| 45 | // main.js |
| 46 | </span> |
| 47 | <span class="code-line"> |
| 48 | <span class="code-kw"> |
| 49 | const |
| 50 | </span> |
| 51 | app = |
| 52 | <span class="code-fn"> |
| 53 | initialize |
| 54 | </span> |
| 55 | () |
| 56 | </span> |
| 57 | <span class="code-line"> |
| 58 | app. |
| 59 | <span class="code-fn"> |
| 60 | run |
| 61 | </span> |
| 62 | ({ mode: |
| 63 | <span class="code-str"> |
| 64 | 'dev' |
| 65 | </span> |
| 66 | }) |
| 67 | </span> |
| 68 | </pre> |
| 69 | </div> |
| 70 | <div class="content-panel" id="settings-view"> |
| 71 | <div class="settings-list"> |
| 72 | <label class="setting"> |
| 73 | <span> |
| 74 | Dark Mode |
| 75 | </span> |
| 76 | <input type="checkbox" checked/> |
| 77 | </label> |
| 78 | <label class="setting"> |
| 79 | <span> |
| 80 | Auto-save |
| 81 | </span> |
| 82 | <input type="checkbox"/> |
| 83 | </label> |
| 84 | <label class="setting"> |
| 85 | <span> |
| 86 | Notifications |
| 87 | </span> |
| 88 | <input type="checkbox" checked/> |
| 89 | </label> |
| 90 | </div> |
| 91 | </div> |
| 92 | </div> |
| 93 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | max-width:480px; |
| 3 | margin:16px auto; |
| 4 | background:#111; |
| 5 | border-radius:10px; |
| 6 | border:1px solid #2A2A2A; |
| 7 | overflow:hidden |
| 8 | } |
| 9 | .pill-nav { |
| 10 | display:flex; |
| 11 | gap:4px; |
| 12 | padding:12px 12px 0; |
| 13 | background:#0A0A0A |
| 14 | } |
| 15 | .pill { |
| 16 | display:flex; |
| 17 | align-items:center; |
| 18 | gap:6px; |
| 19 | padding:8px 16px; |
| 20 | border-radius:8px 8px 0 0; |
| 21 | font-size:11px; |
| 22 | font-weight:500; |
| 23 | font-family:system-ui, |
| 24 | sans-serif; |
| 25 | color:#666; |
| 26 | cursor:pointer; |
| 27 | border:none; |
| 28 | background:transparent; |
| 29 | transition:all .2s |
| 30 | } |
| 31 | .pill:hover { |
| 32 | color:#A0A0A0; |
| 33 | background:rgba(255, |
| 34 | 255, |
| 35 | 255, |
| 36 | .03) |
| 37 | } |
| 38 | .pill.active { |
| 39 | color:#00FF41; |
| 40 | background:#111 |
| 41 | } |
| 42 | .content { |
| 43 | padding:20px; |
| 44 | min-height:140px |
| 45 | } |
| 46 | .content-panel { |
| 47 | display:none |
| 48 | } |
| 49 | .content-panel.active { |
| 50 | display:block |
| 51 | } |
| 52 | .preview-box { |
| 53 | display:flex; |
| 54 | align-items:center; |
| 55 | gap:16px; |
| 56 | padding:16px; |
| 57 | background:#0A0A0A; |
| 58 | border-radius:8px; |
| 59 | border:1px solid #2A2A2A |
| 60 | } |
| 61 | .preview-circle { |
| 62 | width:40px; |
| 63 | height:40px; |
| 64 | border-radius:50%; |
| 65 | background:#00FF41/20; |
| 66 | border:2px solid #00FF41/30 |
| 67 | } |
| 68 | .preview-lines { |
| 69 | flex:1; |
| 70 | display:flex; |
| 71 | flex-direction:column; |
| 72 | gap:8px |
| 73 | } |
| 74 | .preview-line { |
| 75 | height:8px; |
| 76 | border-radius:4px; |
| 77 | background:#2A2A2A |
| 78 | } |
| 79 | .code-sample { |
| 80 | display:flex; |
| 81 | flex-direction:column; |
| 82 | gap:6px; |
| 83 | font-size:12px; |
| 84 | font-family:monospace; |
| 85 | background:#0A0A0A; |
| 86 | padding:16px; |
| 87 | border-radius:8px; |
| 88 | border:1px solid #2A2A2A |
| 89 | } |
| 90 | .code-comment { |
| 91 | color:#6A9955 |
| 92 | } |
| 93 | .code-line { |
| 94 | color:#D4D4D4 |
| 95 | } |
| 96 | .code-kw { |
| 97 | color:#569CD6 |
| 98 | } |
| 99 | .code-fn { |
| 100 | color:#DCDCAA |
| 101 | } |
| 102 | .code-str { |
| 103 | color:#CE9178 |
| 104 | } |
| 105 | .settings-list { |
| 106 | display:flex; |
| 107 | flex-direction:column; |
| 108 | gap:8px |
| 109 | } |
| 110 | .setting { |
| 111 | display:flex; |
| 112 | align-items:center; |
| 113 | justify-content:space-between; |
| 114 | padding:8px 12px; |
| 115 | font-size:12px; |
| 116 | color:#C0C0C0; |
| 117 | font-family:system-ui, |
| 118 | sans-serif; |
| 119 | background:#0A0A0A; |
| 120 | border-radius:6px; |
| 121 | border:1px solid #2A2A2A |
| 122 | } |
| 123 | .setting input[type=checkbox] { |
| 124 | width:34px; |
| 125 | height:18px; |
| 126 | appearance:none; |
| 127 | background:#333; |
| 128 | border-radius:9px; |
| 129 | position:relative; |
| 130 | cursor:pointer; |
| 131 | transition:background .2s |
| 132 | } |
| 133 | .setting input[type=checkbox]:checked { |
| 134 | background:#00FF41 |
| 135 | } |
| 136 | .setting input[type=checkbox]::after { |
| 137 | content:''; |
| 138 | position:absolute; |
| 139 | top:2px; |
| 140 | left:2px; |
| 141 | width:14px; |
| 142 | height:14px; |
| 143 | border-radius:50%; |
| 144 | background:#fff; |
| 145 | transition:transform .2s |
| 146 | } |
| 147 | .setting input[type=checkbox]:checked::after { |
| 148 | transform:translateX(16px) |
| 149 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.pill').forEach(pill=>{pill.addEventListener('click',()=>{document.querySelectorAll('.pill').forEach(p=>p.classList.remove('active'));pill.classList.add('active');const id=pill.dataset.id;document.querySelectorAll('.content-panel').forEach(p=>p.classList.remove('active'));document.getElementById(id+'-view').classList.add('active')})}) |
Vertical Tabs
Sidebar-style vertical tabs for settings panels and complex navigation layouts.
vertical-tabs
Live
untitled.html
HTML
| 1 | <div class="wrapper"> |
| 2 | <div class="v-nav"> |
| 3 | <button class="v-tab active" data-v="general"> |
| 4 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 5 | <path d="M12 20h9"/> |
| 6 | <path d="M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4L16.5 3.5z"/> |
| 7 | </svg> |
| 8 | General |
| 9 | </button> |
| 10 | <button class="v-tab" data-v="appearance"> |
| 11 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 12 | <circle cx="12" cy="12" r="3"/> |
| 13 | <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42"/> |
| 14 | </svg> |
| 15 | Appearance |
| 16 | </button> |
| 17 | <button class="v-tab" data-v="advanced"> |
| 18 | <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"> |
| 19 | <circle cx="12" cy="12" r="3"/> |
| 20 | <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"/> |
| 21 | </svg> |
| 22 | Advanced |
| 23 | </button> |
| 24 | </div> |
| 25 | <div class="v-panels"> |
| 26 | <div class="v-panel active" id="v-general"> |
| 27 | <h3> |
| 28 | General Settings |
| 29 | </h3> |
| 30 | <label class="v-field"> |
| 31 | <span> |
| 32 | Site Name |
| 33 | </span> |
| 34 | <input type="text" value="My App"/> |
| 35 | </label> |
| 36 | <label class="v-field"> |
| 37 | <span> |
| 38 | Language |
| 39 | </span> |
| 40 | <select> |
| 41 | <option> |
| 42 | English |
| 43 | </option> |
| 44 | <option> |
| 45 | Spanish |
| 46 | </option> |
| 47 | </select> |
| 48 | </label> |
| 49 | </div> |
| 50 | <div class="v-panel" id="v-appearance"> |
| 51 | <h3> |
| 52 | Appearance |
| 53 | </h3> |
| 54 | <label class="v-field"> |
| 55 | <span> |
| 56 | Theme |
| 57 | </span> |
| 58 | <select> |
| 59 | <option> |
| 60 | Dark |
| 61 | </option> |
| 62 | <option> |
| 63 | Light |
| 64 | </option> |
| 65 | <option> |
| 66 | System |
| 67 | </option> |
| 68 | </select> |
| 69 | </label> |
| 70 | </div> |
| 71 | <div class="v-panel" id="v-advanced"> |
| 72 | <h3> |
| 73 | Advanced |
| 74 | </h3> |
| 75 | <p class="v-desc"> |
| 76 | Advanced configuration options for power users. |
| 77 | </p> |
| 78 | </div> |
| 79 | </div> |
| 80 | </div> |
untitled.css
CSS
| 1 | .wrapper { |
| 2 | max-width:520px; |
| 3 | margin:16px auto; |
| 4 | display:flex; |
| 5 | background:#111; |
| 6 | border-radius:10px; |
| 7 | border:1px solid #2A2A2A; |
| 8 | overflow:hidden; |
| 9 | min-height:200px |
| 10 | } |
| 11 | .v-nav { |
| 12 | display:flex; |
| 13 | flex-direction:column; |
| 14 | gap:2px; |
| 15 | padding:10px; |
| 16 | background:#0A0A0A; |
| 17 | border-right:1px solid #2A2A2A; |
| 18 | min-width:140px |
| 19 | } |
| 20 | .v-tab { |
| 21 | display:flex; |
| 22 | align-items:center; |
| 23 | gap:8px; |
| 24 | padding:10px 14px; |
| 25 | border-radius:6px; |
| 26 | font-size:12px; |
| 27 | font-weight:500; |
| 28 | font-family:system-ui, |
| 29 | sans-serif; |
| 30 | color:#808080; |
| 31 | cursor:pointer; |
| 32 | border:none; |
| 33 | background:transparent; |
| 34 | transition:all .15s; |
| 35 | text-align:left |
| 36 | } |
| 37 | .v-tab:hover { |
| 38 | color:#E0E0E0; |
| 39 | background:rgba(255, |
| 40 | 255, |
| 41 | 255, |
| 42 | .03) |
| 43 | } |
| 44 | .v-tab.active { |
| 45 | color:#00FF41; |
| 46 | background:rgba(0, |
| 47 | 255, |
| 48 | 65, |
| 49 | .05) |
| 50 | } |
| 51 | .v-panels { |
| 52 | flex:1; |
| 53 | padding:20px |
| 54 | } |
| 55 | .v-panel { |
| 56 | display:none |
| 57 | } |
| 58 | .v-panel.active { |
| 59 | display:block |
| 60 | } |
| 61 | .v-panel h3 { |
| 62 | font-size:14px; |
| 63 | font-weight:600; |
| 64 | color:#E0E0E0; |
| 65 | margin-bottom:14px; |
| 66 | font-family:system-ui, |
| 67 | sans-serif |
| 68 | } |
| 69 | .v-field { |
| 70 | display:flex; |
| 71 | flex-direction:column; |
| 72 | gap:4px; |
| 73 | margin-bottom:12px |
| 74 | } |
| 75 | .v-field span { |
| 76 | font-size:10px; |
| 77 | color:#666; |
| 78 | text-transform:uppercase; |
| 79 | letter-spacing:.5px |
| 80 | } |
| 81 | .v-field input, |
| 82 | .v-field select { |
| 83 | padding:8px 10px; |
| 84 | border-radius:6px; |
| 85 | border:1px solid #2A2A2A; |
| 86 | background:#0A0A0A; |
| 87 | color:#E0E0E0; |
| 88 | font-size:12px; |
| 89 | font-family:system-ui, |
| 90 | sans-serif |
| 91 | } |
| 92 | .v-desc { |
| 93 | font-size:12px; |
| 94 | color:#808080; |
| 95 | line-height:1.5; |
| 96 | font-family:system-ui, |
| 97 | sans-serif |
| 98 | } |
untitled.js
JavaScript
| 1 | document.querySelectorAll('.v-tab').forEach(tab=>{tab.addEventListener('click',()=>{document.querySelectorAll('.v-tab').forEach(t=>t.classList.remove('active'));tab.classList.add('active');const id=tab.dataset.v;document.querySelectorAll('.v-panel').forEach(p=>p.classList.remove('active'));document.getElementById('v-'+id).classList.add('active')})}) |