Skip to content

Commit

Permalink
review: tabs ids in example
Browse files Browse the repository at this point in the history
  • Loading branch information
@hannahiss
hannahiss committed Oct 17, 2023
1 parent 5f708d5 commit df92ca1
Showing 1 changed file with 35 additions and 35 deletions.
70 changes: 35 additions & 35 deletions site/content/docs/5.3/dark-mode.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2170,40 +2170,40 @@ sitemap_exclude: true

<ul role="tablist" aria-owns="nav-tab1 nav-tab2 nav-tab3 nav-tab4" class="nav nav-tabs mt-2" id="nav-tab-with-nested-tabs-2">
<li class="nav-item" role="presentation">
<a class="nav-link active" aria-current="page" id="nav-tab1-2" href="#tab1-content-2" data-bs-toggle="tab" data-bs-target="#tab1-content-2" role="tab" aria-controls="tab1-content-2" aria-selected="true">Tab 1</a>
<a class="nav-link active" aria-current="page" id="nav-tab1-2" href="#" data-bs-toggle="tab" data-bs-target="#tab1-content-2" role="tab" aria-controls="tab1-content-2" aria-selected="true">Tab 1</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-tab2-2" data-bs-toggle="tab" href="#tab2-content" data-bs-target="#tab2-content" role="tab" aria-controls="tab2-content" aria-selected="false">Tab 2</a>
<a class="nav-link" id="nav-tab2-2" data-bs-toggle="tab" href="#" data-bs-target="#tab2-content-2" role="tab" aria-controls="tab2-content-2" aria-selected="false">Tab 2</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-tab3-2" data-bs-toggle="tab" href="#tab3-content" data-bs-target="#tab3-content" role="tab" aria-controls="tab3-content" aria-selected="false">Tab 3</a>
<a class="nav-link" id="nav-tab3-2" data-bs-toggle="tab" href="#" data-bs-target="#tab3-content-2" role="tab" aria-controls="tab3-content-2" aria-selected="false">Tab 3</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link disabled" id="nav-tab4-2" data-bs-toggle="tab" data-bs-target="#tab4-content" role="tab" aria-controls="tab4-content" aria-selected="false" aria-disabled="true">Tab 4</a>
<a class="nav-link disabled" id="nav-tab4-2" data-bs-toggle="tab" data-bs-target="#tab4-content-2" role="tab" aria-controls="tab4-content-2" aria-selected="false" aria-disabled="true">Tab 4</a>
</li>
</ul>

<div class="tab-content" id="nav-tabs-content-2">
<div class="tab-pane-with-nested-tab fade show active" id="tab1-content-2" role="tabpanel" aria-labelledby="nav-tab1">
<ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-underline mt-0">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="nav-linkA-2" href="#linkA-2" data-bs-toggle="tab" data-bs-target="#linkA-2" role="tab" aria-current="page">Link A</a>
<a class="nav-link active" id="nav-linkA-2" href="#" data-bs-toggle="tab" data-bs-target="#linkA-2" role="tab" aria-current="page">Link A</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-linkB-2" href="#linkB" data-bs-toggle="tab" data-bs-target="#linkB" role="tab">Link B</a>
<a class="nav-link" id="nav-linkB-2" href="#" data-bs-toggle="tab" data-bs-target="#linkB-2" role="tab">Link B</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-linkC-2" href="#linkC" data-bs-toggle="tab" data-bs-target="#linkC" role="tab">Link C</a>
<a class="nav-link" id="nav-linkC-2" href="#" data-bs-toggle="tab" data-bs-target="#linkC-2" role="tab">Link C</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link disabled" id="nav-linkD-2" data-bs-toggle="tab" data-bs-target="#linkD" role="tab" aria-disabled="true">Link D</a>
<a class="nav-link disabled" id="nav-linkD-2" data-bs-toggle="tab" data-bs-target="#linkD-2" role="tab" aria-disabled="true">Link D</a>
</li>
</ul>
<div class="tab-content border-0">
<div class="tab-pane fade show active" id="linkA-2" role="tabpanel" aria-labelledby="nav-linkA">Content of Link A</div>
<div class="tab-pane" id="linkB-2" role="tabpanel" aria-labelledby="nav-linkB">Content of Link B</div>
<div class="tab-pane" id="linkC-2" role="tabpanel" aria-labelledby="nav-linkC">Content of Link C</div>
<div class="tab-pane" id="linkD-2" role="tabpanel" aria-labelledby="nav-linkD">Content of Link D</div>
<div class="tab-pane" id="linkB-2" role="tabpanel" aria-labelledby="nav-linkB-2">Content of Link B</div>
<div class="tab-pane" id="linkC-2" role="tabpanel" aria-labelledby="nav-linkC-2">Content of Link C</div>
<div class="tab-pane" id="linkD-2" role="tabpanel" aria-labelledby="nav-linkD-2">Content of Link D</div>
</div>
</div>
<div class="tab-pane" id="tab2-content-2" role="tabpanel" aria-labelledby="nav-tab2">Content of Tab 2</div>
Expand Down Expand Up @@ -2243,33 +2243,33 @@ sitemap_exclude: true

