When scrolling, I change my card from position:static;, to position:fixed;. When it changes to position:fixed;, the width gets insanely large rather than staying the same.
I've tried a variety of solutions, including all listed on a near duplicate post here: Is it possible to keep the width of the parent element when position: fixed is applied?
Just wondering if I'm being silly here. Any help would be greatly appreciated.
var elementPosition = $('#navigation').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#navigation').css('position', 'fixed').css('top', '0');
} else {
$('#navigation').css('position', 'static');
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid mt-4">
<div class="row">
<div class="col-3">
<div class="card" id="navigation">
<div class="card-body">
<h3>txgrgrgr</h3>
<p>Hello and welcome to the online booking page forthghfg.</p>
<hr>
<h4 class="mt-4">Contact</h4>
<p>thghshg.co.uk</p>
<p>0123464</p>
<hr>
<h4 class="mt-4">Address</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
<hr>
<h4 class="mt-4">Opening Times</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
</div>
</div>
</div>
<div class="col-9" style="margin-bottom:1000px;">
<div class="card">
<div class="card-body text-center">
<h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>
<div class="row">
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>
I have added position:sticky in both case. when its scroll or not. Pleas check below snippet its working fine.
var elementPosition = $('#navigation').offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$('#navigation').css('position', 'sticky').css('top', '0');
} else {
$('#navigation').css('position', 'sticky');
}
});
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="container-fluid mt-4">
<div class="row">
<div class="col-3">
<div class="card" id="navigation">
<div class="card-body">
<h3>txgrgrgr</h3>
<p>Hello and welcome to the online booking page forthghfg.</p>
<hr>
<h4 class="mt-4">Contact</h4>
<p>thghshg.co.uk</p>
<p>0123464</p>
<hr>
<h4 class="mt-4">Address</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
<hr>
<h4 class="mt-4">Opening Times</h4>
<p>2064 Ballard Str<br> Texas<br>Lincolnshire<br> LN4 1TJ</p>
</div>
</div>
</div>
<div class="col-9" style="margin-bottom:1000px;">
<div class="card">
<div class="card-body text-center">
<h2 class="mb-4 pb-4 pt-4">Schedule with a team member</h2>
<div class="row">
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>
<div class="col-3 mb-3">
<div class="card h-100">
<img class="card-img-top" style="max-height: 200px;" src="https://images.pexels.com/photos/91227/pexels-photo-91227.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Card image cap">
<div class="card-body">
<p class="card-text"><strong>Terry Logan</strong><br> Massage Therapist</p>
<a class="btn btn-success btn-block">Schedule Appointment</a>
</div>
</div>
</div>
Related
I am developing a code where I have different option levels and I want one of those options to display a nav bar with two tabs: one to search customers and the other to add customers, I already have the loadView, loadCustomersView and loadAddCustomerView function in my clients.html doc, but it does not display the content when I click on the tabs.
How can I make the navigation bar with the search and add clients options show me what is in search.html and addcustomer.html? (see image 3)
step 1, click in opcion1
step 2, click in opcion 1.1
step3, have a nav bar with 2 options: search and add customers
here is a copy of all my files.
codigo.gs
function doGet() {
return HtmlService.createHtmlOutputFromFile('Index');
}
function getOpcion1() {
var html = HtmlService.createHtmlOutputFromFile('opcion1').getContent();
return html
}
function getObtenerClientes() {
var html = HtmlService.createHtmlOutputFromFile('clientes').getContent();
return html
}
function loadPartialHTML_(partial) {
const htmlServ = HtmlService.createTemplateFromFile(partial);
return htmlServ.evaluate().getContent();
}
function loadSearchView() {
return loadPartialHTML_("search");
}
function loadAddCustomersView() {
return loadPartialHTML_("addcustomer");
}
Index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<title>Gestor Virtual de Talento 1.0</title>
<style>
.nav-link {
cursor:pointer;
}
#loading {
position:fixed;
top:0;
left:0;
x-index:10000;
width:100vw;
height:100vh;
background-color: rgba(255,255,255,0.9);
}
</style>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-primary static-top mb-5" style="background-color: #072146;">
<div class="container-fluid" style="height:67.33px; background-color: #072146">
<div class="d-flex justify-content-end">
<a class="badge badge-info" href="javascript:ventanaSecundaria('https://docs.google.com')" style="text-align: center;">Guía de usuario</a>
</div>
</div>
</nav>
<div class="container">
<h3>Bienvenidos </h3>
<h6>Selecciona una opción</h6>
<P></P>
</div>
<div class="card-group">
<div class="card">
<div style="text-align: center;" >
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1eBB_kiCc6FDkbDZwkKueZho-yDFeBOHU" alt="Card image cap" alt="" >
<div class="card-body">
<input type="button" value="Opcion 1" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getOpcion1()" />
<P></P>
<p class="card-text">Conoce opcion 1</p>
</div>
</div>
</div>
<div class="card">
<div style="text-align: center;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1osgZRT_0ahKHXGyNbasbx_xaBr2_2orx" alt="Card image cap">
<div class="card-body">
<input type="button" value="Opcion 2" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getOpcion2()" />
<P></P>
<p class="card-text">Conoce opcion 2</p>
</div>
</div>
</div>
<div class="card">
<div style="text-align: center;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=1Hmxvyc9gM9KEpdQUalaNCvsPFJV8VYfJ" alt="Card image cap" >
<div class="card-body">
<input type="button" value="Opcion 3" class="btn btn-primary" style="background-color: #004481;color: #ffffff"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getPagina3()" />
<P></P>
<p class="card-text">conoce pagina 3</p>
</div>
</div>
</div>
</div>
<p></p>
<p></p>
<div id="resultado" class="container">
</div>
<P></P>
<script>
function ventanaSecundaria (URL){
window.open(URL,"ventana1","width=1400,height=700,scrollbars=NO")
}
function actualizarDiv(html, button) {
var div = document.getElementById('resultado');
div.innerHTML = html;
}
</script>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</body>
</html>
opcion1.html
<P></P>
<br>
<div class="container">
<div class="d-flex justify-content-center">
<div class="row row-cols-1 row-cols-md-3 g-4">
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=19CbMDqXEmgtPemrwiAlsaRyZmdMPrZqA" width="286px" height="180px">
<div class="card-body">
<h5 class="card-title">Opcion 1.1</h5>
<p class="card-text">conoce opcion 1.1</p>
<input type="button" value="Accede aquí" class="btn btn-info"
onclick="google.script.run
.withSuccessHandler(actualizarDiv)
.withUserObject(this)
.getObtenerClientes()" />
</div>
</div>
</div>
<div class="col">
<div class="card h-100" style="width: 18rem;">
<img class="card-img-top" src="http://drive.google.com/uc?export=view&id=14_9fglXHnJhb4U4Xyy6XApBJ8KEerDd_" width="286px" height="180px">
<div class="card-body">
<h5 class="card-title">Opcion 1.2</h5>
<p class="card-text">conoce opcion 1.2</p>
<a class="btn btn-info" href="javascript:ventanaSecundaria('https://google.com/')" style="text-align: center;">Accede aquí</a>
</div>
</div>
</div>
</div>
</div>
</div>
clientes.html
<P></P>
<div class="d-flex justify-content-center">
<div class="card mb-5" style="width: 18rem;">
<img src="http://drive.google.com/uc?export=view&id=13n5Nl3nZzL8GRJkG8EeNSPJi-vobrjw_" width="286px" height="180px" class="mx-auto">
<h5 class="text-center">Validación Clientes</h5>
</div>
</div>
<div class="container">
<h6>Selecciona clientes y valídalos.</h6>
<P></P>
</div>
<div class="container">
<nav id="navigation" class="mb-3">
<ul class="nav nav-tabs main-nav">
<li class="nav-item">
<div class="nav-link active" id="search-link">Encontrar cliente</div>
</li>
<li class="nav-item">
<div class="nav-link" id="add-customer-link">Aniadir cliente</div>
</li>
</ul>
</nav>
</div>
<div id="app"></div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
function loadView(options){
var id = typeof options.id === "undefined" ? "app" : options.id;
var cb = typeof options.callback === "undefined" ? function(){} : options.callback;
google.script.run.withSuccessHandler(function(html){
document.getElementById(id).innerHTML = html;
typeof options.params === "undefined" ? cb() : cb(options.params);
})[options.func]();
}
function loadSearchView(){
loadView({func:"loadSearchView"});
}
function loadAddCustomerView(){
loadView({func:"loadAddCustomersView"});
}
document.getElementById("search-link").addEventListener("click",loadSearchView);
document.getElementById("add-customer-link").addEventListener("click",loadAddCustomerView);
</script>
search.html
<h4>Search</h4>
<div class="mb-3">
<input type="text" class="form-control" id="searchInput" placeholder="search...">
</div>
<table class="table table-hover">
<thead>
<tr>
<th scope="col" class="text-right">#</th>
<th scope="col">ID</th>
<th scope="col">Nombre</th>
<th scope="col"></th>
<th scope="col"></th>
</tr>
</thead>
</table>
addcustomer.html
<h4>Add a Customer</h4>
<div class="add-customer-form">
<div class="mb-3">
<label for="first-name" class="form-label">Nombre</label>
<input type="text" class="form-control" id="first-name">
</div>
<div class="mb-3">
<label for="last-name" class="form-label">Apellido</label>
<input type="text" class="form-control" id="last-name">
</div>
<button class="btn btn-primary" id="add-customer-button">Add Customer</button>
</div>
<div class="alert alert-success invisible mt-3" id="save-success-message" role="alert">
New customer Added!
</div>
there are 6 images in my section, at the first u can see just 3 of them and when u click on read more will opened another 3 image (Collapse), but the question or the problem is, when that button will be opened the screen doesn’t follow the button to down and when i clicked on read less, the screen doesn’t follow the button to top! but the screen stay on a fix position and i have to scroll down/up to see another images
// Read more/less option
$(document).ready(function () {
$('.nav-toggle').click(function () {
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function () {
if ($(this).css('display') == 'none') {
toggle_switch.html('Read More');
} else {
toggle_switch.html('Read Less');
}
});
});
});
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row" id="collapse" style="display:none">
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
You can use scrollIntoView function
// Read more/less option
$(document).ready(function () {
$('.nav-toggle').click(function () {
var collapse_content_selector = $(this).attr('href');
var toggle_switch = $(this);
$(collapse_content_selector).toggle(function () {
if ($(this).css('display') == 'none') {
toggle_switch.html('Read More');
} else {
toggle_switch.html('Read Less');
}
toggle_switch[0].scrollIntoView(false);
});
});
});
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/fontawesome/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section>
<div class="container">
<div class="row">
<h1 class="col-12 text-center pb-5 pt-5">Aktionen</h1>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_7.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_6.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_5.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
</div>
<div class="container">
<div class="row" id="collapse" style="display:none">
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_20.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_12.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
<div class="col-md-4 mb-4 aktion-text">
<h2></h2>
<div class="hovereffect">
<img class="img-fluid d-block mx-auto" src="image/Bild_11.jpg">
</div>
<h2 class="center">Industrie</h2>
</div>
</div>
<div class="d-flex justify-content-center">
<button type="button" href="#collapse" class="btn btn-secondary nav-toggle">Read More</button></div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/main.js"></script>
</body>
</html>
Try with adding focus selector to the button onclick
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
I am creating a filtering function. With this function we want to filter the application cards, but I cannot display the element properly. The function does not show part of the filtered card, button, picture or text. I know that by placing "#myDIV *" in the .filter function it will search all the elements, even knowing this, I have not found the right way to do it.
Can anybody help me?
I have tried with the code below:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myDIV *").filter(function () {
if ($(this).text().toLowerCase() != "abrir") {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
}
});
});
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
Abrir
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content"> <div id="login"></div>
</div></div></div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="far fa-check-circle"></i>
</div><div class="modal-title"> Correcto
</div><div class="modal-body"> La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-envelope"></i>
</div><div class="modal-title"> Información
</div><div class="modal-body"> Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title"> Error
</div><div class="modal-body"> Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-warning"></i>
</div><div class="modal-title"> Alerta
</div><div class="modal-body"> Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>
You can first hide all cards while typing and only show the ones based on the search query. To simplify your filter a bit you could use includes as well.
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("div[class^=col]")
.hide()
.filter(function() {
var cardTitle = $(this).find('.card-title').text().toLowerCase();
return cardTitle.includes(value);
})
.show();
});
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
Abrir
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="login"></div>
</div>
</div>
</div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="far fa-check-circle"></i>
</div>
<div class="modal-title"> Correcto
</div>
<div class="modal-body"> La solicitud se efectuó con éxito
</div>
<div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div>
</div>
</div>
</div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="fa fa-envelope"></i>
</div>
<div class="modal-title"> Información
</div>
<div class="modal-body"> Se le notifica información importante
</div>
<div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div>
</div>
</div>
</div>
<!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div>
<div class="modal-title"> Error
</div>
<div class="modal-body"> Se ha producido un error
</div>
<div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div>
</div>
</div>
</div>
<!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"> <i class="fa fa-warning"></i>
</div>
<div class="modal-title"> Alerta
</div>
<div class="modal-body"> Algo ha salido mal
</div>
<div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div>
</div>
</div>
</div>
<!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>
$('#box').keyup(function(){
var valThis = $(this).val().toLowerCase();
if(valThis === ""){
$('.library_card > div').show();
} else {
$('.library_card > div').each(function(){
var text = $(this).text().toLowerCase();
(text.indexOf(valThis) >= 0) ? $(this).show() : $(this).hide();
});
};
});
// #box-- inpuut type text id
// .library_card -- div class
I found this way to solve the problem and prevent the cards from being displayed incorrectly:
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$(".card").filter(function () {
$(this.parentNode).toggle($(this).find('.card-title').text().toLowerCase().indexOf(value) > -1)
});
});
});
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
.card {
min-height: 250px;
}
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- Tell the browser to be responsive to screen width -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Favicon icon -->
<link rel="icon" type="image/png" sizes="16x16" href="/assets/images/favicon.png">
<title>SGR - Desktop</title>
<!-- Custom CSS -->
<!-- Custom CSS -->
<link href="/assets/css/font-awesome.css" rel="stylesheet" />
<link href="/assets/libs/toastr/build/toastr.min.css" rel="stylesheet">
<link href="/assets/libs/select2/dist/css/select2.min.css" rel="stylesheet">
<link href="/dist/css/style.min.css" rel="stylesheet">
<link href="/dist/css/core.css" rel="stylesheet">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!-- ============================================================== -->
<!-- Preloader - style you can find in spinners.css -->
<!-- ============================================================== -->
<div class="preloader">
<div class="lds-ripple">
<div class="lds-pos"></div>
<div class="lds-pos"></div>
</div>
</div>
<div id="main-wrapper">
<div class="page-wrapper">
<div class="page-breadcrumb">
<div class="row">
<div class="col-12 d-flex no-block align-items-center">
<div class="header-title">
<h1>
Home
<small>
<i class="fa fa-angle-right"></i>
Desktop
</small>
</h1>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<style>
</style>
<input class="form-control col-md-3 col-sm-4 col-xs-6" id="myInput" type="text" placeholder="Search..">
<br />
<br />
<div class="container">
<div id="myDIV" class="row">
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="emulador project64">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">emulador project64</h5>
<p class="card-text">project64.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="overwatch">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">overwatch</h5>
<p class="card-text">overwatch.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="YouTube">
<img class="card-img-top" src="../../assets/images/YouTube.png">
<div class="card-body">
<h5 class="card-title">YouTube</h5>
<p class="card-text">Google Inc.</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Canal de Denuncias">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Canal de Denuncias</h5>
<p class="card-text">https://www.canaldedenuncia.cl/cda/metro/cdpages/Inicio.aspx</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Cipher">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Cipher</h5>
<p class="card-text">www.cipher.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Terraria">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Terraria</h5>
<p class="card-text">shared/terraria.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Revista Andén">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Revista Andén</h5>
<p class="card-text">http://nt25_intranet/archivos/revistas/2017-03/revista.pdf</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Smov2">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Smov2</h5>
<p class="card-text">\\NT1_METRO\Aplicacion\Operaciones\smov2\SMOV 2.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Concursos internos">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Concursos internos</h5>
<p class="card-text">https://metro.openagora.cl/</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="The Clinic">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">The Clinic</h5>
<p class="card-text">www.theclinic.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Hotmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Hotmail</h5>
<p class="card-text">http://www.hotmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Gmail">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Gmail</h5>
<p class="card-text">http://www.gmail.com</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="CNN">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">CNN</h5>
<p class="card-text">www.cnn.org</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Metro Familia">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Metro Familia</h5>
<p class="card-text">http://andensocial.metro.cl/aplicaciones-generales/metro-en-familia</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="League of Legends">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">League of Legends</h5>
<p class="card-text">lollauncher.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Minecraft Java Edition">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Minecraft Java Edition</h5>
<p class="card-text">minecraft.exe</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Webmail Metro">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Webmail Metro</h5>
<p class="card-text">https://mail.metro.cl/owa/auth/logon.aspx?replaceCurrent=1&url=https%3a%2f%2fmail.metro.cl%2fowa%2f</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Autoconsulta ESS">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Autoconsulta ESS</h5>
<p class="card-text">http://172.16.20.60:84/sse_generico/espanol/generico_login.jsp?estado=0</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Andén Social">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Andén Social</h5>
<p class="card-text">http://andensocial.metro.cl</p>
Abrir
</div>
</div>
</div>
<div class="col-md-3 col-sm-4 col-xs-6">
<div class="card" id="Sitio Conductores">
<img class="card-img-top" src="">
<div class="card-body">
<h5 class="card-title">Sitio Conductores</h5>
<p class="card-text">http://operaciones.metrosantiago.cl/</p>
Abrir
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer text-center">
<div class="modal" id="loginModal"><div class="modal-dialog modal-lg"><div class="modal-content"> <div id="login"></div>
</div></div></div>
</footer>
</div>
</div>
<script src="/assets/libs/jquery/dist/jquery.min.js"></script>
<!-- Bootstrap tether Core JavaScript -->
<script src="/assets/libs/popper.js/dist/umd/popper.min.js"></script>
<script src="/assets/libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/assets/libs/perfect-scrollbar/dist/perfect-scrollbar.jquery.min.js"></script>
<script src="/assets/extra-libs/sparkline/sparkline.js"></script>
<!--Wave Effects -->
<script src="/dist/js/waves.js"></script>
<!--Menu sidebar -->
<script src="/dist/js/sidebarmenu.js"></script>
<!--Custom JavaScript -->
<script src="/dist/js/custom.min.js"></script>
<script src="/dist/js/core.js"></script>
<script src="/assets/libs/toastr/build/toastr.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.full.min.js"></script>
<script src="/assets/libs/select2/dist/js/select2.min.js"></script>
<script src="/assets/libs/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="/assets/libs/bootbox/bootbox.js"></script>
<!--This page JavaScript -->
<!-- <script src="~/dist/js/pages/dashboards/dashboard1.js"></script> -->
<!-- Charts js Files -->
<!--Success Modal Templates-->
<div class="modal fade modal-message modal-success" id="modal-success"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="far fa-check-circle"></i>
</div><div class="modal-title"> Correcto
</div><div class="modal-body"> La solicitud se efectuó con éxito
</div><div class="modal-footer"><button class="btn btn-success " data-dismiss="modal" type="button">Aceptar</button></div></div></div></div>
<!--End Success Modal Templates-->
<!--Info Modal Templates-->
<div class="modal fade modal-message modal-info" id="modal-info"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-envelope"></i>
</div><div class="modal-title"> Información
</div><div class="modal-body"> Se le notifica información importante
</div><div class="modal-footer"><button class="btn btn-info " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Info Modal Templates-->
<!--Danger Modal Templates-->
<div class="modal fade modal-message modal-danger" id="modal-danger"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="glyphicon glyphicon-fire"></i>
</div><div class="modal-title"> Error
</div><div class="modal-body"> Se ha producido un error
</div><div class="modal-footer"><button class="btn btn-danger " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Danger Modal Templates-->
<!--Warning Modal Templates-->
<div class="modal fade modal-message modal-warning" id="modal-warning"><div class="modal-dialog"><div class="modal-content"><div class="modal-header"> <i class="fa fa-warning"></i>
</div><div class="modal-title"> Alerta
</div><div class="modal-body"> Algo ha salido mal
</div><div class="modal-footer"><button class="btn btn-warning " data-dismiss="modal" type="button">Ok</button></div></div></div></div><!--End Warning Modal Templates-->
<!--Confirm Modal Templates-->
<div id="core_modalconfirmdialog" style="display:none;">
<div class="row">
<div class="col-md-12">
<div class="modal-header">
<i class="fa fa-warning"></i>
</div>
<div class="modal-body">
Mensaje
</div>
<div class="modal-body">
Mensaje que iría en el centro
</div>
</div>
</div>
</div>
<!--Confirm Modal Templates-->
</body>
</html>
I have 4 cards which contain data. I want when first header text card is clicked, it expand upward, and info I displayed and when clicked the same card it hide the body but the rest card stays the same,
Here is visual of what I want.
UPDATE
Here is JSFiddle with all four cards: http://jsfiddle.net/Mwanitete/rzjxkv8e/2/
Here is HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="data">
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a data-toggle="collapse" href="#test-block" aria-expanded="true" aria-controls="test-block">
card header
</a>
</div>
<div id="test-block" class="collapse">
<div class="card-body">
card block
</div>
</div>
</div>
</div>
Here is JavaScript
$('.card-header').click(function(){
$('.card').toggleClass('.card-size')
})
Here is CSS
.data{
display: flex;
}
.card-size{
height: 224px;
}
Here's a JSFiddle with a working solution.
I've stripped out the collapse attributes and pulled it down to barebones.
http://jsfiddle.net/9musLxy4/88/
HTML:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="data">
<div class='card-container' data-card-id='1'>
<div class='card-header' data-card-id='1'>
Header
</div>
<div class='card-body collapse' data-card-id='1'>
<div class='data'>
Body 1
</div>
</div>
</div>
<div class='card-container' data-card-id='2'>
<div class='card-header' data-card-id='2'>
Header
</div>
<div class='card-body collapse' data-card-id='2'>
<div class='data'>
Body 2
</div>
</div>
</div>
<div class='card-container' data-card-id='3'>
<div class='card-header' data-card-id='3'>
Header
</div>
<div class='card-body collapse' data-card-id='3'>
<div class='data'>
Body 3
</div>
</div>
</div>
<div class='card-container' data-card-id='4'>
<div class='card-header' data-card-id='4'>
Header
</div>
<div class='card-body collapse' data-card-id='4'>
<div class='data'>
Body 4
</div>
</div>
</div>
</div>
CSS:
.data{
display: flex;
}
.card-body {
border: 1px solid black;
}
JS:
$('.card-container').on('click', function(event) {
var id = $(this).data('card-id')
$('.card-body[data-card-id="' + id + '"]').toggle()
})
$('.card-header').click(function(){
$(this).toggleClass('.card-size');
$(this).parent().find('#test-block').toggleClass('show')
})
Use this
Are you just trying to change the size of the card in general when it is expanded? If so, lose the JQuery, you just need a CSS style:
#test-block .card-body {
height: 224px;
}
If you want to the card size to remain the same after you open it, then you would not want to toggle the size class, but simply add it.
$('.card-header').click(function(){
$(this).closest('.card').addClass('card-size');
})
http://jsfiddle.net/9musLxy4/74/