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
Related
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>
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>
At the moment I am trying to combine Bootstrap accordion and list group with JS behaviour. Therefore I am getting the set of list groups. Each could have only one active option. Instead of it I would like to have only one active option per accordion.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="accordion col-4" id="accordionVentures">
<div class="card">
<div class="card-header" id="heading1000">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1000" aria-expanded="true" aria-controls="collapse1000">
Baauw
</button>
</div>
<div id="collapse1000" class="collapse" aria-labelledby="heading1000" data-parent="#accordionVentures">
<div class="card-body">
<div class="list-group" id="list-tab1000" role="tablist">
<a class="list-group-item list-group-item-action" id ="list-1000Vlaardingen-list" href="#list-1000Vlaardingen" aria-controls="1000Vlaardingen" role="tab" data-toggle="list">Vlaardingen</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2000">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse2000"
aria-expanded="true" aria-controls="collapse2000" >
Blauwhoff
</button>
</div>
<div id="collapse2000" class="collapse" aria-labelledby="heading2000" data-parent="#accordionVentures">
<div class="card-body">
<div class="list-group" id="list-tab2000" role="tablist">
<a class="list-group-item list-group-item-action" id ="list-2000Aalsmeer-list" href="#list-2000Aalsmeer" aria-controls="2000Aalsmeer" role="tab" data-toggle="list">Aalsmeer</a>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="tab-content" id="nav-tabContent1000">
<div class="tab-pane fade" id="list-1000Vlaardingen" role="tabpanel" aria-labelledby="list-1000Vlaardingen-list">Vlaardingen</div>
</div>
<div class="tab-content" id="nav-tabContent2000">
<div class="tab-pane fade" id="list-2000Aalsmeer" role="tabpanel" aria-labelledby="list-2000Aalsmeer-list">Aalsmeer</div>
</div>
</div>
The jsfiddle link with proper bootstrap interpretation
UPD: So what I have now is something like:
Step 1. One of the button pressed
Step 2. Go to another accordion and press one more button
And I expect to have only one option there:
Your implementation was fine. Just that yopu missed data-toggle="list" on Aalsmeer button. I have added 2-3 more buttons to make the effect more visible and clear.
You will have to remove active show classes from all the .list-group-item elements via jquery.
$(".list-group-item").on('click', function() {
$(".list-group-item").each(function(index) {
$(this).removeClass("active show");
});
})
$(".list-group-item").on('click', function() {
$(".list-group-item").each(function(index) {
$(this).removeClass("active show");
});
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" 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.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<div class="accordion col-4" id="accordionVentures">
<div class="card">
<div class="card-header" id="heading1000">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse1000" aria-expanded="true" aria-controls="collapse1000">
Baauw
</button>
</div>
<div id="collapse1000" class="collapse" aria-labelledby="heading1000" data-parent="#accordionVentures">
<div class="card-body">
<div class="list-group" id="list-tab1000" role="tablist">
<a class="list-group-item list-group-item-action" id="list-1000Vlaardingen-list" href="#list-1000Vlaardingen" aria-controls="1000Vlaardingen" role="tab" data-toggle="list">Vlaardingen</a>
<a class="list-group-item list-group-item-action" id="list-messages-list" data-toggle="list" href="#list-messages" role="tab" aria-controls="messages">Messages</a>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="heading2000">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapse2000" aria-expanded="true" aria-controls="collapse2000">
Blauwhoff
</button>
</div>
<div id="collapse2000" class="collapse" aria-labelledby="heading2000" data-parent="#accordionVentures">
<div class="card-body">
<div class="list-group" id="list-tab2000" role="tablist">
<a class="list-group-item list-group-item-action" id="list-2000Aalsmeer-list" href="#list-2000Aalsmeer" aria-controls="2000Aalsmeer" role="tab" data-toggle="list">Aalsmeer</a>
<a class="list-group-item list-group-item-action" id="list-settings-list" data-toggle="list" href="#list-settings" role="tab" aria-controls="settings">Settings</a>
<a class="list-group-item list-group-item-action" id="list-profile-list" data-toggle="list" href="#list-profile" role="tab" aria-controls="profile">Profile</a>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="tab-content" id="nav-tabContent1000">
<div class="tab-pane fade" id="list-1000Vlaardingen" role="tabpanel" aria-labelledby="list-1000Vlaardingen-list">Vlaardingen</div>
<div class="tab-pane fade" id="list-messages" role="tabpanel" aria-labelledby="list-messages-list">Messages</div>
<div class="tab-pane fade" id="list-2000Aalsmeer" role="tabpanel" aria-labelledby="list-2000Aalsmeer-list">Aalsmeer</div>
<div class="tab-pane fade" id="list-profile" role="tabpanel" aria-labelledby="list-profile-list">Profile</div>
<div class="tab-pane fade" id="list-settings" role="tabpanel" aria-labelledby="list-settings-list">Settings</div>
</div>
<div class="tab-content" id="nav-tabContent2000">
</div>
</div>
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
The main idea:
Vertical buttons group list where each button fully fills parent by itself.
Problem:
split button dropdown don't do what I need. Adding .btn-block to button/button-group didn't resolve problem (dropdown moves to new line as separated button).
What I have:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group">
<button type="button" class="btn btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
Problem:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet" />
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="btn-group btn-block">
<button type="button" class="btn btn-block btn-info">
Button 1
</button>
<button type="button" class="btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-option-vertical" aria-hidden="true"></span>
</button>
<ul class="dropdown-menu">
<li>
<a href="#">
1
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 2
</button>
</div>
</div>
<div class="row">
<div class="col-md-4">
<button type="button" class="btn btn-block btn-info">
Button 3
</button>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
What need to do, to solve problem with splitted dropdown button? Like that:
You can do it by adding btn-block to the btn group. and also to the button itself. but it will move the menu opener to a new line. so I made a little trick you can see here:
jsfiddle.net/u753bbsg/