We Keep Coding

Putting the button in the footer area of the modal

Can anyone help me on my problem wherein the two buttons should be on the footer side which is at the bottom side of the modal. Just focus on the two buttons, do not mind the other contents hehe. I did some adjustments of the modal height because I am trying to copy the height of the modal design for us.
Herewith is the attached jfiddle to fully elaborate my problem. Thanks! https://jsfiddle.net/wqj9x0md/
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<button class="btn m-2 btn-primary add-order myBtn">ADD ORDER</button>
<!-- Trigger/Open The Add Order -->
<div id="modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-body">
<span class="close float-end">×</span></h3>
<form action="" method="">
<div class="row title">
<div class="col">Order</div>
<div class="col">Pieces</div>
<div class="col">Price</div>
</div>
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
<div id="formsContainer">
<div style="display: none;" id="form1">
<form action="" method="" id="add-order-form">
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
</form>
</div>
</div>
<button type="button" value="Add Child" onclick="addForm();" id="add-button">
&plus;
</button>
<div class="center my-3">
<div class="row fw-bold">
<div class="col-4 total" style="color: #116657;">TOTAL</div>
<div class="col-3">450</div>
</div>
</div>
<div class="d-inline d-flex justify-content-center
align-items-center">
<button class="btn-add-order" type="submit">Add Order</button>
<button class="btn-cancel-order">Cancel</button>
</div>
</form>
</div>
</div>
</div>
<!-- Modal END -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

The div element containing your Add order and Cancel buttons:
<div class="d-inline d-flex justify-content-center align-items-center" ...
Could be positioned absolute since the modal already has position:relative;
So if you style it like this:
position: absolute;
bottom: 1em;
left: 50%;
transform: translate(-50%, 0);
You'll have it centered and with a gap of 1em from its parent bottom border.
BUT...of course I forgot to take into account the fact that position absolute was going to detach the element from the flow and it won't occupy space anymore.
So as you pointed out in comments there's the chance some content will overlap.
There's a solution while still keeping the absolute positioning strategy but I don't like it indeed.
You could put a padding bottom on that containing block, thick as much as the height of your button stripe.
But it's very annoying because you should move the position: relative; to your .modal-content instead of your .modal-body and you should have it styled also with padding-bottom: 4em;
It will work as far as I tried in your jsfiddle but I'm the first one saying there must be a better way.

if you take a look at the code you will see that there is a class called " modal-body" and the content inside of it is the body, if you want to display the buttons in the footer you will have to add a div with class "modal-footer" u can tell that it will display the content in the footer by its name haha
here's the full code of the modal :
<div class="modal-content">
<div class="modal-body">
<span class="close float-end">×</span>
<form action="" method="">
<div class="row title">
<div class="col">Order</div>
<div class="col">Pieces</div>
<div class="col">Price</div>
</div>
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
<div id="formsContainer">
<div style="display: none;" id="form1">
<form action="" method="" id="add-order-form">
<div class="row add-order-info text-center">
<div class="col">
<div class="dropdown">
<button type="button" class="btn dropdown-toggle" data-bs-toggle="dropdown">
Select...
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Laptop</a></li>
<li><a class="dropdown-item" href="#">Computer</a></li>
<li><a class="dropdown-item" href="#">IPAD</a></li>
</ul>
</div>
</div>
<div class="col">
<input type="text" name="" id="">
</div>
<div class="col">
<input type="text" name="" id="">
</div>
</div>
</form>
</div>
</div>
<button type="button" value="Add Child" onclick="addForm();" id="add-button">
&plus;
</button>
<div class="center my-3">
<div class="row fw-bold">
<div class="col-4 total" style="color: #116657;">TOTAL</div>
<div class="col-3">450</div>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<div class="d-inline d-flex justify-content-center
align-items-center">
<button class="btn-add-order" type="submit">Add Order</button>
<button class="btn-cancel-order">Cancel</button>
</div>
</div>

How to disable a tab until form elements are complete?

