Toggle multiple ids with button
I can't seem to do it in bootstrap 5
I tried the collapse function however this does not work well because the buttons work as a tab.
Toggle multiple ids with button
I can't seem to do it in bootstrap 5
I tried the collapse function however this does not work well because the buttons work as a tab.
<div class="col-11 col-lg-7 text-center">
<div class="nav btn-group mt-5" role="tablist" aria-orientation="vertical" >
<a class="btn btn-outline-success btn btn-light active" data-bs-toggle="tab" data-bs-target="#one-week" type="button" role="tab" aria-selected="true">1 Week</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#two-weeks" type="button" role="tab" aria-selected="false">2 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#three-weeks" type="button" role="tab" aria-selected="false">3 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#four-weeks" type="button" role="tab" aria-selected="false">4 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#more-weeks" type="button" role="tab" aria-selected="false">More Weeks</a>
</div>
</div>
$ 90 /first week
$ /two weeks
$ /three weeks
<!-- four -->
<div class="tab-pane fade" id="four-weeks" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="135" data-aos data-aos-id="countup:in"></span> <span
class="h6 font-weight-normal align-self-end">/four weeks</span>
</div>
</div>
<!-- five -->
<div class="tab-pane fade" id="more-weeks" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="15" data-aos data-aos-id="countup:in">20</span> <span
class="h6 font-weight-normal align-self-end">/extra weeks</span>
</div>
</div>
</div>
<hr style="color: #d2d2d7;">
<div class="d-flex pt-4">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">16 Gorilla Boxes</p>
</div>
<div class="d-flex">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
</div>
</div>
<div class="tab-content " >
<!-- one -->
<div class="tab-pane fade show active" id="one-week1" role="tabpanel" ><span class="h5 mb-0">
<div class="d-flex mb-3">$</span> <span class="display-2 mb-0">90</span> <span
class="h6 font-weight-normal align-self-end">/first week</span>
</div>
</div>
<!-- two -->
<div class="tab-pane fade" id="two-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="105" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/two weeks</span>
</div>
</div>
<!-- three -->
<div class="tab-pane fade" id="three-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="120" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/three weeks</span>
</div>
</div>
<!-- four -->
<div class="tab-pane fade" id="four-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="135" data-aos data-aos-id="countup:in"></span> <span
class="h6 font-weight-normal align-self-end">/four weeks</span>
</div>
</div>
<!-- five -->
<div class="tab-pane fade" id="more-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="15" data-aos data-aos-id="countup:in">20</span> <span
class="h6 font-weight-normal align-self-end">/extra weeks</span>
</div>
</div>
</div>
<hr style="color: #d2d2d7;">
<div class="d-flex pt-4">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">16 Gorilla Boxes</p>
</div>
<div class="d-flex">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
</div>
</div>
In the nav bar nav-tabs, the data attribute data-bs-target has to have to element id of the target tab-pane.
You had a different id.
Below is the fixed code:
<div class="col-11 col-lg-7 text-center">
<div class="nav nav-tabs btn-group mt-5" role="tablist" aria-orientation="vertical" >
<a class="btn btn-outline-success btn btn-light active" data-bs-toggle="tab" data-bs-target="#one-week1" type="button" role="tab" aria-selected="true" aria-controls="one-week1" >1 Week</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#two-weeks1" type="button" role="tab" aria-selected="false" aria-controls="two-weeks1" >2 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#three-weeks1" type="button" role="tab" aria-selected="false" aria-controls="three-weeks1" >3 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#four-weeks1" type="button" role="tab" aria-selected="false" aria-controls="four-weeks1" >4 Weeks</a>
<a class="btn btn-outline-success btn btn-light" data-bs-toggle="tab" data-bs-target="#more-weeks1" type="button" role="tab" aria-selected="false" aria-controls="nav-home" >More Weeks</a>
</div>
</div>
<div class="tab-content " >
<!-- one -->
<div class="tab-pane fade show active" id="one-week1" role="tabpanel" ><span class="h5 mb-0">
<div class="d-flex mb-3">$</span> <span class="display-2 mb-0">90</span> <span
class="h6 font-weight-normal align-self-end">/first week</span>
</div>
</div>
<!-- two -->
<div class="tab-pane fade" id="two-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="105" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/two weeks</span>
</div>
</div>
<!-- three -->
<div class="tab-pane fade" id="three-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0"><div data-to="120" data-aos data-aos-id="countup:in"></div></span> <span
class="h6 font-weight-normal align-self-end">/three weeks</span>
</div>
</div>
<!-- four -->
<div class="tab-pane fade" id="four-weeks1" role="tabpanel">
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="135" data-aos data-aos-id="countup:in"></span> <span
class="h6 font-weight-normal align-self-end">/four weeks</span>
</div>
</div>
<!-- five -->
<div class="tab-pane fade" id="more-weeks1" role="tabpanel" >
<div class="d-flex mb-3"><span class="h5 mb-0">$</span> <span class="display-2 mb-0" data-to="15" data-aos data-aos-id="countup:in">20</span> <span
class="h6 font-weight-normal align-self-end">/extra weeks</span>
</div>
</div>
</div>
<hr style="color: #d2d2d7;">
<div class="d-flex pt-4">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">16 Gorilla Boxes</p>
</div>
<div class="d-flex">
<div class="p-0 me-2"> <i class="bi bi-check-circle-fill color-gray "></i>
</div>
<p class="mb-4 color-gray">1 Gorilla Dolly Included</p>
</div>
</div>
Related
I'm using bootstrap 5 i have one modal for login and register but but there is two bootstrap tabs inside one modal and i want to display tab as per button click but this is not working.
When i click on login button then inside modal login tab should be active and if i click on register button then inside modal register tab should be active.
Giving this error in console:-
Uncaught TypeError: Cannot read property 'show' of null
My Code:
$('.register-btn').click(function() {
$('#loginModal').modal('show');
var triggerEl = document.querySelector('[data-bs-target="#register"]')
bootstrap.Tab.getInstance(triggerEl).show()
})
$('.login-btn').click(function() {
$('#loginModal').modal('show');
var triggerE2 = document.querySelector('[data-bs-target="#login"]')
bootstrap.Tab.getInstance(triggerE2).show()
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Thanks for your efforts!
You can trigger the click to simulate clicking the tab.
$(".register-btn").click(function () {
$("#register-tab").trigger("click");
$("#loginModal").modal("show");
});
$(".login-btn").click(function () {
$("#login-tab").trigger("click");
$("#loginModal").modal("show");
});
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary register-btn">
Register
</button>
<button type="button" class="btn btn-primary login-btn">
Login
</button>
<!-- Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="exampleloginModal" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body p-0">
<div class="row m-0">
<div class="col-md-6 p-0">
<img src="images/login-img.png" class="img-fluid" alt="">
</div>
<div class="col-md-6">
<div class="login-right-body">
<ul class="nav nav-pills nav-fill" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="login-tab" data-bs-toggle="tab" data-bs-target="#login" type="button" role="tab" aria-controls="login" aria-selected="true">Login</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="register-tab" data-bs-toggle="tab" data-bs-target="#register" type="button" role="tab" aria-controls="register" aria-selected="false">Register</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel" aria-labelledby="login-tab">
<form>
<div class="form-group custom-form-group">
<label>Mobile Number</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Login</button>
</div>
</form>
</div>
<div class="tab-pane fade" id="register" role="tabpanel" aria-labelledby="register-tab">
<form>
<div class="form-group custom-form-group">
<label>Full Name</label>
<input type="text" class="form-control">
</div>
<div class="form-group custom-form-group">
<button class="btn btn-primary btn-block">Register</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Here is my index.html page created by using Bootstrap 4.Here in 'Reserve Table Using modal' should only trigger only the modal which is for reserving table.But the whole page after the jumbotron went inside the modal.There is no custom jquery or javascript function added other than one script for tooltip.How's the fix?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags always come first -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="node_modules/bootstrap-social/bootstrap-social.css">
<link rel="stylesheet" href="css/styles.css">
<title>Ristorante Con Fusion</title>
</head>
<body>
<nav class="navbar navbar-dark navbar-expand-sm fixed-top">
<div class="container">
<button class="navbar-toggler" data-toggle="collapse" type="button" data-target="#Navbar">
<span class="navbar-toggler-icon"> </span>
</button>
<a href="#" class="navbar-brand mr-auto">
<img src="img/logo.png" height="30" width="41" alt="logo.png">
</a>
<div class="collapse navbar-collapse" id="Navbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active"><a href="./index.html" class="nav-link">
<span class="fa fa-home fa-lg"></span> Home </a> </li>
<li class="nav-item"><a href="./aboutus.html" class="nav-link">
<span class="fa fa-info fa-lg"></span> About </a></li>
<li class="nav-item"><a href="#" class="nav-link">
<span class="fa fa-list fa-lg"></span> Menu </a></li>
<li class="nav-item"><a href="./contactus.html" class="nav-link">
<span class="fa fa-address-card fa-lg"></span> Contact </a></li>
</ul>
<span class="navbar-text">
<a data-toggle="modal" data-target="#loginModal" >
<span class="fa fa-sign-in"> </span> Login
</a>
</span>
</div>
</div>
</nav>
<div class="modal fade" id="loginModal" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Login
</h4>
<button type="button" class="close" data-dismiss="modal" >
×
</button>
</div>
<div class="modal-body">
<form>
<div class="form-row">
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputEmail" >
Email Address
</label>
<input type="email" class="form-control form-control-sm mr-1" id="exampleInputEmail" placeholder="Enter Email">
</div>
<div class="form-group col-sm-4">
<label class="sr-only" for="exampleInputPassword" >
Password
</label>
<input type="password" class="form-control form-control-sm mr-1" id="exampleInputPassword" placeholder="Enter Email">
</div>
<div class="col-sm-auto">
<div class="form-check">
<input type="checkbox" name="" id="rememberMe" class="form-check-input">
<label for="rememberMe" class="form-check-label">Remember Me</label>
</div>
</div>
</div>
<div class="form-row">
<button type="button" class="btn btn-primary btn-sm ml-auto">
Sign In
</button>
<button type="button" class="btn btn-secondary btn-sm ml-1" data-dismiss="modal">
Cancel
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<header class="jumbotron">
<div class="container">
<div class="row row-header">
<div class="col-12 col-sm-6">
<h1>Ristorante con Fusion</h1>
<p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p>
</div>
<div class="col-12 col-sm-3 align-self-center" >
<img src="img/logo.png" class="img-fluid" alt="logo.png">
</div>
<div class="col-12 col-sm-3 align-self-center" >
<a class="btn btn-warning col-12 mb-2" href="#card" data-toggle="tooltip"
data-html="true"data-placement="bottom"
title="Or try to call us at <br><strong> +852 123456789</strong>" >
Reserve Table Using Internal Hyper Link
</a>
<a class="btn btn-warning col-12" href="" data-toggle="modal" data-target="#reserveTableModal">
Reserve Table Using Modal
</a>
</div>
</div>
</div>
</div>
</header>
<div class="modal fade" id="reserveTableModal" role="dialog">
<div class="modal-dialog modal-lg" role="content">
<div class="modal-content">
<div class="modal-header bg-warning">
<h3 class="modal-title text-white">Reserve a Table</h3>
<button type="button" class="close" data-dismiss="modal" >
×
</button>
</div>
<div class="modal-body">
<form action="">
<div class="form-group row">
<h5 class="col-md-2">
<span class="label label-default">Number of Guests</span>
</h5>
<div class="form-check col-md-6 ">
<label for="1" class="col-form-label">
<input type="radio" name="TotalGuest" id="1"> 1
</label>
<input type="radio" name="TotalGuest" id="2">
<label for="2" class="col-form-label"> 2</label>
<input type="radio" name="TotalGuest" id="3">
<label for="3" class="col-form-label"> 3</label>
<input type="radio" name="TotalGuest" id="4">
<label for="4" class="col-form-label"> 4</label>
<input type="radio" name="TotalGuest" id="5">
<label for="5" class="col-form-label"> 5</label>
<input type="radio" name="TotalGuest" id="6">
<label for="6" class="col-form-label"> 6</label>
</div>
</div>
<div class="form-group row">
<div class="input-group">
<h5 class="col-md-2">
Section
</h5>
<div class="col-md-6 ">
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-success custom-btn" for="noSmoke">
<input type="radio" name="smokeZone" id="noSmoke" autocomplete="off" checked="checked" > Non-Smoking
</label>
<label class="btn btn-danger custom-btn" for="Smoke">
<input type="radio" name="smokeZone" id="Smoke" autocomplete="off"> Smoking
</label>
</div>
</div>
</div>
</div>
<div class="form-group row">
<h5 class="col-md-2">
Date and Time
</h5>
<div class="col-md-10">
<div class="col-md-5 form-check-inline">
<input class="form-control" type="text" name="" id="" placeholder="Date">
</div>
<div class="col-md-5 form-check-inline">
<input class="form-control " type="text" name="" id="" placeholder="Time">
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="button" class="btn btn-secondary ml-1" data-dismiss="modal">
Cancel
</button>
<button type="submit" class="btn btn-primary">
Reserve
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row row-content">
<div class="col">
<div class="carousel slide" id="myCarousel" data-ride="carousel">
<div class="carousel-inner" role="listbox">
<div class="carousel-item active">
<img class="d-block img-fluid" src="img/uthappizza.png" alt="uthappizza">
<div class="carousel-caption d-none d-sm-block">
<h2 >
Uthappizza
<span class="badge badge-danger">HOT</span>
<span class="badge badge-pill badge-secondary">$4.99</span>
</h2>
<p class="d-none d-sm-block">
A unique combination of Indian Uthappam (pancake)
and Italian pizza, topped .</p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/buffet.png" alt="buffet">
<div class="carousel-caption d-none d-sm-block">
<h2 class="mt-0">
Weekend Grand Buffet
<span class="badge badge-danger">NEW</span>
</h2>
<p class="d-none d-sm-block">
Featuring mouthwatering combinations with a
choice of five different salads. </p>
</div>
</div>
<div class="carousel-item">
<img class="d-block img-fluid" src="img/alberto.png" alt="alberto">
<div class="carousel-caption d-none d-sm-block">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin .
</p>
</div>
</div>
</div>
<ol class="carousel-indicators">
<li class="active" data-target="#myCarousel" data-slide-to="0"></li>
<li class="" data-target="#myCarousel" data-slide-to="1"></li>
<li class="" data-target="#myCarousel" data-slide-to="2"></li>
</ol>
<a class="carousel-control-prev" href="#myCarousel" role="button" data-slide="prev">
<span class="carousel-control-prev-icon"> </span>
</a>
<a class="carousel-control-next" href="#myCarousel" role="button" data-slide="next">
<span class="carousel-control-next-icon"> </span>
</a>
<div class="btn-group" id="carouselButtons">
<button class="btn btn-danger btn-sm" id="carousel-pause">
<span class="fa fa-pause"></span>
</button>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Our Lipsmacking Culinary Creations</h3>
</div>
<div class="col col-sm order-sm-first col-md">
<div class="media">
<img src="img/uthappizza.png" alt="uthappizza.png" class="d-flex mr-3 img-thumbnail-align-self-center">
<div class="media-body">
<h2 class="mt-0">
Uthappizza
<span class="badge badge-danger">HOT</span>
<span class="badge badge-pill badge-secondary">$4.99</span>
</h2>
<p class="d-none d-sm-block">
A unique combination of Indian Uthappam.</p>
</div>
</div>
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 col-md-3">
<h3>This Month's Promotions</h3>
</div>
<div class="col col-sm col-md">
<h2 class="mt-0">
Weekend Grand Buffet
<span class="badge badge-danger">NEW</span>
</h2>
<p class="d-none d-sm-block">
Featuring mouthwatering combinations with a
choice of five different salads. </p>
</div>
<div class="media">
<img src="img/buffet.png" alt="buffet.png" class="d-flex ml-3 img-thumbnail align-self-center">
</div>
</div>
<div class="row row-content align-items-center">
<div class="col-12 col-sm-4 order-sm-last col-md-3">
<h3>Meet our Culinary Specialists</h3>
</div>
<div class="media">
<img src="img/alberto.png" alt="alberto.png" class="d-flex ml-3 img-thumbnail align-self-center">
</div>
<div class="media-body">
<div class="col col-sm order-sm-first col-md">
<h2>Alberto Somayya</h2>
<h4>Executive Chef</h4>
<p class="d-none d-sm-block">Award winning three-star Michelin
chef
</p>
</div>
</div>
</div>
<div class="row row-content" id="card">
<div class="col-sm-8 col-12 offset-sm-2">
<div class="card">
<h3 class="card-header bg-warning text-white">Reserve a Table</h3>
<div class="card-body">
<form action="">
<div class="form-group row">
<h5 class="col-md-2">
<span class="label label-default">Number of Guests</span>
</h5>
<div class="form-check col-md-6 ">
<label for="1" class="col-form-label">
<input type="radio" name="TotalGuest" id="1"> 1
</label>
<input type="radio" name="TotalGuest" id="2">
<label for="2" class="col-form-label"> 2</label>
<input type="radio" name="TotalGuest" id="3">
<label for="3" class="col-form-label"> 3</label>
<input type="radio" name="TotalGuest" id="4">
<label for="4" class="col-form-label"> 4</label>
<input type="radio" name="TotalGuest" id="5">
<label for="5" class="col-form-label"> 5</label>
<input type="radio" name="TotalGuest" id="6">
<label for="6" class="col-form-label"> 6</label>
</div>
</div>
<div class="form-group row">
<h5 class="col-md-2">
Date and Time
</h5>
<div class="col-md-10">
<div class="col-md-5 form-check-inline">
<input class="form-control" type="text" name="" id="" placeholder="Date">
</div>
<div class="col-md-5 form-check-inline">
<input class="form-control " type="text" name="" id="" placeholder="Time">
</div>
</div>
</div>
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve </button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-4 offset-1 col-sm-2">
<h5>Links</h5>
<ul class="list-unstyled">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<div class="col-7 col-sm-5">
<h5>Our Address</h5>
<address>
121, Clear Water Bay Road<br>
Clear Water Bay, Kowloon<br>
HONG KONG<br>
<i class="fa fa-phone fa-lg"></i> +852 1234 5678<br>
<i class="fa fa-fax fa-lg"></i> +852 8765 4321<br>
<i class="fa fa-envelope fa-lg"></i> confusion#food.net
</address>
</div>
<div class="col-12 col-sm-4 align-self-center">
<div class="text-align">
<a class="btn btn-social-icon btn-google" href="http://google.com/+">
<i class="fa fa-google-plus fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-facebook" href="http://www.facebook.com/profile.php?id=">
<i class="fa fa-facebook fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-linkedin" href="http://www.linkedin.com/in/">
<i class="fa fa-linkedin fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-twitter" href="http://twitter.com/">
<i class="fa fa-twitter fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-youtube"href="http://youtube.com/">
<i class="fa fa-youtube fa-lg"></i>
</a>
<a class="btn btn-social-icon btn-envelope" href="mailto:">
<i class="fa fa-envelope-o fa-lg"></i>
</a>
</div>
</div>
</div>
<div class="row justify-content-center">
<div class="col-auto">
<p>© Copyright 2018 Ristorante Con Fusion</p>
</div>
</div>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS. -->
<script src="node_modules/jquery/dist/jquery.slim.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
})
</script>
</body>
</html>
You forgot to close the form-group div inside the #card form.
...
<div class="form-group row">
<div class="offset-md-2 col-md-10">
<button type="submit" class="btn btn-primary">Reserve </button>
</div>
</div> <!-- This is the missing one -->
</form>
I'm having an issue with changing the font awesome icon when collapsing a row in card table.
How can I create this with javascript? That, when, I click on a row the icon is changed for the item that is collapsed, and for the one that is open.
I have the following code:
Icon for opening : fas fa-chevron-down
Icon when the row is closed : fas fa-chevron-right
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div id="accordion">
<div class="card">
<div class="list-group-item" id="headingOne">
<h5 class="mb-0">
<label data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
<i class="fa fa-chevron-right"></i><label style="margin-left:20px;">Configure which userdata to show for voice interactions</label>
</label>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
<div class="card-body">
<div class="card-block">
<li class="list-group-item">
<div>
<div class="card-block">
<div class="card-header">
<div class="row">
<div class="col-md-3"><b>Label</b></div>
<div class="col-md-3"><b>Userdata</b></div>
<div class="col-md-6 text-right">
<button type="button" data-toggle="modal" data-target="#optionModal" class="btn btn-default btn-sm"><i class="fa fa-plus-circle"></i> <b>Optie</b> toevoegen</button>
</div>
</div>
</div>
<div>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
<ul class="list-group">
<li class="list-group-item d-flex justify-content-between align-items-center">
<div class="col-md-3">
Label sdlsdkfjsdlfksdj
</div>
<div class="col-md-3">
Userdata dflskdfjds
</div>
<div class="col-md-6 text-right">
<span><i class="fa fa-pencil-alt" style="font-size:20px;"></i></i></span>
<span><i class="fa fa-trash-alt" style="font-size:20px; margin-left:20px;"></i></i></span>
</div>
</li>
</ul>
</div>
</div>
</div>
</li>
</div>
</div>
</div>
</div>
<div class="card">
<div class="list-group-item" id="headingTwo">
<h5 class="mb-0">
<label class="collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
<i class="fa fa-chevron-right"></i><label style="margin-left:20px;">Con</label>
</label>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
<div class="card-body">
other item here ...
</div>
</div>
</div>
<div class="card">
<div class="list-group-item" id="headingThree">
<h5 class="mb-0">
<label class="collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
<i class="fa fa-chevron-right"></i><label style="margin-left:20px;">ctions</label>
</label>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
<div class="card-body">
other item here ...
</div>
</div>
</div>
</div>
What I have to far :
<script>
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function(event) {
event.stopPropagation();
console.log("open");
$(this)
.parent().parent()
.find(".fa-chevron-down")
.removeClass("fa-chevron-down")
.addClass("fa-chevron-right");
}).on('hidden.bs.collapse', function(event) {
console.log("closed");
event.stopPropagation();
$(this)
.parent().parent()
.find(".fa-chevron-right")
.removeClass("fa-chevron-right")
.addClass("fa-chevron-down");
});
});
</script>
But it collapses for all the records, how to chance this for only the records that is open/closed.
You only need to go up 1 parent level...
$(document).ready(function () {
$('.collapse')
.on('shown.bs.collapse', function(event) {
event.stopPropagation();
console.log("open");
$(this)
.parent()
.find(".fa-chevron-down")
.removeClass("fa-chevron-down")
.addClass("fa-chevron-right");
}).on('hidden.bs.collapse', function(event) {
console.log("closed");
event.stopPropagation();
$(this)
.parent()
.find(".fa-chevron-right")
.removeClass("fa-chevron-right")
.addClass("fa-chevron-down");
});
});
https://www.codeply.com/go/ePRWZuEK2K
I have a dropdown to switch between panes for the selected item in the dropdown.
Normally it would switch panes when I press on the item from the dropdown but since the new bootstrap version (4.0.0-beta.2) it doesn't respond anymore and it leaves me with a tab.js:155 Uncaught TypeError: Cannot read property 'nodeName' of undefined error.
JSFiddle
<div class="tab-pane fade show active" id="adventure" role="tabpanel" aria-labelledby="adventure-tab">
<div class="card" style="">
<div class="tab-content">
<div class="tab-pane fade show active" id="large-clipper" aria-labelledby="large-clipper-tab">
<div class="card-header">
<div class="dropdown btn-group float-right">
<button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Variations
</button>
<div class="dropdown-menu" role="tablist" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item nav-link" id="large-clipper-tab" href="#large-clipper" data-toggle="tab" role="tab" aria-controls="large-clipper" aria-selected="false">Large Clipper</a>
<a class="dropdown-item nav-link" id="festive-large-clipper-tab" href="#festive-large-clipper" data-toggle="tab" role="tab" aria-controls="festive-large-clipper" aria-selected="false">Festive Large Clipper</a>
</div>
</div>
<img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
<h4 style="display:inline-block">Large Clipper</h4>
</div>
<div class="card-body">
<h6 class="text-muted">
Just a big and fast clipper.
</h6>
<p class=" p-y-1">
<span style="font-style:italic">Level requirements: </span>
<span>Adventure: 30 </span>
<span>Trade: 56 </span>
<span>Maritime: 75</span>
</p>
<div class="row">
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
</div>
</div>
</div>
<div class="tab-pane fade" id="festive-large-clipper" role="tabpanel" aria-labelledby="large-clipper-tab">
<div class="card-header">
<div class="btn-group float-right">
<button class="btn btn-primary dropdown-toggle" id="variationsDropdown" type="button" aria-haspopup="true" aria-expanded="true" data-toggle="dropdown"> Variations </button>
<div class="dropdown-menu" aria-labelledby="variationsDropdown">
<a class="dropdown-item" href="#large-clipper" data-toggle="tab">Large Clipper</a>
<a class="dropdown-item" href="#festive-large-clipper" data-toggle="tab">Festive Large Clipper</a>
</div>
</div>
<img src="http://eversong.ivyro.net/SHIP/00000024.png" height="50" width="50">
<h4 style="display:inline-block">Festive Large Clipper</h4>
</div>
<div class="card-body">
<h6 class="text-muted">
A large clipper but with fancy plating.
</h6>
<p class=" p-y-1">
<span style="font-style:italic">Level requirements: </span>
<span>Adventure: 30 </span>
<span>Trade: 56 </span>
<span>Maritime: 75</span>
</p>
<div class="row">
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Selling: <span>5</span> </a></div>
<div class="col-md-6"><a class="btn btn-primary btn-lg btn-block my-1" href="">Buying: <span>10</span> </a></div>
</div>
</div>
</div>
</div>
</div>
</div>
Required files
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
There is a bug with tabs in v4 beta 2, this will be fixed in beta 3, see https://github.com/twbs/bootstrap/pull/23087
I am trying to use the Google Maps API inside of a Bootstrap tab. When the map is in the first tab it loads properly, but I have to move it to the second tab because of UI considerations. When I do that, the map doesn't complete it's loading. I am using a class called "appt-lo" to trigger the first tab to show active. If I move that class to the second tab, my map shows, otherwise, it does not. If you guys could maybe give me some ideas or point me in the right direction, I would deeply appreciate it.
Codepen: https://codepen.io/madjaybird/pen/YxJErx?editors=1000
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.madjaybird.com/Codepen/main.js"></script>
<link href="https://www.madjaybird.com/Codepen/main.css" rel="stylesheet" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Inline Online - The Online Appointment Scheduler for NM MVD</title>
<link rel="stylesheet" href="dist/styles/main.css">
<link href='https://fonts.googleapis.com/css?family=Palanquin:400,300,100,200,500,600,700' rel='stylesheet' type='text/css'>
</head>
<body class="intro wizard">
<div id="header" role="banner">
<nav class="navbar navbar-dark navbar-expand-lg bg-dark fixed-top justify-content-between">
<a class="navbar-brand" href="http://mvd.newmexico.gov"><span>MVD</span> NEW MEXICO</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggler" aria-controls="navbarToggler" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarToggler">
<ul class="navbar-nav flex-row ml-auto d-none d-flex">
<li class="nav-item pr-2 pt-2" id="time">15:00<span> minutes</span></li>
<li class="nav-item pr-2"><a class="nav-link" href="admin-calendar-month-0817.html"><i class="fas fa-home"></i> Admin Home</a></li>
<li class="nav-item pr-2"><a class="nav-link" href="admin-help.html"><i class="fas fa-question-circle"></i> Help</a></li>
<li class="nav-item pr-2"><a class="nav-link" href="admin-signin.html"><i class="fas fa-sign-out-alt"></i> Log Out</a></li>
</ul>
</div>
</nav>
</div>
<div class="container">
<div class="row justify-content-center mt-6">
<div class=" card wizard-card">
<div class="wizard-header">
<h3>
<b>MAKE</b> YOUR APPOINTMENT<br>
</h3>
</div>
<ul class="justify-content-around nav nav-tabs nav-fill setup-panel">
<li class="nav-item"><a class="btn-default nav-link link appt-lo" href="#step-1">Appointment Type</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-2">Appointment Location</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-3">Date & Time</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-4">Add Appointment</a></li>
<li class="nav-item"><a class="btn-default nav-link link" href="#step-5">Customer Information</a></li>
</ul>
<form role="form" action="" method="post">
<!-- Step 1: Appointment Type -->
<div class="row setup-content" id="step-1">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col-6">
<h4 class="info-text"> Select Your Appointment Type </h4>
</div>
<div class="col-6">
<div class="btn-group float-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button>
<button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<hr class="my-2">
<div class="row">
<div class="col">
</div>
</div>
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="cards p-2">
<div class="card1 has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-id-card"></i>
</div>
<h6 class="mt-2">First Time <br>Driver's License</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-file-alt"></i>
</div>
<h6 class="mt-2">First TIme Title</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-search"></i>
</div>
<h6 class="mt-2">VIN Inspection</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
</div>
<div class="d-flex flex-row flex-wrap justify-content-center">
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-road"></i>
</div>
<h6 class="mt-2">Road Test</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fa fa-motorcycle"></i>
</div>
<h6 class="mt-2">Motorcycle <br>Road Test</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
<div class="cards p-2">
<div class="has-overlay">
<div class="overlay-card select">
<div class="choice" data-toggle="wizard-checkbox">
<input type="checkbox" name="jobb" value="Code">
<div class="icon">
<i class="fas fa-shield-alt"></i>
</div>
<h6 class="mt-2">Fingerprinting</h6>
<small class="text-center">Required Documents</small>
</div>
</div>
</div>
</div>
</div>
<hr>
<div class="row mx-1 mb-4">
<div class="col-6">
<h4 class="info-text"></h4>
</div>
<div class="col-6">
<div class="btn-group float-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button>
<button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
</div>
</div>
<!-- Step 2: Location -->
<div class="row justify-content-center setup-content" id="step-2">
<div class="col text-center mt-4">
<div class="row mx-1 mb-4">
<div class="col-6">
<img src="dist/images/MVDlogo.png" alt="MVD NM logo" class="step2" width="80">
<h4 class="info-text"> Find an MVD Field Office near you.</h4>
</div>
<div class="col-6">
<div class="btn-group float-right" role="group" aria-label="Basic example">
<button type="button" class="btn btn-default prevBtn"><i class="fal fa-arrow-left"></i> Previous</button>
<button type="button" class="btn btn-warning nextBtn">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<div class="row my-4 mx-4">
<div class="col-sm-8">
<div class="thumbnail map-wrapper">
<div id="map-canvas">
<div id="map">
</div>
</div>
</div>
</div>
<div class="col-sm">
<div>
<div id="maps">
<p>To find an MVD Service Provider near you, enter your City or ZIP Code.</p>
<div class="form-group">
<label class="sr-only">City/ZIP Code</label>
<div class="input-group input-group-sm">
<input type="text" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button"><i class="fa fa-search"></i></button>
</span>
</div>
</div>
</div>
<div class="location text-left">
<h5><strong>Select Location:</strong></h5>
<div class="address">Santa Fe</div>
<div>2546 Camino Entrada</div>
<div>Santa Fe, NM 87507</div>
<div>505-476-1599</div>
<div> Monday - Friday 8am - 4pm</div>
</div>
</div>
</div>
</div>
<div class="col">
<hr>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- Step 3: Date & Time -->
<div class="row setup-content" id="step-3">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col">
<button class="btn btn-primary prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<h4 class="info-text"> Select Date & Time </h4>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
<div class="row">
<div class="col-sm">
<div class="location text-center">
<div class="address">Santa Fe</div>
<div>2546 Camino Entrada Santa Fe, NM 87507 </div>
<div>505-476-1599 Monday - Friday 8am - 4pm</div>
</div>
</div>
</div>
<hr class="mb-0">
<div class="row justify-content-center">
<div class="col-sm">
<p class="text-center">Please select the date and the time for your appointment.</p>
</div>
</div>
<div class="row mx-4">
<div class="col-sm mt-2">
<div class="form-group">
<label class="control-label">Date of Appointment: </label>
<input class="form-control date-picker" type="date" />
</div>
</div>
<div class="col-sm block_list_words mt-2">
<label class="control-label">Time of Appointment: </label>
<ul id="handle-1" class="list-unstyled">
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 9:00 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 9:30 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 10:00 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 10:30 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 11:00 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 11:30 am<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 12:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 12:30 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 1:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 1:30 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 2:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 3:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 3:30 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 4:00 pm<span class="float-right sortable-links"></span>
</li>
<li class="datetime">
<span class="drag-handle"><i class="fas fa-clock"></i></span> 4:30 pm<span class="float-right sortable-links"></span>
</li>
</ul>
</div>
</div>
<div class="col">
<hr>
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- Step 4: Add Appointment -->
<div class="row setup-content" id="step-4">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col">
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<h4 class="info-text"> Make Another Appointment </h4>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
<div class="row justify-content-center ml-0 mt-4">
<div class="col text-center">
<p class="lead">Would you like to make another appointment?</p>
<p class=" mb-4"> If so, click the <b>MAKE ANOTHER APPOINTMENT</b> button below. If not, click <b>NEXT</b>.</p>
<button type="button" class="btn btn-secondary btn-sm" onclick="window.location.href='ui-wizard.html'">Make Another Appointment</button>
</div>
</div>
<div class="col">
<hr>
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<button class="btn btn-warning nextBtn btn-lg float-right" type="button">Next <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
<!-- Step 5: Customer Information -->
<div class="row setup-content" id="step-5">
<div class="col mt-4">
<div class="row mx-1 mb-4">
<div class="col">
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<h4 class="info-text"> Enter Your Information </h4>
</div>
<div class="col">
<button class="btn btn-secondary nextBtn btn-lg float-right" type="submit" onclick="window.location.href='ui-review.html'">Finish <i class="fal fa-arrow-right"></i></button>
</div>
</div>
<div class="mx-4">
<form class="container" id="needs-validation" novalidate>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label for="firstName"> First Name</label>
<input name="firstname" type="text" class="form-control" id="firstName" placeholder="First Name" required>
<div class="invalid-feedback">
Please enter a first name.
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label for="lastName"> Last Name</label>
<input name="lastname" type="text" class="form-control" id="lastName" placeholder="Last Name" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label> Email</label>
<input name="email" type="email" class="form-control" id="email" placeholder="Email" required>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<span class="text-red">*</span>
<label> Phone </label>
<input name="phone" type="tel" class="form-control" id="phone" placeholder="Phone" required>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label> Driver's License Number</label>
<input name="dln" type="text" class="form-control" id="dln" placeholder="Driver's License Number">
</div>
</div>
</div>
</form>
</div>
<div class="col">
<hr>
<button class="btn btn-default prevBtn btn-lg float-left" type="button"><i class="fal fa-arrow-left"></i> Previous</button>
</div>
<div class="col">
<button class="btn btn-secondary nextBtn btn-lg float-right" type="submit" onclick="window.location.href='ui-review.html'">Finish <i class="fal fa-arrow-right"></i></button>
</div>
</div>
</div>
</form>
</div>
</div>
<div class="footer mt-5">
<img src="dist/images/inlineonline-logo.png" alt="In Line Online logo" width="250">
<p> Copyright © 2017 State of New Mexico</p>
</div>
<!-- SCRIPTS -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCDaUcFwmFZosg6lIjUQFolSsqp_Zd9GCw&callback=initMap"></script>
<!-- / SCRIPTS -->
</body>
</html>
Call google.maps.event.trigger(map, 'resize'); inside allNextBtn.click's callback function within a setTimeout seems to render the map completely on tab change.
//Next Button script
allNextBtn.click(function () {
//trigger map resize on tab select
setTimeout(function(){
google.maps.event.trigger(map, 'resize');
},10)
var curStep = $(this).closest(".setup-content"),
curStepBtn = curStep.attr("id"),
nextStepWizard = $('ul.setup-panel li a[href="#' + curStepBtn + '"]').parent().next().children("a"),
curInputs = curStep.find("input[type='text'],input[type='url']"),
isValid = true;
$(".form-group").removeClass("has-error");
for (var i = 0; i < curInputs.length; i++) {
if (!curInputs[i].validity.valid) {
isValid = false;
$(curInputs[i]).closest(".form-group").addClass("has-error");
}
}
if (isValid)
nextStepWizard.removeAttr('disabled').trigger('click');
});
Codepen url https://codepen.io/azs06/pen/RZeMWV?editors=0010