Tabs
Hypertext Markup Language is the standard markup language for documents designed to be displayed in a web browser.
It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript.
Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript.
PHP is a popular general-purpose scripting language that is especially suited to web development.
It was originally created by Rasmus Lerdorf in 1994; the PHP reference implementation is now produced by The PHP Group.
<Tab.Container activeKey="html">
<>
<Nav variant="tabs" className="app-tabs-primary" id="Basic">
<Nav.Item>
<Nav.Link eventKey="html" id="html-tab" role="tab">HTML</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="css" id="css-tab" role="tab">CSS</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="php" id="php-tab" role="tab">PHP</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content className="mt-3" id="BasicContent">
<Tab.Pane eventKey="html" role="tabpanel" id="html-tab-pane">
<p className="f-s-15">Hypertext Markup Language is the standard...</p>
<p className="f-s-15">It can be helped by technologies such as...</p>
</Tab.Pane>
<Tab.Pane eventKey="css" role="tabpanel" id="css-tab-pane">
<p className="f-s-15">Cascading Style Sheets (CSS) is a style sheet...</p>
<p className="f-s-15">CSS is a cornerstone technology of the Web...</p>
</Tab.Pane>
<Tab.Pane eventKey="php" role="tabpanel" id="php-tab-pane">
<p className="f-s-15">PHP is a popular general-purpose scripting...</p>
<p className="f-s-15">It was originally created by Rasmus Lerdorf...</p>
</Tab.Pane>
</Tab.Content>
</>
</Tab.Container>This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.
This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.
This field is a rich HTML field with a content editor like others used in Sitefinity. It accepts images, video, tables, text, etc. Street art polaroid microdosing la croix taxidermy. Jean shorts kinfolk distillery lumbersexual pinterest XOXO semiotics.
<Tab.Container defaultActiveKey="connect">
<Nav variant="tabs" className="tab-outline-primary">
<Nav.Item>
<Nav.Link eventKey="connect">Connect</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="discover">Discover</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="order">Orders</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content className="mt-3">
<Tab.Pane eventKey="connect">
<p>This is the connect tab content...</p>
</Tab.Pane>
<Tab.Pane eventKey="discover">
<p>This is the discover tab content...</p>
</Tab.Pane>
<Tab.Pane eventKey="order">
<p>This is the orders tab content...</p>
</Tab.Pane>
</Tab.Content>
</Tab.Container>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
1. Show only the last tab.
2. If :target matches a tab, show it and hide all following siblings.
3. Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
<Tab.Container activeKey="description">
<>
<Nav variant="tabs" className="tab-light-primary" id="Light" role="tablist">
<Nav.Item>
<Nav.Link eventKey="description" id="description-tab">
<Lifebuoy size={18} className="me-1" /> Description
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="howowrk" id="howowrk-tab">
<Keyboard size={18} className="me-1" /> How It Works
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="drawbacks" id="drawbacks-tab">
<ThumbsDown size={18} className="me-1" /> Drawbacks
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content className="mt-3" id="LightContent">
<Tab.Pane eventKey="description" id="description-tab-pane">
<p className="f-s-15">The idea is to use <code>:target</code> pseudoclass to show tabs...</p>
</Tab.Pane>
<Tab.Pane eventKey="howowrk" id="howowrk-tab-pane">
<p className="f-s-15">1. Show only the last tab.</p>
<p className="f-s-15">2. If <code>:target</code> matches a tab...</p>
<p className="f-s-15">3. Matches a tab, show it and hide...</p>
</Tab.Pane>
<Tab.Pane eventKey="drawbacks" id="drawbacks-tab-pane">
<p className="f-s-15">The idea is to use <code>:target</code> pseudoclass to show tabs...</p>
</Tab.Pane>
</Tab.Content>
</>
</Tab.Container>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
This concept leverages modern CSS to control tab visibility without JavaScript.
Show only the last tab.
If :target matches a tab, show it and hide all following siblings.
Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
<Tab.Container activeKey="features">
<>
<Nav variant="tabs" className="tab-primary bg-primary p-1" role="tablist">
<Nav.Item>
<Nav.Link eventKey="features" id="features-tab" role="tab" aria-controls="features-tab-pane">
<Disc size={18} className="me-2" />
Features
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="history" id="history-tab" role="tab" aria-controls="history-tab-pane">
<ClockCounterClockwise size={18} className="me-2" />
History
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="reviews" id="reviews-tab" role="tab" aria-controls="reviews-tab-pane">
<Star size={18} className="me-2" />
Reviews
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content className="mt-3" id="bgContent">
<Tab.Pane eventKey="features" role="tabpanel" id="features-tab-pane">
<p className="p-s-15">The idea is to use <code>:target</code> pseudoclass...</p>
<p className="p-s-15">This concept leverages modern CSS to control...</p>
</Tab.Pane>
<Tab.Pane eventKey="history" role="tabpanel" id="history-tab-pane">
<p className="p-s-15">Show only the last tab.</p>
<p className="p-s-15">If <code>:target</code> matches a tab...</p>
<p className="p-s-15">Matches a tab, show it and hide...</p>
</Tab.Pane>
<Tab.Pane eventKey="reviews" role="tabpanel" id="reviews-tab-pane">
<p className="p-s-15">The idea is to use <code>:target</code> pseudoclass...</p>
</Tab.Pane>
</Tab.Content>
</>
</Tab.Container>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
<Tab.Container activeKey="v-features">
<Card>
<Card.Header className="d-flex justify-content-between align-items-center">
<h5>Vertical Tabs Left Side</h5>
<a>
<Code size={30} weight="bold" className="source" />
</a>
</Card.Header>
<Card.Body className="vertical-tab">
<Nav variant="tabs" className="app-tabs-secondary flex-column" id="v-bg" role="tablist">
<Nav.Item role="presentation">
<Nav.Link
eventKey="v-features"
id="v-features-tab"
role="tab"
aria-controls="v-features-tab-pane"
aria-selected="true"
>
features
</Nav.Link>
</Nav.Item>
<Nav.Item role="presentation">
<Nav.Link
eventKey="v-history"
id="v-history-tab"
role="tab"
aria-controls="v-history-tab-pane"
aria-selected="true"
>
History
</Nav.Link>
</Nav.Item>
<Nav.Item role="presentation">
<Nav.Link
eventKey="v-reviews"
id="v-reviews-tab"
role="tab"
aria-controls="v-reviews-tab-pane"
aria-selected="true"
>
reviews
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content className="mt-3" id="v-bgContent">
<Tab.Pane
eventKey="v-features"
role="tabpanel"
id="v-features-tab-pane"
aria-labelledby="v-features-tab"
className="show active"
>
<!-- Content omitted for brevity -->
</Tab.Pane>
<Tab.Pane
eventKey="v-history"
role="tabpanel"
id="v-history-tab-pane"
aria-labelledby="v-history-tab"
className="show active"
>
<!-- Content omitted for brevity -->
</Tab.Pane>
<Tab.Pane
eventKey="v-reviews"
role="tabpanel"
id="v-reviews-tab-pane"
aria-labelledby="v-reviews-tab"
className="show active"
>
<!-- Content omitted for brevity -->
</Tab.Pane>
</Tab.Content>
</Card.Body>
</Card>
</Tab.Container>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
<Tab.Container activeKey="vl-features">
<div className="d-flex">
<Tab.Content className="tab-content text-sm-end mt-3 flex-grow-1" id="vl-bgContent">
<Tab.Pane
eventKey="vl-features"
id="vl-features-tab-pane"
aria-labelledby="vl-features-tab"
role="tabpanel"
>
<!-- Features content -->
</Tab.Pane>
<Tab.Pane
eventKey="vl-history"
id="vl-history-tab-pane"
aria-labelledby="vl-history-tab"
role="tabpanel"
>
<!-- History content -->
</Tab.Pane>
<Tab.Pane
eventKey="vl-reviews"
id="vl-reviews-tab-pane"
aria-labelledby="vl-reviews-tab"
role="tabpanel"
>
<!-- Reviews content -->
</Tab.Pane>
</Tab.Content>
<Nav variant="tabs" className="app-tabs-secondary me-0 ms-3 flex-column" id="vl-bg" role="tablist">
<Nav.Item role="presentation">
<Nav.Link
eventKey="vl-features"
id="vl-features-tab"
role="tab"
aria-controls="vl-features-tab-pane"
aria-selected={true}
>
Features
</Nav.Link>
</Nav.Item>
<Nav.Item role="presentation">
<Nav.Link
eventKey="vl-history"
id="vl-history-tab"
role="tab"
aria-controls="vl-history-tab-pane"
aria-selected={false}
>
History
</Nav.Link>
</Nav.Item>
<Nav.Item role="presentation">
<Nav.Link
eventKey="vl-reviews"
id="vl-reviews-tab"
role="tab"
aria-controls="vl-reviews-tab-pane"
aria-selected={false}
>
Reviews
</Nav.Link>
</Nav.Item>
</Nav>
</div>
</Tab.Container>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
1. Show only the last tab.
2. If :target matches a tab, show it and hide all following siblings.
3. Matches a tab, show it and hide all following siblings.
This method might not work well in older browsers and lacks JavaScript control for dynamic behavior.
<Tab.Container defaultActiveKey="description">
<>
<Tab.Content className="mb-3">
<Tab.Pane eventKey="description">
<p className="f-s-15">
The idea is to use <code>:target</code> pseudoclass to show tabs...
</p>
</Tab.Pane>
<Tab.Pane eventKey="howowrk">
<p className="f-s-15">1. Show only the last tab.</p>
<p className="f-s-15">2. If <code>:target</code> matches...</p>
</Tab.Pane>
<Tab.Pane eventKey="drawbacks">
<p className="f-s-15">
This method might not work well in older browsers...
</p>
</Tab.Pane>
</Tab.Content>
<Nav variant="tabs" className="tab-light-primary mt-3">
<Nav.Item>
<Nav.Link eventKey="description">Description</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="howowrk">How It Works</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="drawbacks">Drawbacks</Nav.Link>
</Nav.Item>
</Nav>
</>
</Tab.Container>The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it and hide all following siblings. - Matches a tab, show it and hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
<Tab.Container activeKey="justify-home">
<Nav variant="tabs" className="nav-tabs tab-light-secondary justify-content-around">
<Nav.Item className="flex-fill text-center">
<Nav.Link className="w-100 active" id="justify-home-tab">
<Lifebuoy size={18} className="me-1" />
Home
</Nav.Link>
</Nav.Item>
<Nav.Item className="flex-fill text-center">
<Nav.Link className="w-100" id="justify-profile-tab">
<Keyboard size={18} className="me-1" />
Profile
</Nav.Link>
</Nav.Item>
<Nav.Item className="flex-fill text-center">
<Nav.Link className="w-100" id="justify-contact-tab">
<ThumbsDown size={18} className="me-1" />
Contact
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content className="pt-3" id="justify-LightContent">
<Tab.Pane eventKey="justify-home" id="justify-home-pane">
<p class="f-s-15">...content...</p>
</Tab.Pane>
<Tab.Pane eventKey="justify-profile" id="justify-profile-pane">
<ol>...list...</ol>
</Tab.Pane>
<Tab.Pane eventKey="justify-contact" id="justify-contact-pane">
<p class="f-s-15">...content...</p>
</Tab.Pane>
</Tab.Content>
</Tab.Container>Avatar-based Tabs
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
- Show only the last tab.
- If
:targetmatches a tab, show it. - Hide all following siblings.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
Flag-based Tabs
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.
The idea is to use :target pseudoclass to show tabs, use anchors with fragment identifiers to switch between them. The idea is to use pseudoclass to show tabs, use anchors with fragment identifiers to switch between them.