Bootstrap nav tabs control original when cloned - javascript

I have a use case where i need to create a series of "cards" with tabs on top (so each card has tabs). To achieve this, I intended on having a template element which I clone and then populate. This works as expected, EXCEPT for the tabs on the cloned elements, when clicked they control the original template object instead of the current clone.
I'm assuming this is due to the event listeners that have been cloned are still connected to the original object? Is there some way to disconnect them and ensure they point and at the newly cloned objects?
Example code below...
document.querySelector("#add_card").addEventListener("click", add_card);
function add_card() {
let clone = document.querySelector('.mytab.template').cloneNode(true)
document.querySelector('#card_list').appendChild(clone);
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="container py-3">
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
<button type="button" class="btn btn-primary" id="add_card">Add Card</button>
</nav>
</div>
</header>
<main>
<div class="row row-cols-1 row-cols-md-4 mb-4 text-left" id="card_list">
<div class="col mytab template">
<div class="card mb-4 rounded-3 shadow-sm ">
<div class="card-header">
<ul class="nav nav-tabs card-header-pills nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="true" data-bs-toggle="tab" href=".one">one</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href=".two">two</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane one active">
<h1>ONE</h1>
</div>
<div class="tab-pane two">
<h1>Two</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</div>

The bottom line is that tab targets must have unique identifiers. You'd have the same problem if you were to duplicate the markup itself. Here's how you might do that. Notice that I've moved the template to simplify the operation.
let iterator = 0;
document.querySelector("#add_card").addEventListener("click", add_card);
function add_card() {
let clone = document.querySelector('.template').cloneNode(true);
// add unique classes to each pane element
clone.querySelectorAll('.tab-pane').forEach((el, i) => {
el.classList.add('tab_' + iterator + i);
});
clone.querySelectorAll('.nav-link').forEach((el, i) => {
// update href attributes on each tab element to match panes
el.setAttribute('href', '.tab_' + iterator + i);
// initialize Bootstrap tabs on each tab element
const tab = new bootstrap.Tab(el)
el.addEventListener('click', event => {
event.preventDefault();
tab.show();
})
});
// append the clone
document.querySelector('#card_list').appendChild(clone);
// show the clone
clone.classList.remove('d-none');
iterator++;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
<div class="container py-3">
<header>
<div class="d-flex flex-column flex-md-row align-items-center pb-3 mb-4 border-bottom">
<nav class="d-inline-flex mt-2 mt-md-0 ms-md-auto">
<button type="button" class="btn btn-primary" id="add_card">Add Card</button>
</nav>
</div>
</header>
<main>
<div class="row row-cols-1 row-cols-md-4 mb-4 text-left" id="card_list">
<div class="col">
<div class="card mb-4 rounded-3 shadow-sm ">
<div class="card-header">
<ul class="nav nav-tabs card-header-pills nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="true" data-bs-toggle="tab" href=".one">one</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href=".two">two</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane one active">
<h1>ONE</h1>
</div>
<div class="tab-pane two">
<h1>Two</h1>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
<div class="col template d-none">
<div class="card mb-4 rounded-3 shadow-sm ">
<div class="card-header">
<ul class="nav nav-tabs card-header-pills nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="true">one</a>
</li>
<li class="nav-item">
<a class="nav-link">two</a>
</li>
</ul>
</div>
<div class="card-body tab-content">
<div class="tab-pane active">
<h1>ONE</h1>
</div>
<div class="tab-pane">
<h1>Two</h1>
</div>
</div>
</div>
</div>

Related

Unable to paste copied text or url in an HTML form text input area

I have an HTML page designed in Bootstrap 5 which has a simple form with a single text input field. When I test the page in my desktop or laptop, I am able to copy any text or web link and paste it into the form's text input field. If the test the same page from my live website and test it in my mobile phone's browser, the paste operation sometimes works and sometimes does not.
On older Android phones, if I copy some text and then try to paste it into my form, it works. But, if I use a relatively new Android phone, I am unable to paste the copied text. It appears as if the text was not copied properly, i.e. the clipboard is empty.
Is this an issue with my code or JavaScript loaded in my html or is this an issue with my mobile device?
Please advise.
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<div class="container">
<nav class="navbar navbar-expand-sm bg-light navbar-light fixed-top">
<div class="container-fluid">
<!-- Navbar Brand -->
<a class="navbar-brand" href="index.html">
<img class="img-fluid ps-5 pt-2" src="https://via.placeholder.com/150" alt="Example Logo" width="150" height="50" style="position:absolute; top:0; left:0">
</a>
<!-- Toggler/Collapsible Button -->
<button class="navbar-toggler ms-auto ms-sm-2" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle Navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse justify-content-center" id="navbarCollapse">
<ul class="navbar-nav ms-2 align-items-end">
<li class="nav-item">
<a class="nav-link active" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="register.html">Register</a>
</li>
<li class="nav-item">
<a class="nav-link" href="login.html">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" href="contact.html">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="faq.html">FAQ</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<br>
<!-- Headline -->
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<h3>Example Website</h3>
<p>Demonstrate HTML5 Forms</p>
</div>
<!-- Form Input Area -->
<div class="container rounded mt-3 pt-3 pb-1 bg-dark text-white" style="width: 70%;">
<form method="post" class="needs-validation" novalidate>
<div class="input-group mb-3">
<div class="input-group-prepend">
<span class="input-group-addon"><img src="https://via.placeholder.com/35" width="35" height="35"></span>
</div>
<input type="text" class="form-control" placeholder="Enter your name" name="fullname" required>
<div class="input-group-append">
<button class="btn btn-primary" type="submit">Submit</button>
</div>
<div class="invalid-feedback">Compulsory field</div>
</div>
<div class="form-check ms-2">
<input class="form-check-input" type="checkbox" id="check1" name="checkrules" value="accept" required>
<label class="form-check-label">I accept the rules policy.</label>
</div>
</form>
</div>
<br>
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<div class="row">
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test1">
<p class="text-center mt-2">Test 1</p>
</div>
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test2">
<p class="text-center mt-2">Test 2</p>
</div>
<div class="col-xl-4">
<img class="img-fluid mx-auto d-block" src="https://via.placeholder.com/100" alt="test3">
<p class="text-center mt-2">Test 3</p>
</div>
</div>
</div>
<!-- Description -->
<div class="container mt-5 pt-3 pb-1" style="width: 70%;">
<h5>Welcome to Example.com</h5>
<ul>
<li>Sentence 1</li>
<li>Sentence 2</li>
<li>Sentence 3</li>
<li>Sentence 4</li>
<li>Sentence 5</li>
</ul>
</div>
<footer class="footer mt-auto py-3 bg-light">
<div class="container">
<br>
<p class="text-muted text-center">Copyright &copy
<script>
document.write(new Date().getFullYear())
</script> Example</p>
<p class="text-muted text-center">Rules</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>

How can I make a bootstrap media list with a scroll bar?

Here is my code:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
</style>
</head>
<body class="p-1">
<div class="p-0 container-fluid">
<div class="p-0 row h-25 no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<video id="selfView" class="h-100 w-100 position-absolute" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="d-flex flex-row justify-content-center p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn btn-sm btn-lg btn-success">
TV:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareVideo" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-success">
Light:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareAudio" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-danger">
Air Cond:<span class="badge badge-danger">Off</span>
<input type="checkbox" id="shareScreen">
</label>
</div>
<div class="btn-group-toggle p-1">
<button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
</div>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<ul class="nav nav-pills p-1 d-flex justify-content-around" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active"
id="pills-info-tab" data-toggle="pill"
href="#pills-info" role="tab" aria-controls="pills-info" aria-selected="true">
i
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-member-tab" data-toggle="pill"
href="#pills-member" role="tab" aria-controls="pills-member" aria-selected="false">
f
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-message-tab" data-toggle="pill"
href="#pills-message" role="tab" aria-controls="pills-message" aria-selected="false">
c
</a>
</li>
</ul>
<div class="tab-content border border-success position-relative" id="pills-tabContent">
<div class="tab-pane fade p-0 show active " id="pills-info" role="tabpanel" aria-labelledby="pills-member-tab">
<ul class="list-unstyled overflow-auto h-100">
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
</ul>
</div>
<div class="tab-pane fade p-0" id="pills-member" role="tabpanel" aria-labelledby="pills-member-tab">
2
</div>
<div class="tab-pane fade p-0" id="pills-message" role="tabpanel" aria-labelledby="pills-member-tab">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
How can I make the bootstrap media list(i.e line 81) with a scroll bar?
I have using a "position-relative" and "position-absolute" class to make the browser show a scroll bar.
Unfortunately, it does not work.
It is because when I browse the web page with a mobile phone the media list is too long.
Use CSS, place this into the empty <style></style> tag, and remove the overflow-auto h-100 classes from the ul.
#pills-info {
height: calc(100vh - 100px);
overflow-y: scroll
}
The scrollbar can be added by using a CSS class with these 2 attributes:
overflow-y: scroll
max-height: height;
An example CSS class for scroll bar:
.scroll-bar {
overflow-x: scroll;
overflow-y: scroll;
max-height: 100px;
}
Here is the working example with CSS class added to the list:
<html>
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<style>
.scroll-bar {
overflow-x: scroll;
overflow-y: scroll;
max-height: 100px;
}
</style>
</head>
<body class="p-1">
<div class="p-0 container-fluid">
<div class="p-0 row h-25 no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<video id="selfView" class="h-100 w-100 position-absolute" controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="d-flex flex-row justify-content-center p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn btn-sm btn-lg btn-success">
TV:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareVideo" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-success">
Light:<span class="badge badge-success">On</span>
<input type="checkbox" id="shareAudio" checked>
</label>
</div>
<div class="btn-group-toggle p-1" data-toggle="buttons">
<label class="btn-sm btn btn-lg btn-danger">
Air Cond:<span class="badge badge-danger">Off</span>
<input type="checkbox" id="shareScreen">
</label>
</div>
<div class="btn-group-toggle p-1">
<button class="btn-sm btn btn-lg btn-success">Create a meeting</button>
</div>
</div>
</div>
<div class="p-0 row no-gutters">
<div class="p-0 col-12 col-sm-12 col-lg-12 col-xl-12">
<ul class="nav nav-pills p-1 d-flex justify-content-around" id="pills-tab" role="tablist">
<li class="nav-item">
<a class="nav-link active"
id="pills-info-tab" data-toggle="pill"
href="#pills-info" role="tab" aria-controls="pills-info" aria-selected="true">
i
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-member-tab" data-toggle="pill"
href="#pills-member" role="tab" aria-controls="pills-member" aria-selected="false">
f
</a>
</li>
<li class="nav-item">
<a class="nav-link"
id="pills-message-tab" data-toggle="pill"
href="#pills-message" role="tab" aria-controls="pills-message" aria-selected="false">
c
</a>
</li>
</ul>
<div class="tab-content border border-success position-relative" id="pills-tabContent">
<div class="tab-pane fade p-0 show active" id="pills-info" role="tabpanel" aria-labelledby="pills-member-tab">
<ul class="list-unstyled overflow-auto h-100 scroll-bar">
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
<li class="media">
a
</li>
<li class="media">
b
</li>
<li class="media">
c
</li>
</ul>
</div>
<div class="tab-pane fade p-0" id="pills-member" role="tabpanel" aria-labelledby="pills-member-tab">
2
</div>
<div class="tab-pane fade p-0" id="pills-message" role="tabpanel" aria-labelledby="pills-member-tab">
3
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:

jQuery toggle sidebar submenu based on active

I have a sidebar menu that's built using Bootstrap 4. To create a submenu that expanded right utilizing jQuery. It looks like this:
<div class="container-fluid">
<div class="row">
<nav class="col-md-1 d-none d-md-block sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link d-flex align-items-center flex-column sidebar" href="#" data-toggle="collapse" data-target="#submenu" aria-expanded="false" id="sidebarCollapse" >
<%= image_tag 'products.png' %>
<p>Products</p>
</a>
</li>
</ul>
</div>
</nav>
<!--Product Sidebar-->
<nav id="sidebar">
<div class="sidebar-header">
<h3>Bootstrap Sidebar</h3>
</div>
<ul class="list-unstyled components">
<li class="active">
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
Main Item
</a>
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Item 1
</li>
<li>
Item 2
</li>
<li>
Item 3
</li>
</ul>
</li>
</ul>
</nav>
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Dashboard</h1>
<div class="btn-toolbar mb-2 mb-md-0">
<div class="btn-group mr-2">
<button class="btn btn-sm btn-outline-secondary">Share</button>
<button class="btn btn-sm btn-outline-secondary">Export</button>
</div>
</div>
</div>
<canvas class="my-4 w-100" id="myChart" width="900" height="380"></canvas>
</main>
</div>
</div>
Then the jQuery:
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});
This mostly works correctly. I click on the anchor tag of Products and the submenu/sidebar opens up to the right. However the problem is when not active it will show Bootstrap Sidebar and Main Item. How do I get it so that when not active that the sidebar has a visibility of hidden?
I've tried the following with jQuery with no luck:
$(document).ready(function () {
$('#sidebar').hide();
$('#sidebarCollapse').on('click', function (e) {
e.preventDefault();
$('#sidebar', this).toggle('active');
});
});
Do you have your CSS set up to hide it initially?
#sidebar {
display:none;
}
#sidebar.active{
display:block;
}

