why arent tabs of bootstrap working - javascript

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#menu2">Video</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="uploaded-image-ct">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Upload image
</button>
</div>
</div>
<div id="songs" class="tab-pane fade">
<div class="form-group">
<input id="song-link" placeholder="Paste Soundcloud link here" type="text">
</div>
</div>
<div id="video" class="tab-pane fade">
<div class="form-group">
<input placeholder="Paste YouTube link here" type="text">
</div>
</div>
</div>
the video section should show youtube which there on html but not on the page.
i checked whether jquery is loaded ahead of bootstrap.js.. But still it is not working. Turns out the tab button is not working like it should. although when u click on image button image section will be shown. Is it the problem only with input tag?

Working Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#video">Video</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="uploaded-image-ct">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Upload image
</button>
</div>
</div>
<div id="songs" class="tab-pane fade">
<div class="form-group">
<input id="song-link" placeholder="Paste Soundcloud link here" type="text">
</div>
</div>
<div id="video" class="tab-pane fade">
<div class="form-group">
<input placeholder="Paste YouTube link here" type="text">
</div>
</div>
</div>
jQuery needs the correct href in the anchor tag which you have in the tab that points to the correct tab-pane.
You were using:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#menu2">Video</a>
</li>
</ul>
You need to have the href of the Video point to #video like so:
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#video">Video</a>
</li>
</ul>

Your video pill has the following:
<li><a data-toggle="pill" href="#menu2">Video</a>
but the id of the tab you are trying to link it to is:
<div id="video" class="tab-pane fade">
you need to change the pill to the same id
<li><a data-toggle="pill" href="#video">Video</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="pill" href="#home">Images</a>
</li>
<li><a data-toggle="pill" href="#songs">Songs</a>
</li>
<li><a data-toggle="pill" href="#video">Video</a>
</li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<div class="uploaded-image-ct">
<button type="button" class="btn btn-default btn-sm">
<span class="glyphicon glyphicon-picture"></span> Upload image
</button>
</div>
</div>
<div id="songs" class="tab-pane fade">
<div class="form-group">
<input id="song-link" placeholder="Paste Soundcloud link here" type="text">
</div>
</div>
<div id="video" class="tab-pane fade">
<div class="form-group">
<input placeholder="Paste YouTube link here" type="text">
</div>
</div>
</div>

Related

Bootstrap nav tabs aren't switching nor displaying content! [Electron.js] [Bootstrap]

I can't figure out why
The tabs aren't switching when clicked
The tabs aren't displaying content
I am using electron and bootstrap, i would appreciate if someone had any reccomendations or solutions. I read a few other similar questions however did not find the answer (as far as i know).
A snippet is provided. Thanks
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="app-corners">
<div class="menu-bar">
<ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1-tab" data-toggle="tab" href="#1">1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="2-tab" data-toggle="tab" href="#2" >2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="3-tab" data-toggle="tab" href="#3">3</a>
</li>
<li class="nav-item">
<a class="nav-link" id="4-tab" data-toggle="tab" href="#4">4</a>
</li>
</ul>
</div>
<div id="container-fluid">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="1">
</div>
<div class="tab-pane fade" id="2" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="3" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="4" >
<h1>HELLO</h1>
</div>
</div>
</div>
</div>
I hope this one will help you,
please add this link in head tag only.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
Because you have not used bootstrap js files. Your code is working fine. Check here
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="app-corners">
<div class="menu-bar">
<ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="1-tab" data-toggle="tab" href="#1">1</a>
</li>
<li class="nav-item">
<a class="nav-link" id="2-tab" data-toggle="tab" href="#2" >2</a>
</li>
<li class="nav-item">
<a class="nav-link" id="3-tab" data-toggle="tab" href="#3">3</a>
</li>
<li class="nav-item">
<a class="nav-link" id="4-tab" data-toggle="tab" href="#4">4</a>
</li>
</ul>
</div>
<div id="container-fluid">
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="1">
</div>
<div class="tab-pane fade" id="2" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="3" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="4" >
<h1>HELLO</h1>
</div>
</div>
</div>
</div>
All i needed to do was update the bootstrap version in the header. Thanks for reading.
Try This:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="menu-bar">
<ul class="nav nav-tabs" style="border-bottom: 0px; background-color: none;" id="myTab" role="tablist">
<li class="active"><a id="1-tab" data-toggle="tab" href="#1">1</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<br>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="1">
</div>
<div class="tab-pane fade" id="2" >
<h1>HELLO</h1>
</div>
<div class="tab-pane fade" id="3" >
<h1>Hello</h1>
</div>
<div class="tab-pane fade" id="4" >
<h1>HELLO</h1>
</div>
</div>
</div>
</body>
</html>

