Body
Sample of tabbed content in TDx KB - Tevis's version (#ID)
Home content - can add here, too!!!
New paragraph - in the same DIV?
- list items, too
- how do they work?
Have to add paragraphs within the DIV to keep the content on a single tab. No big deal.
profile content - can I add text here? I can!
Other Topic content -
Katie's version of Tevis's HTML Code
|
<ul class="nav nav-tabs">
<li class="nav-item active"><a aria-expanded="true" class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
<li class="nav-item"><a aria-expanded="false" class="nav-link" data-toggle="tab" href="#profile">Profile</a></li>
<li class="nav-item"><a aria-expanded="false" class="nav-link active" data-toggle="tab" href="#other">Other Topic</a></li>
<!-- Add more tabs as needed -->
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">
<p>Home content - can add here, too!!!</p>
<p>New paragraph - in the same DIV?</p>
<ul>
<li class="tab-pane active">list items, too</li>
<li class="tab-pane active">how do they work?</li>
</ul>
<p class="tab-pane active">Have to add paragraphs within the DIV to keep the content on a single tab. No big deal.</p>
<p> </p>
</div>
<div class="tab-pane" id="profile">profile content - can I add text here? I can!</div>
<div class="tab-pane" id="other">Other Topic content - </div>
<!-- Add more tab panes as needed --></div>
|
Code Snip from Tevis Boulware at U of Oregon
|
<ul class="nav nav-tabs">
<li class="nav-item"><a aria-expanded="false" class="nav-link active" data-toggle="tab" href="#home">Home</a></li>
<li class="nav-item active"><a aria-expanded="true" class="nav-link" data-toggle="tab" href="#profile">Profile</a></li>
<!-- Add more tabs as needed -->
</ul>
<div class="tab-content">
<div class="tab-pane" id="home">Home content</div>
<div class="tab-pane active" id="profile">profile content</div>
<!-- Add more tab panes as needed -->
</div>
|
Screen shot of email from Tevis Boulware at University of Oregon with HTML code that helps to create tabs in the TDx KB (6.18.2024, TDx v.11.9)
Variation by Dan Handyside, University of Pittsburgh
Using "data-target instead of ID)
|
<!-- Nav tabs -->
<ul class="nav nav-tabs">
<li class="nav-item active"><a aria-expanded="true" class="nav-link active" data-target=".TabName" data-toggle="tab" href="#TabName" role="tab">Tab Name</a></li>
<li class="nav-item"><a aria-expanded="false" class="nav-link " data-target=".TabName2" data-toggle="tab" href="#TabName2" role="tab">Tab Name Two (2)</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane TabName active">
<p>This is the first Tab Name's content.</p>
<P>TabName Content goes here - in "p" tags</p>
</div>
<div class="tab-pane TabName2 active">
<p>This is the second Tab Name's content.</p>
<P>TabName2 Content goes here - in "p" tags</p>
</div>
<!-- Add more tab panes as needed -->
</div>
<p>.
<h2>Need Help?</h2>
|
TabName Content goes here - in "p" tags
.
.
Katie's version with data-target
This is the first Tab Name's content.
TabName Content goes here - in "p" tags
This is the second Tab Name's content.
TabName2 Content goes here - in "p" tags
.
Need Help?