<ul role="tablist" aria-owns="nav-tab1 nav-tab2 nav-tab3 nav-tab4" class="nav nav-tabs mt-2" id="nav-tab-with-nested-tabs-3">
<li class="nav-item" role="presentation">
<a class="nav-link active" aria-current="page" id="nav-tab1-3" href="#tab1-content-3" data-bs-toggle="tab" data-bs-target="#tab1-content-3" role="tab" aria-controls="tab1-content-3" aria-selected="true">Tab 1</a>
<a class="nav-link active" aria-current="page" id="nav-tab1-3" href="#" data-bs-toggle="tab" data-bs-target="#tab1-content-3" role="tab" aria-controls="tab1-content-3" aria-selected="true">Tab 1</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-tab2-3" data-bs-toggle="tab" href="#tab2-content" data-bs-target="#tab2-content" role="tab" aria-controls="tab2-content" aria-selected="false">Tab 2</a>
<a class="nav-link" id="nav-tab2-3" data-bs-toggle="tab" href="#" data-bs-target="#tab2-content-3" role="tab" aria-controls="tab2-content-3" aria-selected="false">Tab 2</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-tab3-3" data-bs-toggle="tab" href="#tab3-content" data-bs-target="#tab3-content" role="tab" aria-controls="tab3-content" aria-selected="false">Tab 3</a>
<a class="nav-link" id="nav-tab3-3" data-bs-toggle="tab" href="#" data-bs-target="#tab3-content-3" role="tab" aria-controls="tab3-content-3" aria-selected="false">Tab 3</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link disabled" id="nav-tab4-3" data-bs-toggle="tab" data-bs-target="#tab4-content" role="tab" aria-controls="tab4-content" aria-selected="false" aria-disabled="true">Tab 4</a>
<a class="nav-link disabled" id="nav-tab4-3" data-bs-toggle="tab" data-bs-target="#tab4-content-3" role="tab" aria-controls="tab4-content-3" aria-selected="false" aria-disabled="true">Tab 4</a>
</li>
</ul>

<div class="tab-content" id="nav-tabs-content-3">
<div class="tab-pane-with-nested-tab fade show active" id="tab1-content-3" role="tabpanel" aria-labelledby="nav-tab1">
<ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-underline mt-0">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="nav-linkA-3" href="#linkA-3" data-bs-toggle="tab" data-bs-target="#linkA-3" role="tab" aria-current="page">Link A</a>
<a class="nav-link active" id="nav-linkA-3" href="#" data-bs-toggle="tab" data-bs-target="#linkA-3" role="tab" aria-current="page">Link A</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-linkB-3" href="#linkB" data-bs-toggle="tab" data-bs-target="#linkB" role="tab">Link B</a>
<a class="nav-link" id="nav-linkB-3" href="#" data-bs-toggle="tab" data-bs-target="#linkB-3" role="tab">Link B</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-linkC-3" href="#linkC" data-bs-toggle="tab" data-bs-target="#linkC" role="tab">Link C</a>
<a class="nav-link" id="nav-linkC-3" href="#" data-bs-toggle="tab" data-bs-target="#linkC-3" role="tab">Link C</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link disabled" id="nav-linkD-3" data-bs-toggle="tab" data-bs-target="#linkD" role="tab" aria-disabled="true">Link D</a>
<a class="nav-link disabled" id="nav-linkD-3" data-bs-toggle="tab" data-bs-target="#linkD-3" role="tab" aria-disabled="true">Link D</a>
</li>
</ul>
<div class="tab-content border-0">
Expand Down Expand Up @@ -2316,33 +2316,33 @@ sitemap_exclude: true