Bootstrap 4 "All" tab

I have created toggleable tabs using Bootstrap 4 "tablist", they are toggleable and work great.
I want to create an "All" tab that will show all of the content of all the different tabs and can't figure out how to make an "All" tab work!
Any help is greatly appreciated!
Here are my tab headings:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div>
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#cases">Cases</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#revrul">Rev. Rul.s & Notices</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#regs">Regulations</a></li>
</ul>
<div class="tab-content">
<div id="cases" class="container tab-pane active"><br>
<h3>Cases</h3>
<ul> Content for cases here</ul>
</div>
<div id="revrul" class="container tab-pane fade"><br>
<h3>Rev. Rul.s & Notices</h3>
<ul> Content for rulings here</ul>
</div>
</div>
<div id="regs" class="container tab-pane fade"><br>
<h3>Regulations</h3>
<ul> Content for regulations here </ul>
</div>
</div>
You would have to manually add some JS that controls the behavior of the "All" link.
What you want to do is:
Create a special tab for showing all content, with ID #show_all
When you click this tab, it adds classes .active and .show to all the panes, so that they'll all be visible.
When you click on a tab that does not have the #show_all ID, it removes the classes .show and .active from all the tab panes that are not the one that you're looking for.
Here's a working snippet.
$("#show_all").on("click", function() {
$(this).addClass("active").parent("li").siblings().find("a").removeClass("active");
$(".tab-pane").removeClass("fade").addClass("active").addClass("show");
});
$(".nav-link").not("#show_all").on("click", function() {
console.log(this.hash);
$(".tab-pane").not(this.hash).removeClass("active").removeClass("show");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#cases">Cases</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#revrul">Rev. Rul.s & Notices</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#regs">Regulations</a></li>
<li class="nav-item"><a class="nav-link" href="#" id="show_all">All</a></li>
</ul>
<div class="tab-content">
<div id="cases" class="container tab-pane active"><br>
<h3>Cases</h3>
<ul> Content for cases here</ul>
</div>
<div id="revrul" class="container tab-pane fade"><br>
<h3>Rev. Rul.s & Notices</h3>
<ul> Content for rulings here</ul>
</div>
<div id="regs" class="container tab-pane fade"><br>
<h3>Regulations</h3>
<ul> Content for regulations here </ul>
</div>
</div>
Try this
$( ".tabContent" ).clone().appendTo("#tabContent");
<script src="http://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs nav-justified" role="tablist">
<li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#all">All</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#cases">Cases</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#revrul">Rev. Rul.s & Notices</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#regs">Regulations</a></li>
</ul>
<div class="tab-content">
<div id="all" class="container tab-pane active">
<h3>ALL</h3>
<div id="tabContent">
</div>
</div>
<div id="cases" class="container tab-pane active">
<div class="tabContent">
<h3>Cases</h3>
<ul> Content for cases here</ul>
</div>
</div>
<div id="revrul" class="container tab-pane fade">
<div class="tabContent">
<h3>Rev. Rul.s & Notices</h3>
<ul> Content for rulings here</ul>
</div>
</div>
<div id="regs" class="container tab-pane fade">
<div class="tabContent">
<h3>Regulations</h3>
<ul> Content for regulations here </ul>
</div>
</div>
</div>

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.

expand grid system column when i click in a icon bootstrap

I have an google maps in a tab with bootstrap, but the map become to small, so i want to change a bootstrap grid system when i click on fa icon, i want the first column torns to col-md-8, and the second column torn to col-md-4.
thx,
here my code:
<h2 class="block-title">Mapas Brasil</h1>
<div class="row">
<div class="col-md-6">
<ul class="nav nav-tabs nav-cptec">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Condição Atual</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Aviso</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperaturas</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu1" role="tabpanel">
<div id="map-canvas"></div>
</div>
<div class="tab-pane" id="menu2" role="tabpanel">Aviso</div>
<div class="tab-pane" id="menu3" role="tabpanel">Temperaturas</div>
</div>
<div class="col-md-6">
<ul class="nav nav-tabs nav-justified nav-cptec">
<li class="nav-item">
<a class="d-flex align-items-center nav-link active" data-toggle="tab" href="#menu-1" role="tab">Anánalise Sinótica</a>
</li>
<li class="nav-item">
<a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-2" role="tab">Imagens de Satélite</a>
</li>
<li class="nav-item">
<a class="d-flex align-items-center nav-link" data-toggle="tab" href="#menu-3" role="tab">Vale do Paraíba</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu-1" role="tabpanel">
<img src="/images/sinotica.png" alt="" class="img-fluid">
</div>
<div class="tab-pane" id="menu-2" role="tabpanel">Satélite</div>
<div class="tab-pane" id="menu-3" role="tabpanel">Vale</div>
</div>
<img src="http://i.imgur.com/mE72FHG.png" alt="Faça sua analise sinótica" class="img-fluid top5" width="100%">
</div>
</div>
$('#abrir').click(function() {
$('#teste').removeClass('col-md-6').addClass('col-md-8 open');
$('#teste2').removeClass('col-md-6').addClass('col-md-4');
});
$('body').click(function(e){
//Detect if click is outside #abrir AND is "open"
if($(e.currentTarget).closest('#abrir').length==0 && $('#abrir').hasClass('open')){
$('#teste').addClass('col-md-6').removeClass('col-md-8 open');
$('#teste2').addClass('col-md-6').removeClass('col-md-4');
}
});
This should do the trick. What you want is to reverse what you do on the click element. Put an event on the body, to listen for every click and inside this handler, see if the clicked element is inside or outside the targeted element to make sure we trigger accordingly.
You'll have to make sure that all click handlers on your page do not prevent event bubbling (it shouldn't, as it is bad practice) or else the click outside the element will not always be seen...
i added this code and change the column to col-md-6 to col-md-4, but when i click out, dont turn back.
javascript its the same that you gave to me
my code:
<div class="row">
<div id="teste" class="col-md-6">
<ul class="nav nav-tabs nav-cptec">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#menu1" role="tab">Condição Atual</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu2" role="tab">Aviso</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#menu3" role="tab">Temperaturas</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="menu1" role="tabpanel">
<i class="fa fa-arrow-circle-o-right" aria-hidden="true" id="abrir"></i>
<div id="map-canvas"></div>
</div>
<div class="tab-pane" id="menu2" role="tabpanel">Aviso</div>
<div class="tab-pane" id="menu3" role="tabpanel">Temperaturas</div>
</div>
</div>

Bootstrap nav tabs: active class doesnt work

Here's the HTML code:
<div class="process">
<h2 style="text-transform: uppercase;">The Application Process</h2>
<br><br>
<div class="row">
<div class="col-md-3" align="left">
<ul class="nav nav-pills flex-column" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">a</div>
<div class="tab-pane" id="profile" role="tabpanel">b</div>
<div class="tab-pane" id="messages" role="tabpanel">c</div>
<div class="tab-pane" id="settings" role="tabpanel">d</div>
</div>
</div>
</div>
</div>
And here's the JS code:
<script>
$(function () {
$('#myTab a:last').tab('show')
})
$('ul.nav-pills li a').click(function (e) {
$('ul.nav-pills li.active').removeClass('active')
$(this).parent('li').addClass('active')
})
</script>
The nav that have the active class is the home nav, but somehow the settings is the one who is active. I tried to search many times, but doesn't find the answer.
Is it the javascript or the container class? Because I already use container before the div "process". Thanks.
If you add the bootstrap JS and get rid of your JS code, it should work:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<div class="process">
<h2 style="text-transform: uppercase;">The Application Process</h2>
<br><br>
<div class="row">
<div class="col-md-3" align="left">
<ul class="nav nav-pills flex-column" id="myTab" role="tablist">
<li class="nav-item active">
<a class="nav-link" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#messages" role="tab" aria-controls="messages">Messages</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#settings" role="tab" aria-controls="settings">Settings</a>
</li>
</ul>
</div>
<div class="col-md-9">
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">a</div>
<div class="tab-pane" id="profile" role="tabpanel">b</div>
<div class="tab-pane" id="messages" role="tabpanel">c</div>
<div class="tab-pane" id="settings" role="tabpanel">d</div>
</div>
</div>
</div>
</div>
Hope this helps. :)

Categories