Swap div elements on hover Bootstrap 5 - javascript

I'm trying to swap a div's contents in a Bootstrap 5 row structure on hover. I'm currently trying to use Jquery for this but the method isn't working. It doesn't show any errors whatsoever, just doesn't work.
I don't care much if this can be done in JS or CSS, just need a solution that can replace div contents on hover. Additionally, if there could be a replacement animation (fade or slide) that'd be great.
$('.switch').hover(function() {
$(this).find('start1').hide();
$(this).find('switched').show();
}
, function() {
$(this).find('switched').hide();
$(this).find('start1').show();
}
)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>


You were close with the JavaScript. this ends up being the .switch element, so you can use that as the context for the selector. Obviously you'll need to update the logic to handle all of the menu items.
$('.switch').hover(function() {
$('.start1', this).hide();
$('.switched', this).show();
}, function() {
$('.switched', this).hide();
$('.start1', this).show();
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A; display:none;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>
Alternatively, here is a CSS-based approach
.switch:hover>.start1,
.switch:hover>.start2,
.switch:hover>.start3 {
display: none !important;
}
.switched,
.switched2,
.switched3 {
display: none;
}
.switch:hover>.switched,
.switch:hover>.switched2,
.switch:hover>.switched3,
.start1,
.start2,
.start3 {
display: block;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="container my-5">
<div class="row gx-5 switch text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main1.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 1</h2>
</div>
<div class="switched" style="background: #D86241">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text here
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<img src="images/main2.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 2</h2>
</div>
<div class="switched2" style="background: #A1274C;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<img src="images/main3.png" class="img-fluid h-50" alt="">
<h2 class="headingGreen mt-3">Heading 3</h2>
</div>
<div class="switched3" style="background: #771E3A;">
<h1 class="display-6 fw-bold heading">A Heading</h1>
<p class="lead">
Some text
</p>
</div>
</div>
<div class="d-grid col-2 mx-auto" style="margin-top:50px;">
<button type="button" class="btn btn-success btn-lg rounded-pill heading" name="button"> About us</button>
</div>
</div>


So I figured out a solution using CSS. Turns out the whole thing was much simpler than I thought.
Here's the Codepen.
HTML :
<div class="container my-5 px-5">
<div class="row switch gx-5 text-center rounded-3 shadow">
<div class="col-md-4 start1 border-end d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid hider mb-3 h-50" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
<div class="col-md-4 start2 border-end d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid h-50 mb-3 hider" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
<div class="col-md-4 start3 d-flex flex-column justify-content-center align-items-center">
<!-- OG content -->
<img src="https://via.placeholder.com/200" class="img-fluid mb-3 h-50 hider" alt="">
<h2 class="headingGreen hider">A heading</h2>
<!-- Hover content -->
<h2 class="display-5 heading shower">A heading</h2>
<p class="lead shower">
Some text
</p>
</div>
</div>
</div>
CSS :
.start1{
transition: background-color .25s;
}
.start2{
transition: background-color .25s;
}
.start3{
transition: background-color .25s;
}
.start1:hover{
background-color: #D86241;
}
.start2:hover{
background-color: #A1274C;
}
.start3:hover{
background-color: #771E3A;
}
.shower{
display: none;
color: white;
text-align: left !important;
}
.start1:hover .hider,
.start2:hover .hider,
.start3:hover .hider
{
display: none;
}
.start1:hover .shower,
.start2:hover .shower,
.start3:hover .shower
{
display: block;
}

Related

Bootstrap 5 card group with tiny-slider-2, Card width changing

Im trying to use Bootstrap 5 card group with tiny slider.
Tiny slider changing Bootstrap Card width.
Tiny slider autoWidth and fixedWidth not fixing Card Width.
HTML Code
<div class="card-group" id="slider">
<div class="card m-3" >
<img src="image/card1.png" alt="">
<div class="body">
<h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
<p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
</div>
</div>
<div class="card m-3" >
<img src="image/card1.png" alt="">
<div class="body">
<h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
<p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
</div>
</div>
<div class="card m-3" >
<img src="image/card1.png" alt="">
<div class="body">
<h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
<p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
</div>
</div>
<div class="card m-3" >
<img src="image/card1.png" alt="">
<div class="body">
<h6 class="card-title text-center m-0">Lorem, ipsum dolor.</h6>
<p class="card-text text-muted text-center"><small class="">Rs 99999</small></p>
</div>
</div>
</div>
Tiny Slider
slider = tns({
"container": "#slider",
"nav": false,
"items": 4,
"gutter": 10,
"swipeAngle": false,
"speed": 400,
});

How to filter products using javascript?

I'm unable to make this filter work properly.
All I want is if someone clicks on a particular filter, the products underneath gets sorted accordingly.
I have used data-* attributes for filtering.
HTML:
<section id="store" class="store py-5">
<div class="container">
<!-- section title -->
<div class="row">
<div class="col-10 mx-auto col-sm-6 text-center">
<h1 class="text-capitalize">our <strong class="banner-title ">store</strong></h1>
</div>
</div>
<!-- end of section title -->
<!--filter buttons -->
<div class="row">
<div class=" col-lg-8 mx-auto d-flex justify-content-around my-2 sortBtn flex-wrap">
all
cakes
cupcakes
sweets
doughnuts
</div>
</div>
<!--end of filter buttons -->
<!-- store items-->
<div class="row" id="store-items">
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-1.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">5</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-2.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">10</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item sweets" data-item="sweets">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/sweets-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">sweet item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cupcakes" data-item="cupcakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cupcake-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cupcake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item cakes" data-item="cakes">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/cake-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">cake item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
<!-- single item -->
<div class="col-10 col-sm-6 col-lg-4 mx-auto my-3 store-item doughnuts" data-item="dougnuts">
<div class="card ">
<div class="img-container">
<img src="https://js-beginners.github.io/filter-project/img/doughnut-3.jpeg" class="card-img-top store-img" alt="">
<span class="store-item-icon">
<i class="fas fa-shopping-cart"></i>
</span>
</div>
<div class="card-body">
<div class="card-text d-flex justify-content-between text-capitalize">
<h5 id="store-item-name">dougnut item</h5>
<p class="store-item-value">$ <strong id="store-item-price" class="font-weight-bold">15</strong></p>
</div>
</div>
</div>
<!-- end of card-->
</div>
<!--end of single store item-->
</div>
</section>
JS:
const storeItems = document.querySelectorAll('.store-item');
const filterBtn = document.querySelectorAll('.filter-btn');
function filterItems(){
filterBtn.forEach(function(btn){
const filter = btn.dataset.filter;
if (filter === "all"){
console.log(filter);
storeItems.forEach(function(item){
item.style.display = "block"
})
}
else if (filter === "cakes"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('cakes')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "cupcakes"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('cupcakes')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "sweets"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('sweets')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
else if (filter === "doughnuts"){
console.log(filter);
storeItems.forEach(function(item){
if (item.classList.contains('doughnuts')){
item.style.display = "block"
}
else {
item.style.display = "none"
}
})
}
})
}
What happens is on clicking on a particular filter button, only the products having class="doughnuts" gets displayed and the rest sets to display:none.
To better explain there's a demo available here: https://codepen.io/sumayya_ishaq/pen/eYdQaRy

Obtain different values ​depending on the selection criteria

I would appreciate if you could help me, since I am a novice in programming, I am wanting to obtain different values ​​depending on what I select, and that these numerical values ​​change in each box.
For example, if I select "Loans" in the "new orders" box, the value will be: 312, in the "In process" box 180, in the "Approved" box 56, and in the "Rejected" box 25, as an example .
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select">
<option value="0" selected>Loans</option>
<option value="1">Home appliances</option>
<option value="2">Cable tv</option>
<option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
<!-- column -->
<div class="col-xs-4">
<div class="card bg-info text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">New orders</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">368</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-secondary text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">In process</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">257</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-success text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Approved</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">86</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card bg-danger text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Rejected</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium">25</span>
</div>
</div>
</div>
</div>
</div>
</div>

From what I understand from your question: You want to dynamically change the vales in the boxes based on the selection in the dropdown.
This can be done in 3 steps:
Read value from dropdown
Based on the value above, get the data to be put
Update the HTML with the correct id to show correct data
I am using a hardcoded dictionary, you should structure your data in a similar way to easily update the values as needed.
const sampleData = {
"0": [30, 2, 18, 6],
"1": [435, 234, 38, 84],
"2": [464, 34, 49, 33],
"3": [342, 96, 60, 74]
};
const setValues = () => {
const val = document.getElementById("selection").value;
document.getElementById("new-orders").textContent = sampleData[val][0];
document.getElementById("in-process").textContent = sampleData[val][1];
document.getElementById("approved").textContent = sampleData[val][2];
document.getElementById("rejected").textContent = sampleData[val][3];
};
// setting values initially
setValues();
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select" id="selection" onchange="setValues()">
<option value="0" selected>Loans</option>
<option value="1">Home appliances</option>
<option value="2">Cable tv</option>
<option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
<!-- column -->
<div class="col-xs-4">
<div class="card bg-info text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">New orders</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="new-orders">368</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-secondary text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">In process</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="in-process">257</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-success text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Approved</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="approved">86</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card bg-danger text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Rejected</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium" id="rejected">25</span>
</div>
</div>
</div>
</div>
</div>
</div>

I added classes to the spans but you could do the same with tag names
works fine for me ;)
let numbers = document.getElementsByClassName("number");
for(let i = 0;i<numbers.length;i++){
numbers[i].addEventListener("click",()=>{
//YOU WILL GET THE NUMBER YOU CLICKED
console.log(numbers[i].innerText);
})
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<div class="row">
<div class="ml-auto">
<select class="custom-select">
<option value="0" selected>Loans</option>
<option value="1">Home appliances</option>
<option value="2">Cable tv</option>
<option value="3">Internet</option>
</select>
</div>
</div>
<div class="row">
<!-- column -->
<div class="col-xs-4">
<div class="card bg-info text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">New orders</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">368</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-secondary text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">In process</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">257</span>
</div>
</div>
</div>
</div>
</div>
<!-- column -->
<div class="col-xs-4">
<div class="card bg-success text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Approved</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">86</span>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-4">
<div class="card bg-danger text-white card-hover">
<div class="card-body">
<h3 class="card-title m-b-0">Rejected</h3>
<div class="align-items-center">
<div class="p-t-20 text-center">
<span class="display-4 d-block font-medium number">25</span>
</div>
</div>
</div>
</div>
</div>
</div>
Run the code to check

how to display selected div and hide others sibling div?

I want that all unselected div will disappear and will show me only the selected card. i have different card which ids are dynamic (default++) using loop and also i added affect that when use select div it chose red border over div.
I tried different method when i click on the selected div that selected div will remain the rest div will be disappeared.
//Showing border on the selected card
$('.selects').click(function() {
if ($('.selects.choice').length > 0) {
$('.choice').removeClass('choice');
$(this).addClass('choice');
} else {
$(this).addClass('choice');
}
});
.card{
margin:5px;
width:140px;
display: flex !important;
justify-content: center;
align-items:center;
}
#operatorImage >img {
width:100px;
height:50px;
}
.choice {
border: 3px #CA0B00 solid;
text-decoration: none;
}
.operator-card{
cursor:pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="default-0" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="default-2" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Pakistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Telenor</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
<div id="default-3" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Nigira</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">MTN</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="default-2" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 " >
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E"/>
</div>
</div>
</div>
</div>
</div>
</div>

You can just toggle between siblings something like this:
$('.card-body').click(function() {
$('.card-body').not(this).hide();
});
.card {
margin: 5px;
width: 140px;
display: flex !important;
justify-content: center;
align-items: center;
}
#operatorImage>img {
width: 100px;
height: 50px;
}
.choice {
border: 3px #CA0B00 solid;
text-decoration: none;
}
.operator-card {
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="default-0" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 ">
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Afghanistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Etisalat</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E" />
</div>
</div>
</div>
</div>
</div>
</div>
<div id="default-2" class="operator-card col-md-4">
<div class="col-xl-12 col-md-12 mb-4 ">
<div class="card border-left-danger shadow h-100 py-2 selects">
<div class="card-body">
<div class="row no-gutters align-items-center">
<div class="col mr-2">
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1" class="countryName">Pakistan</div>
<div class="h5 mb-0 font-weight-bold text-gray-800" id="operatorname">Telenor</div>
</div>
<div class="col-auto" id="operatorImage">
<img src="https://media.licdn.com/dms/image/C560BAQFPfrFyKNx-0w/company-logo_200_200/0?e=2159024400&v=beta&t=lZV1Q4xsyrvB5cocn8ht0b43KtdRrOiZ6TXU9SL2q9E" />
</div>
</div>
</div>
</div>

Something like this?
var $selects = $('.selects');
$selects.click(function() {
$selects.not(this).removeClass('choice').hide();
$(this).addClass('choice');
});
just tested and it works... but you will have to remove this important in css:
display: flex !important;

How to sort divs in Static html page?

I am trying to sort divs through their internal content in static HTML page. I am able to sort the content but how can i append the complete div back to page? Any suggestions?
var orderedDivs = $('.col-md-3 .card-body .card-title').sort(function(a, b) {
return String.prototype.localeCompare.call($(a).text().toLowerCase(), $(b).text().toLowerCase());
});
console.log(orderedDivs);
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle">Designation1</h6>
<p class="card-text">Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">Mary Jane</h5>
<h6 class="card-subtitle">Designation2</h6>
<p class="card-text">Lorem Ipsum 2</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">David Rock</h5>
<h6 class="card-subtitle">Designation3</h6>
<p class="card-text">Lorem Ipsum 3</p>
</div>
</div>
</div>

Try this: apply sorting on col-md-3 divs and inside sorting apply localCompare on title and return the element.
replace sorted divs in the parent element, I have replaced it in body.
$(document).ready(function(){
var $sortedDiv = $('.col-md-3').sort(function(a,b){
var text1 = $(a).find('.card-body .card-title').text();
var text2 = $(b).find('.card-body .card-title').text();
return String.prototype.localeCompare.call(text1.toLowerCase(),text2.toLowerCase());
});
$('body').html($sortedDiv);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle">Designation1</h6>
<p class="card-text">Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">Mary Jane</h5>
<h6 class="card-subtitle">Designation2</h6>
<p class="card-text">Lorem Ipsum 2</p>
</div>
</div>
</div>
<div class="col-md-3">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">David Rock</h5>
<h6 class="card-subtitle">Designation3</h6>
<p class="card-text">Lorem Ipsum 3</p>
</div>
</div>
</div>

Add the whole html to a div and set paste back the content
$("document").ready(function(){
var orderedDivs = $('.col-md-3').sort(function(a, b) {
return String.prototype.localeCompare.call($(a).data('title').toLowerCase(), $(b).data('title').toLowerCase());
});
$("#content").html(orderedDivs);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="content">
<div class="col-md-3" data-title="John Doe">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">John Doe</h5>
<h6 class="card-subtitle">Designation1</h6>
<p class="card-text">Lorem Ipsum</p>
</div>
</div>
</div>
<div class="col-md-3" data-title="Mary Jane">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">Mary Jane</h5>
<h6 class="card-subtitle">Designation2</h6>
<p class="card-text">Lorem Ipsum 2</p>
</div>
</div>
</div>
<div class="col-md-3" data-title="David Rock">
<div class="card">
<div class="card-icon">
<img src="#"/>
</div>
<div class="card-body">
<h5 class="card-title">David Rock</h5>
<h6 class="card-subtitle">Designation3</h6>
<p class="card-text">Lorem Ipsum 3</p>
</div>
</div>
</div>
</div>

Categories

Resources