<ul role="tablist" aria-owns="nav-tab1 nav-tab2 nav-tab3 nav-tab4" class="nav nav-tabs mt-2" id="nav-tab-with-nested-tabs-4" data-bs-theme="dark" style="--bs-nav-tabs-link-active-bg: #282d55;">
<li class="nav-item" role="presentation">
<a class="nav-link active" aria-current="page" id="nav-tab1-4" href="#tab1-content-4" data-bs-toggle="tab" data-bs-target="#tab1-content-4" role="tab" aria-controls="tab1-content-4" aria-selected="true">Tab 1</a>
<a class="nav-link active" aria-current="page" id="nav-tab1-4" href="#" data-bs-toggle="tab" data-bs-target="#tab1-content-4" role="tab" aria-controls="tab1-content-4" aria-selected="true">Tab 1</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-tab2-4" data-bs-toggle="tab" href="#tab2-content" data-bs-target="#tab2-content" role="tab" aria-controls="tab2-content" aria-selected="false">Tab 2</a>
<a class="nav-link" id="nav-tab2-4" data-bs-toggle="tab" href="#" data-bs-target="#tab2-content-4" role="tab" aria-controls="tab2-content-4" aria-selected="false">Tab 2</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-tab3-4" data-bs-toggle="tab" href="#tab3-content" data-bs-target="#tab3-content" role="tab" aria-controls="tab3-content" aria-selected="false">Tab 3</a>
<a class="nav-link" id="nav-tab3-4" data-bs-toggle="tab" href="#" data-bs-target="#tab3-content-4" role="tab" aria-controls="tab3-content-4" aria-selected="false">Tab 3</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link disabled" id="nav-tab4-4" data-bs-toggle="tab" data-bs-target="#tab4-content" role="tab" aria-controls="tab4-content" aria-selected="false" aria-disabled="true">Tab 4</a>
<a class="nav-link disabled" id="nav-tab4-4" data-bs-toggle="tab" data-bs-target="#tab4-content-4" role="tab" aria-controls="tab4-content-4" aria-selected="false" aria-disabled="true">Tab 4</a>
</li>
</ul>

<div class="tab-content" id="nav-tabs-content-4" data-bs-theme="dark">
<div class="tab-pane-with-nested-tab fade show active" id="tab1-content-4" role="tabpanel" aria-labelledby="nav-tab1">
<ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-underline mt-0">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="nav-linkA-4" href="#linkA-4" data-bs-toggle="tab" data-bs-target="#linkA-4" role="tab" aria-current="page">Link A</a>
<a class="nav-link active" id="nav-linkA-4" href="#" data-bs-toggle="tab" data-bs-target="#linkA-4" role="tab" aria-current="page">Link A</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-linkB-4" href="#linkB" data-bs-toggle="tab" data-bs-target="#linkB" role="tab">Link B</a>
<a class="nav-link" id="nav-linkB-4" href="#" data-bs-toggle="tab" data-bs-target="#linkB-4" role="tab">Link B</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-linkC-4" href="#linkC" data-bs-toggle="tab" data-bs-target="#linkC" role="tab">Link C</a>
<a class="nav-link" id="nav-linkC-4" href="#" data-bs-toggle="tab" data-bs-target="#linkC-4" role="tab">Link C</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link disabled" id="nav-linkD-4" data-bs-toggle="tab" data-bs-target="#linkD" role="tab" aria-disabled="true">Link D</a>
<a class="nav-link disabled" id="nav-linkD-4" data-bs-toggle="tab" data-bs-target="#linkD-4" role="tab" aria-disabled="true">Link D</a>
</li>
</ul>
<div class="tab-content border-0">
Expand Down Expand Up @@ -2389,33 +2389,33 @@ sitemap_exclude: true

