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. :)
Related
In this Html, I have used nav-item and links. If I click update1 button, it should navigate to tabs-2 nav-link. I tried, but the page is navigating, the nav-link is not getting active.Can you please help me out?
Html:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#tabs-1" role="tab">Video consultation</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-2" role="tab">In-clinic consultation</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#tabs-3" role="tab">Time Off</a>
</li>
</ul>
<div class="tab-content mb-5">
<div class="tab-pane active" id="tabs-1" role="tabpanel">
<div class="carddesign" style="padding: 20px;">
<div>form1</div>
<button>update1<button>
</div>
</div>
<div class="tab-pane" id="tabs-2" role="tabpanel">
<div class="row carddesign" style="padding:0px 15px 40px;">
<div>form2</div>
<button>update2<button>
</div>
</div>
</div>
You have navigation issues because of class="nav-link active" that's not dynamic so your display div will be always nav number one.
To fix that you have to do some change.
I suppose you are developing an angular app so first in your .ts file you need to add two things :
add a variable named for example selectedTab and we pass an initial value of 1.
add this function :
public onClickSelectTab(navIndex: number) {
return (this.selectedTab = navIndex);
}
to resume your .ts have to look like this:
selectedTab = 1;
public onClickSelectTab(navIndex: number) {
return (this.selectedTab = navIndex);
}
After that update you have to do some changes in your .html file
add a (click) param to your a tags like this:
<li class="nav-item">
<a
class="nav-link active"
(click)="onClickSelectTab(1)"
data-toggle="tab"
href="./#tabs-1"
role="tab"
>Video consultation</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
data-toggle="tab"
(click)="onClickSelectTab(2)"
href="./#tabs-2"
role="tab"
>In-clinic consultation</a
>
</li>
<li class="nav-item">
<a
class="nav-link"
(click)="onClickSelectTab(3)"
data-toggle="tab"
href="./#tabs-3"
role="tab"
>Time Off</a
>
</li>
add dynamic class to your div :
<div
class="tab-pane"
[ngClass]="{'active':selectedTab===1 } "
id="tabs-1"
role="tabpanel"
>
<div class="carddesign" style="padding: 20px;">
<div>form1</div>
<button>update1</button>
</div>
</div>
<div
class="tab-pane"
[ngClass]="{'active':selectedTab===2 } "
id="tabs-2"
role="tabpanel"
>
<div class="row carddesign" style="padding: 0px 15px 40px;">
<div>form2</div>
<button>update2</button>
</div>
</div>
<div
[ngClass]="{'active':selectedTab===3 } "
class="tab-pane"
id="tabs-3"
role="tabpanel"
>
<div class="carddesign" style="padding: 20px;">
<div>form3</div>
<button>update3</button>
</div>
</div>
</div>
see an example here.
You better replace <button>update1<button> on update1
If you using angular use <a [routerLink]="['/tabs-2']">update1</a>
Or do it in code
<button (click)="navigateToTabs2()">update1<button>
constructor(private router: Router) { }
navigateToTabs2() {
this.router.navigate(['/tabs-2']);
}
html:
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" [ngClass]="{'active':selectedTab===1 }" data-toggle="tab" href="#tabs-1" role="tab">Video consultation</a>
</li>
<li class="nav-item">
<a class="nav-link" [ngClass]="{'active':selectedTab===2 }" data-toggle="tab" href="#tabs-2" role="tab">In-clinic consultation</a>
</li>
<li class="nav-item">
<a class="nav-link" [ngClass]="{'active':selectedTab===3 }" data-toggle="tab" href="#tabs-3" role="tab">Time Off</a>
</li>
</ul>
<div class="col-md-3 col-sm-12" style="margin-left: 70%;"
(click)="updateSevenProfile()">
<a (click)="onClickSelectTab(3)" data-toggle="tab" href="#tabs-3"
role="tab">
<button>Update1</button>
</a>
</div>
I have implemented tab using bootstrap, there are 3 tabs and each of them has contents in them, but while I am executing the code all the contents of active tab is not visible, content is visible only after any other tab is clicked, when checked on inspect element does not show active class.
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<div class="tab-pane fade show active" id="all" role="tabpanel" aria-labelledby="all-tab">
Content.........
</div>
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
Content.........
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Content.........
</div>
</div>
in inspect div element only shows three classes (class="tab-pane fade show") but not active class.
#conrad
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
add this script link to your shipify theme.liquid head section
<a class="nav-link active" id="all-tab" data-toggle="tab"
the data toggle need a unique id you do not mention it
you put the same data-toggle change relevant tab id
You need to add active class to li tag and add in class inside first div which you need to display
Demo Code :
<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.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<!--add active to li-->
<li class="nav-item active">
<a class="nav-link" id="all-tab" data-toggle="tab" href="#all" role="tab" aria-controls="home" aria-selected="true">All</a>
</li>
<li class="nav-item">
<a class="nav-link" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Cash</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Miles</a>
</li>
</ul>
<div class="tab-content pt-3" id="myTabContent">
<!--added class in-->
<div class="tab-pane fade active in" id="all" role="tabpanel" aria-labelledby="all-tab">
Content1.........
</div>
<div class="tab-pane fade" id="home" role="tabpanel" aria-labelledby="home-tab">
Content2.........
</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
Content3.........
</div>
</div>
There's an a inside the li elements. I want to add the current class to the related li when the user clicks on the a. However, I am not sure how it can be done.
$(".nav-link").on('click', function(e) {
$(this).parent().toggleClass('current');
})
.nav-item.current {
width: 300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" />
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item current">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
I tried to use toggle but it will mess up when I click the a link again. Please help me. Thank you.
codepen - https://codepen.io/rae0724/pen/pZNQMK
For some reasons, if i need the function to detect if .nav-link has class .active, then just add on the current class to parent? any ways I can make this happen?
See the updated function
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
$(this).parent().addClass('current');
})
I added $(".current").removeClass('current'); line.
You need to remove the current class from all the elements first, then add it again on the required element.
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
$(this).parent().addClass('current');
})
.nav-item.current {
width: 300px;
}
<link rel="stylesheet prefetch" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item current">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
Updated Answer(based on comments)
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
setTimeout(function() {
$(".active").parent().addClass('current');
}, 0);
})
$(".nav-link").on('click', function(e) {
$(".current").removeClass('current');
setTimeout(function() {
$(".active").parent().addClass('current');
}, 0);
})
.nav-item.current {
width: 300px;
}
<link rel="stylesheet prefetch" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item current">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
Remove the class from all siblings and add to the active link,
use $(this).parent().addClass('current').siblings().removeClass('current'); to achieve it, please check the working example below.
$(".nav-link").on('click', function(e) {
$(this).parent().addClass('current').siblings().removeClass('current');
})
.nav-item.current {
width: 300px;
border-bottom: 2px solid green
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item current">
<a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home</div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
</div>
I have got the basic tab of bootstrap and i want when i change the tab menu the content (tab-pane) should animate like bootstrap collapse does( slide down/slide up)
Is it possible ?
<ul class="nav" 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 class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel">This Is good</div>
<div class="tab-pane" id="profile" role="tabpanel">This is better</div>
<div class="tab-pane" id="messages" role="tabpanel">Thhis is excellent </div>
<div class="tab-pane" id="settings" role="tabpanel">This is poor</div>
</div>
I'm running out of idea so please help me i know it's a silly question.
Here is the EXAMPLE
First download animate.css and add it to code. Lastly give class to tab-content
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" rel="stylesheet">
<ul class="nav" 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 class="tab-content">
<div class="tab-pane active animated bounceInDown" id="home" role="tabpanel">This Is good</div>
<div class="tab-pane animated bounceInDown" id="profile" role="tabpanel">This is better</div>
<div class="tab-pane animated bounceInDown" id="messages" role="tabpanel">Thhis is excellent </div>
<div class="tab-pane animated bounceInDown" id="settings" role="tabpanel">This is poor</div>
</div>
Please try this. I have added some js for sliding effect.
$('.tabs').on('show.bs.tab', function (e) {
if (e.relatedTarget === undefined) {
$($(e.target).attr('href')).slideDown('slow');
}
else {
$($(e.relatedTarget).attr('href')).slideUp({ duration: 'fast', queue: true,
done: function() {
$($(e.target).attr('href')).slideDown('slow');
}
});
}
});
.tab-pane{
background:#ccc;
padding:20px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div class="tabs">
<ul class="nav" 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 class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" style="display: block;"><p>This Is good</p></div>
<div class="tab-pane " id="profile" role="tabpanel" style="display: none;"><p>This is better</p></div>
<div class="tab-pane " id="messages" role="tabpanel" style="display: none;"><p>Thhis is excellent</p></div>
<div class="tab-pane " id="settings" role="tabpanel" style="display: none;"><p>This is poor</p></div>
</div>
</div>
What about that :
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
$($(e.target).attr('href')).hide()
})
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
$($(e.target).attr('href')).slideDown()
})
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>