Bootstrap 4 navigation tabs content not showing content on initial page load

On initial page load, the tabs show but the content for that selected tab does not.
If I click the "Link" tab and back to the "Post" tab then it shows up.
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
On page load it looks like this (the div with the tab-pane class hasn't been displayed):
There are no errors in my console and the bootstrap JS file is loaded. There are some similar questions around but the solutions have not worked for me.
What do I need to add to get the tab pane to display when the page loads?
Check this out
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="card text-center">
<div class="card-header">
<ul class="nav nav-tabs card-header-tabs" id="tabs">
<li class="nav-item">
<a class="active nav-link active" href="#post" data-toggle="tab">Post</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#link" data-toggle="tab">Link</a>
</li>
</ul>
</div>
<div class="card-body">
<div class="tab-content">
<div class="tab-pane active" id="post">post</div>
<div class="tab-pane" id="link">link</div>
</div>
</div>
</div>
</div>
The root cause of your problem was the fade class. Well done ! Removing it is the solution.

Why when tab2 is clicked it appears always the content of the tab1?

I have some tabs using bootstrap 4. In the tab with id "mytabs" I have other two tabs inside it. And in this tabs inside "#mytabs" that is an issue. If I click in the "tab1" link it appears the content of the tab1 but if I click in the "tab2" link it still appears the content of the "tab1".
Do you know where is the issue?
Fiddle with issue: https://jsfiddle.net/cv25swga/8/
HTML:
<body>
<div class="bg-light-gray2">
<div class="container nopadding py-4">
<div class="row mt-3">
<div class="col-12">
<ul class="nav nav-pills bg-light-gray registration_form_list" role="tablist">
<!-- other tab links -->
<li class="disabled">
<a class="nav-link" href="#mytabs" data-toggle="tab" role="tab">
<i class="fa fa-lock" aria-hidden="true"></i>
<span class="d-none d-lg-inline-block">Access Data</span>
</a>
</li>
</ul>
<div class="tab-content registration_body bg-white" id="myTabContent">
<div class="tab-pane clearfix fade" id="mytabs" role="tabpanel"
aria-labelledby="contact-tab">
<div class="d-flex mb-3">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active border" id="tab1" href="#tab1"
data-toggle="tab"
role="tab">tab1</a>
</li>
<li class="nav-item">
<a class="nav-link border" id="tab2" href="#tab2"
data-toggle="tab" role="tab">tab2</a>
</li>
</ul>
</div>
<div class="tab-content bg-white" id="myTabContent">
<div class="tab-pane fade show active clearfix" id="tab1" role="tabpanel"
aria-labelledby="home-tab">
tab1
</div>
<div class="tab-pane fade show clearfix" id="tab2" role="tabpanel"
aria-labelledby="home-tab">
tab2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
This is caused by the fact both your tabs and the links have the same ID.
Change your IDs up so that they are unique on the page and the problem will disappear.

Categories