<ul role="tablist" aria-owns="nav-tab1 nav-tab2 nav-tab3 nav-tab4" class="nav nav-tabs mt-2" id="nav-tab-with-nested-tabs-5" data-bs-theme="light" style="--bs-nav-tabs-link-active-bg: #b5e8f7;">
<li class="nav-item" role="presentation">
<a class="nav-link active" aria-current="page" id="nav-tab1-5" href="#tab1-content-5" data-bs-toggle="tab" data-bs-target="#tab1-content-5" role="tab" aria-controls="tab1-content-5" aria-selected="true">Tab 1</a>
<a class="nav-link active" aria-current="page" id="nav-tab1-5" href="#" data-bs-toggle="tab" data-bs-target="#tab1-content-5" role="tab" aria-controls="tab1-content-5" aria-selected="true">Tab 1</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-tab2-5" data-bs-toggle="tab" href="#tab2-content" data-bs-target="#tab2-content" role="tab" aria-controls="tab2-content" aria-selected="false">Tab 2</a>
<a class="nav-link" id="nav-tab2-5" data-bs-toggle="tab" href="#" data-bs-target="#tab2-content-5" role="tab" aria-controls="tab2-content-5" aria-selected="false">Tab 2</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-tab3-5" data-bs-toggle="tab" href="#tab3-content" data-bs-target="#tab3-content" role="tab" aria-controls="tab3-content" aria-selected="false">Tab 3</a>
<a class="nav-link" id="nav-tab3-5" data-bs-toggle="tab" href="#" data-bs-target="#tab3-content-5" role="tab" aria-controls="tab3-content-5" aria-selected="false">Tab 3</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link disabled" id="nav-tab4-5" data-bs-toggle="tab" data-bs-target="#tab4-content" role="tab" aria-controls="tab4-content" aria-selected="false" aria-disabled="true">Tab 4</a>
<a class="nav-link disabled" id="nav-tab4-5" data-bs-toggle="tab" data-bs-target="#tab4-content-5" role="tab" aria-controls="tab4-content-5" aria-selected="false" aria-disabled="true">Tab 4</a>
</li>
</ul>

<div class="tab-content" id="nav-tabs-content-5" data-bs-theme="light">
<div class="tab-pane-with-nested-tab fade show active" id="tab1-content-5" role="tabpanel" aria-labelledby="nav-tab1">
<ul role="tablist" aria-owns="nav-linkA nav-linkB nav-linkC nav-linkD" class="nav nav-underline mt-0">
<li class="nav-item" role="presentation">
<a class="nav-link active" id="nav-linkA-5" href="#linkA-5" data-bs-toggle="tab" data-bs-target="#linkA-5" role="tab" aria-current="page">Link A</a>
<a class="nav-link active" id="nav-linkA-5" href="#" data-bs-toggle="tab" data-bs-target="#linkA-5" role="tab" aria-current="page">Link A</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-linkB-5" href="#linkB" data-bs-toggle="tab" data-bs-target="#linkB" role="tab">Link B</a>
<a class="nav-link" id="nav-linkB-5" href="#" data-bs-toggle="tab" data-bs-target="#linkB-5" role="tab">Link B</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="nav-linkC-5" href="#linkC" data-bs-toggle="tab" data-bs-target="#linkC" role="tab">Link C</a>
<a class="nav-link" id="nav-linkC-5" href="#" data-bs-toggle="tab" data-bs-target="#linkC-5" role="tab">Link C</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link disabled" id="nav-linkD-5" data-bs-toggle="tab" data-bs-target="#linkD" role="tab" aria-disabled="true">Link D</a>
<a class="nav-link disabled" id="nav-linkD-5" data-bs-toggle="tab" data-bs-target="#linkD-5" role="tab" aria-disabled="true">Link D</a>
</li>
</ul>
<div class="tab-content border-0">
Expand Down

0 comments on commit df92ca1

Please sign in to comment.