Search

Adding tabs to kopage

Thursday, January 13, 2022

Kopage is built on bootstrap, and bootstrap includes tabs.

If you want to add tabs to your page, create a new content block, then edit the HTML of that block and insert of the following code.



<div class="container">

<ul class="nav nav-tabs" id="myTab" role="tablist">

<li class="nav-item mr-1" role="presentation">

<button class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">
Home
</button>

</li>

<li class="nav-item mr-1" role="presentation">

<button class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">
Profile
</button>

</li>

<li class="nav-item mr-1" role="presentation">

<button class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">
Contact
</button>

</li>
</ul>
<div class="tab-content" id="myTabContent">

<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab">

<div class="keditable">
1...
</div>

</div>

<div class="tab-pane show" id="profile" role="tabpanel" aria-labelledby="profile-tab">

<div class="keditable">
2...
</div>

</div>

<div class="tab-pane" id="contact" role="tabpanel" aria-labelledby="contact-tab">

<div class="keditable">
3...
</div>

</div>
</div>

</div>
No comments yet