In my example below, I've managed to disable the next button until the form field (Case Title) has content in it. I don't quite understand how to disable the next tab until that form field is complete.
How can I disable the other tabs until the form field in the first tab is completed?
$(".btnNext").click(function () {
$(".nav-tabs > .active").next("li").find("a").trigger("click");
});
$(".btnPrevious").click(function () {
$(".nav-tabs > .active").prev("li").find("a").trigger("click");
});
let caseTitle = document.getElementById("caseTitle");
let caseTitleNext = document.querySelector("#tab1 .btnNext");
caseTitle.addEventListener("keyup", () => {
caseTitleNext.removeAttribute("disabled");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ibox-content">
<ul class="nav nav-tabs">
<li class="active">
Case Creation <i class="fa-solid fa-folder"></i>
</li>
<li>
Attributes <i class="fa-duotone fa-circle-nodes"></i>
</li>
<li>
Individual Involvement <i class="fa-solid fa-person"></i>
</li>
<li>
Agency Involvement <i class="fa-solid fa-building"></i>
</li>
<li>
Review Information <i class="fa-solid fa-memo"></i>
</li>
</ul>
<form id="createCase" name="createCase">
<div class="panel blank-panel">
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control" id="caseTitle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" placeholder="Enter case number" class="form-control">
</div>
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-default btnPrevious">Cancel</button>
<button type="button" class="btn btn-primary btnNext" disabled="disabled">Next</button>
</div>
</div>
<div class="tab-pane" id="tab2">
<h2>Tab 2 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-warning btnNext">Skip</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab3">
<h2>Tab 3 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab4">
<h2>Tab 4 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab5">
<h2>Tab 5 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>

Base on the Bootstrap docs, you can disable tabs by setting <li class="disabled"> and removing the tab from data-toggle. I wrote a setTabDisabled(tabElement) method for quick toggling
Here is a working example
$(".btnNext").click(function () {
$(".nav-tabs > .active").next("li").find("a").trigger("click");
});
$(".btnPrevious").click(function () {
$(".nav-tabs > .active").prev("li").find("a").trigger("click");
});
let caseTitle = document.getElementById("caseTitle");
let caseTitleNext = document.querySelector("#tab1 .btnNext");
const setTabDisabled = (tabEl, isDisabled = true) => {
tabEl.setAttribute("class", isDisabled ? "disabled" : "");
const tabLink = tabEl.querySelector('a');
tabLink.setAttribute("data-toggle", isDisabled ? "" : "tab");
};
const setNonActiveTabsDisabled = (isDisabled = true) => {
document.querySelectorAll('.nav.nav-tabs li:not(.active)').forEach(element => {
setTabDisabled(element, isDisabled);
});
};
caseTitle.addEventListener("keyup", () => {
if(caseTitle.value.trim().length){
caseTitleNext.removeAttribute("disabled");
setNonActiveTabsDisabled(false);
}
else{
caseTitleNext.setAttribute("disabled","");
setNonActiveTabsDisabled(true);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="ibox-content">
<ul class="nav nav-tabs">
<li class="active">
Case Creation <i class="fa-solid fa-folder"></i>
</li>
<li class="disabled">
Attributes <i class="fa-duotone fa-circle-nodes"></i>
</li>
<li class="disabled">
Individual Involvement <i class="fa-solid fa-person"></i>
</li>
<li class="disabled">
Agency Involvement <i class="fa-solid fa-building"></i>
</li>
<li class="disabled">
Review Information <i class="fa-solid fa-memo"></i>
</li>
</ul>
<form id="createCase" name="createCase">
<div class="panel blank-panel">
<div class="panel-body">
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="caseTitle" class="is-required">Case Title</label>
<input type="text" class="form-control" id="caseTitle">
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label>Case Number</label>
<input type="text" placeholder="Enter case number" class="form-control">
</div>
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-default btnPrevious">Cancel</button>
<button type="button" class="btn btn-primary btnNext" disabled="disabled">Next</button>
</div>
</div>
<div class="tab-pane" id="tab2">
<h2>Tab 2 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-warning btnNext">Skip</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab3">
<h2>Tab 3 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab4">
<h2>Tab 4 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="button" class="btn btn-primary btnNext">Next</button>
</div>
</div>
<div class="tab-pane" id="tab5">
<h2>Tab 5 Content</h2>
<div class="btn-toolbar pull-right">
<button type="button" class="btn btn-primary btnPrevious">Previous</button>
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</div>
</form>
</div>

tab is not loading when I click

Here is my code I pulled out from the internet which works fine in Online Snippets but when I copy and run it on my local computer , the tab stays same. Please help me
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
I would be very greatful, If anyone could help me what I am doing wrong. For reference, here is the original link to above bootstrap theme.
https://bootsnipp.com/snippets/featured/people-card-with-tabs

The reason is that you didn't include the bootstrap.min.js file, you only included the jQuery and the bootstrap.min.css file.
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab"><span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<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.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
My 2 cents:
You should try and be more careful.
You should try and debug the problem, starting always from the most obvious reasons first.

You just need to load your js at the end of the body.
<div class="col-lg-6 col-sm-6">
<div class="card hovercard">
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab">
<span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Stars</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab">
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="following" class="btn btn-default" href="#tab3" data-toggle="tab">
<span class="glyphicon glyphicon-user" aria-hidden="true"></span>
<div class="hidden-xs">Following</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<h3>This is tab 1</h3>
</div>
<div class="tab-pane fade in" id="tab2">
<h3>This is tab 2</h3>
</div>
<div class="tab-pane fade in" id="tab3">
<h3>This is tab 3</h3>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
</script>

Trying to choose two different start points on a multicarousel page with jquery

I am trying to pick two different start points for the slide content. The setSlideContent indicator is set to 17 for the main gallery. But for the modal that will popup if there is alternate variations of that image will start at 0. Is there a way to start the slide content at 17 for main gallery carousel, but if it is a modal carousel, have it start at 0? I'm guessing I need an if/else here.
Would (using the original script) changing the setSlideContent to check if $carouselSelector contains .modal return setSlideSelector(0) else if $carouselSelector does not contain .modal return setSlideSelector(17) or whatever number I need work? Still extremely new to this.
NOTE in the example below the setSlideContent is set to 0 but but it is never set to 0 in practice (unless the carousel is in a modal) to take into account new slides being added. The number will always be the last slide added in my case it is 17.
$(function() {
$('.carousel-container').each(function() {
var $carouselContainer = $(this);
var $carousel = $carouselContainer.find('.carousel');
var $carouselText = $carouselContainer.find('.carousel-text');
var $carouselSelector = $carouselContainer.find('.carousel-selector');
$carousel.carousel({
interval: false
});
function setSlideContent(id) {
var targetContent = $carouselContainer.find('.slide-content[data-slide="' +
id +
'"]').html();
$carouselText.html(targetContent);
}
setSlideContent(0);
$carouselSelector.on('click', function() {
var targetSlide = $(this).data('slide');
$carousel.carousel(targetSlide);
});
$carousel.on('slid.bs.carousel', function() {
var targetSlide = $carousel.find('.active').index();
setSlideContent(targetSlide);
});
});
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<div class="container carousel-container">
<div class="row">
<div class="col">
<div class="carousel slide" id="carousel-0">
<!-- change this id and match with that in the JS -->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="carousel-item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#carousel-0" role="button" data-slide="prev">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel-0" role="button" data-slide="next">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col carousel-text"></div>
<div style="display: none;">
<!-- only needs the inline CSS -->
<div class="slide-content" data-slide="0">
<h5>Slide 1</h5>
<button class="btn btn-outline-dark btn-sm" data-toggle="modal" data-target="#modal1" type="button" style="margin-left: -1px;">press me</button>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<!-- change this id and match with that in the JS -->
<h5>Slide 2</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row">
<div class="col">
<a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
</div>
</div>
<div class="container carousel-container">
<div class="row">
<div class="col">
<div class="carousel slide" id="carousel-1">
<!-- change this id and match with that in the JS -->
<!-- Carousel items -->
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img src="http://placehold.it/770x300&text=one">
</div>
<div class="carousel-item" data-slide-number="1">
<img src="http://placehold.it/770x300&text=two">
</div>
<!-- Carousel nav -->
<a class="carousel-control-prev" href="#carousel-1" role="button" data-slide="prev">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
</a>
<a class="carousel-control-next" href="#carousel-1" role="button" data-slide="next">
<!-- change this id and match with that in the JS -->
<span class="carousel-control-next-icon" aria-hidden="true"></span>
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col carousel-text"></div>
<!-- change this id and match with that in JS -->
<div style="display: none;">
<!-- only needs the inline CSS -->
<div class="slide-content" data-slide="0">
<!-- change this id and match with that in the JS -->
<h5>Dreams of Avarice1</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Download</button>
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice1/avarice-nodof1280.jpg" download>1280x1024</a>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<!-- change this id and match with that in the JS -->
<h5>Avarice Zero1</h5>
<div class="dropdown">
<button class="btn btn-outline-dark btn-sm dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Downloads</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="./Downloads/avarice/avarice0/avarice01280.jpg" download>1280x1024</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row">
<div class="col">
<a class="carousel-selector" data-slide="0"><img src="http://placehold.it/170x100&text=one" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img src="http://placehold.it/170x100&text=two" class="img-thumbnail"></a>
<!-- change this id and match with that in the JS -->
</div>
</div>
</div>
<!-- modal -->
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3>...</h3>
</div>
<div class="modal-body">
<div class="container-fluid carousel-container">
<div class="container">
<div class="row mx-auto">
<div class="col">
<div class="carousel slide carousel-fade" id="carousel-...">
<div class="carousel-inner">
<div class="active carousel-item" data-slide-number="0">
<img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
<div class="carousel-item" data-slide-number="1">
<img data-src="./Downloads/hoohum" src="./loader-carousel.gif" class="lazy img-thumbnail" width="450" height="250"></div>
</div>
</div>
</div>
</div>
<hr>
<div class="row mx-auto">
<div class="col carousel-text"></div>
<div style="display: none;">
<div class="slide-content" data-slide="0">
<h5>0ne</h5>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>1280x1024</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>2560x1024 (Dual)</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/something/something" download>3840x1024 (Triple)</a>
</div>
</div>
</div>
</div>
<div class="slide-content" data-slide="1">
<h5>two</h5>
<div class="btn-group">
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Desktop</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>1280x1024</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Dual</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>2560x1024 (Dual)</a>
</div>
</div>
<div class="btn-group">
<button type="button" class="btn btn-outline-dark btn-sm dropdown-toggle" data-toggle="dropdown">Triple</button>
<div class="dropdown-menu" role="menu">
<a class="dropdown-item" href="./Downloads/other/other" download>3840x1024 (Triple)</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr>
<!--/Slider-->
<div class="row mx-auto">
<div class="col">
<a class="carousel-selector" data-slide="0"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
</div>
<div class="col">
<a class="carousel-selector" data-slide="1"><img data-src="./Downloads/hoohum" src="./loader-thumb.gif" class="lazy img-thumbnail" width="75" height="42"></a>
</div>
<div class="col"></div>
<div class="col"></div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-dark btn-sm" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

If I understand correctly, you want :
to initialize the modal carousel at its first slide, with corresponding caption.
to initialize all other carousels at their last slide, with corresponding caption.
At least, that would makes sense.
If I'm right, then the javascript will be something like this :
$(function() {
$('.carousel-container').each(function() {
var $carouselContainer = $(this);
var $carousel = $carouselContainer.find('.carousel').on('slid.bs.carousel', function() {
var targetSlide = $carousel.find('.active').index();
var targetContent = $carouselContainer.find('.slide-content[data-slide="' + targetSlide + '"]').html();
$carouselContainer.find('.carousel-text').html(targetContent);
}).carousel({
interval: false
});
$carouselContainer.find('.carousel-selector').on('click', function() {
var targetSlide = $(this).data('slide');
$carousel.carousel(targetSlide);
});
// The carousel is already at first slide (slide 0).
var n = $carouselContainer.find(".slide-content").length; // number of slides in this carousel
if (n < 2 || $carouselContainer.closest(".modal").length > 0) { // if there are less than 2 slides, or the carousel is in a .modal container
// Trigger the 'slid.bs.carousel' event so its handler can look after the .carousel-text ...
$carousel.trigger('slid.bs.carousel');
} else { // ... else, there are 2 or more slides and this is a non-modal carousel:
// send to last slide
$carousel.carousel(n - 1);
$carousel.trigger('slid.bs.carousel'); // shouldn't be necessary but has been found to be a workaround for `slid.bs.carousel` not being triggered automatically under some (undiagnosed) circumstances.
}
});
});
Demo

How do I create accordion style collapsing on bootstrap data-target?

I have multiple collapsing data-targets. I would like only 1 collapsible to be activated at a time.
My goal: Upon clicking on a different collapsing object, the previous object would "re-collapse".
I originally assumed the re-organization of the html but then began to wonder about Javascript.
Any recommendations? I love all opinions.
Thanks
Un-collapsed:
First collapse is deployed:
Second Collapse activated while first collapse is still deployed:
HTML/Bootstrap
<!--Collapsible Button Group -->
<div class="col-md-4">
<li data-toggle="collapse" data-target="#collapseNetwork" aria-expanded="false" aria-controls="collapseNetwork" class="btn btn-link">
<%= link_to "", "#", class:'fa fa-users' %>
</li>
</div>
<div class="col-md-4">
<li data-toggle="collapse" data-target="#collapseModifications" aria-expanded="false" aria-controls="collapseModifications" class="btn btn-link">
<%= link_to "", "#", class:'fa fa-male' %>
</li>
</div>
<div class="col-md-4">
<li data-toggle="collapse" data-target="#collapseAccolades" aria-expanded="false" aria-controls="collapseAccolades" class="btn btn-link">
<%= link_to "", "#", class:'fa fa-diamond' %>
</li>
</div>
<!--Collapsed Data Group-->
<div class="collapse" id="collapseNetwork"><br /><br />
<div class="panel">
<h3>NETWORK</h3><hr />
<ul class="media-list media-list-users list-group">
<li class="list-group-item">
<div class="media">
<a class="media-left" href="#">
<%= image_tag #user.profile.avatar.url(:thumb), class:'media-object img-circle' %>
</a>
<div class="media-body">
<button class="btn btn-primary-outline btn-sm pull-right">
<span class="icon icon-add-user"></span> Follow
</button>
<strong>Jane Smith</strong>
<small>#jcs - San Francisco</small>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<a class="media-left" href="#">
<%= image_tag #user.profile.avatar.url(:thumb), class:'media-object img-circle' %>
</a>
<div class="media-body">
<button class="btn btn-primary-outline btn-sm pull-right">
<span class="icon icon-add-user"></span> Follow
</button>
<strong>John Smith</strong>
<small>#jcs - Anywhere</small>
</div>
</div>
</li>
<li class="list-group-item">
<div class="media">
<a class="media-left" href="#">
<%= image_tag #user.profile.avatar.url(:thumb), class:'media-object img-circle' %>
</a>
<div class="media-body">
<button class="btn btn-primary-outline btn-sm pull-right">
<span class="icon icon-add-user"></span> Follow
</button>
<strong>Nathaniel</strong>
<small>#njr - Charleston</small>
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="collapse" id="collapseModifications"><br /><br />
<div class="panel">
<h3>MODIFICATIONS</h3>
</div>
</div>
<div class="collapse" id="collapseAccolades"><br /><br />
<div class="panel">
<h3>ACCOLADES</h3>
</div>
</div>

Solution: I changed the bootstrap from "collapsible" to "accordion". Thanks #Rob.
The basic solution is below. Thanks #Sherbrow. The full discussion can be found here: stackoverflow
<div id="myGroup">
<button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys <span class="badge badge-info pull-right">X</span></button>
<button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button>
<button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button>
<div class="accordion-group">
<div class="collapse indent" id="keys">
keys
</div>
<div class="collapse indent" id="attrs">
attrs
</div>
<div class="collapse" id="edit">
edit
</div>
</div>
Now that the code is cleaned up a bit, the problem still had to be addressed.
Problem(continued): The auto-collapse transition that restricts more than one panel from being opened at a time was still a problem.
Solution: I had to change the data class from "accordion-group" to "panel"