<div class="v-tabs-container">
<div class="v-tab-menu">
<button class="v-btn active" onclick="openVTab(event, 'profile')">Profile</button>
<button class="v-btn" onclick="openVTab(event, 'security')">Security</button>
<button class="v-btn" onclick="openVTab(event, 'notifications')">Notifications</button>
<button class="v-btn" onclick="openVTab(event, 'billing')">Billing</button>
</div>
<div class="v-tab-content">
<div id="profile" class="v-content active">
<h2>Public Profile</h2>
<p>Manage your public information and bio.</p>
</div>
<div id="security" class="v-content">
<h2>Security Settings</h2>
<p>Update your password and 2FA methods.</p>
</div>
<div id="notifications" class="v-content">
<h2>Email Notifications</h2>
<p>Choose what updates you want to receive.</p>
</div>
<div id="billing" class="v-content">
<h2>Payment Methods</h2>
<p>Review your invoices and billing history.</p>
</div>
</div>
</div>
Back to Snippets
Vertical Tabs Layout JS
Organize your settings or features with this vertical tabs interface. The side navigation controls the content panel, and we use a subtle fade effect when switching between sections to keep the experience smooth.
536