Filter div with jQuery - javascript

I'm looking to filter some div with an input field :
I want to show all divs at the beginning and when user types into the input field, filter by the <p class="name"></p>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<input type="text" class="filter" id="myInput" placeholder="Recherche rapide...">
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">John Doe</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">Samuel pelo</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>


This solution filter divs with names that contains value from input. Filtering is case-insensitive. Also, there is no setting any class, but if you need you can add this. Just change $card.show() to $card.addClass('visible') and change $card.hide() to $card.removeClass('visible').
$(document).ready(function() {
$('.filter').on('input', function() {
var $this = $(this);
var $cards = $('.card');
$filteredCards = $cards.each(function(i, card) {
var $card = $(card);
var name = $card.find('.name').first();
name = name.text().toLowerCase();
if(name.indexOf($this.val().toLowerCase()) !== -1) {
$card.show();
} else {
$card.hide();
}
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="filter" id="myInput" placeholder="Recherche rapide...">
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">John Doe</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">Samuel pelo</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>


Assuming you need to filter with startsWith.
Use a class hide to hide the elements.
Loop over each .body elements.
Find the elements using this selector [class="name"].
Compare the text using startsWith function.
Look at this code snippet.
//<p class="name">John Doe</p>
$('#myInput').on('input', function() {
var enteredValue = $(this).val();
$('.body').each(function() {
var $parent = $(this);
$(this).find('[class="name"]').each(function() {
if ($(this).text().startsWith(enteredValue)) {
$parent.removeClass('hide');
} else {
$parent.addClass('hide');
}
})
});
});
.hide {
display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="filter" id="myInput" placeholder="Recherche rapide...">
<div class="col-lg-6 col-md-6 col-sm-12" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">John Doe</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12" id="" style="visibility: visible; display: block;">
<div class="card all-patients" id="">
<div class="body">
<div class="row" id="">
<div class="col-md-4 col-sm-4 text-center m-b-0">
</div>
<div class="col-md-8 col-sm-8 m-b-0">
<p class="name">Samuel pelo</p>
<p> 12 ans</p>
<p> 04 94 94 94 94</p>
<button type="button" class="btn waves-effect waves-cyan">Fiche du patient</button>
</div>
</div>
</div>
</div>
</div>
See? the elements are being filtered.

Related

Get text content of all parent divs

I have dropdown list with some file names.
What I want to achieve is to find file name parents so when checkbox is checked I can get their respective values and build them into path of some sort. For example you are clicking
updates > second_folder_updates > CSD_update checkbox
on that CSD_update checbox click you can see updates/second_folder_updates/CSD_update being console logged, same goes for first update on click you will get updates/first_update in the console
my current solution it works in a way? but this returns a lot of duplicates and incorrect data
var elem = document.getElementById("AQW_update");
function getParents(elem) {
var parents = [];
while(elem.parentNode && elem.parentNode.nodeName.toLowerCase() != 'body') {
elem = elem.parentNode;
parents.push(elem.textContent);
}
return parents;
}
var abc = getParents(elem)
for(var i = 0; i < abc.length; ++i)
abc[i] = abc[i].replace(/(\r\n|\n|\r)/gm,"")
console.log(abc.toString())
$(document).ready(function () {
$('.clickFaq').click(function () {
$('.displayDir').toggle('1000');
$("i", this).toggleClass("icon-up-circled icon-down-circled");
var $data = $('.SWCheckBox:checked').val();
console.log($data)
});
$(".open").hide();
$('.dirTitle').click(function () {
$(this).next().slideToggle();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/css/bootstrap.min.css" crossorigin="anonymous">
<div class="container">
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
first_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
second_folder_updates
<i class=" .displayDir "></i>
</div>
<div class="faqQuestionsTextPreview open" style="display: none;">
<ul>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
AQW_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox" >
</div>
</div>
</div>
<div class="row no-gutters">
<div class="col-1">
<div class="fileListIcon iconFolder"></div>
</div>
<div class="col-9">
<div class="fileListText">
<div class="dirTitle">
CSD_update
<i class=" .displayDir "></i>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</ul>
</div>
</div>
</div>
<div class="col-2 d-flex justify-content-center">
<div class="fileListChx ">
<input type="checkbox">
</div>
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.3.1/dist/js/bootstrap.min.js"
crossorigin="anonymous"></script>

Multiple div shown on the add button click how to delete the same div through the delete button

var count = 2;
var countMax = 5;
function adddt() {
if (count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
I am using the above code to show multiple divs one by one by clicking on the 'add' button. Now I want to hide the same divs when I click on the delete or minus button. Requesting you please guide how can I solve this. I tried using the show hide method but it would not work for me. Thanks in advance.

you can do like this
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btn1" onclick="adddt()"><i class="fa fa-plus"></i></button> </div>
<div class="row" id="dt-1" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(1)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-2" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(2)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
<div class="row" id="dt-3" style="display: none;">
<div class="col-12" style="height: 40px;"></div>
<div class="col-md-12">
<div class="form-group">
<div class="col-12 col-sm-3">
<label for=""></label>
</div>
<div class="col-12 col-md-6 Option">
<textarea class="form-control" rows="3" placeholder="Max Chars 500" style="width: 700px !important;"></textarea>
</div>
<div class="col-sm-3" align="right">
<button class="add-plus-btn btnminus1" onclick="deletdt(3)"><i class="fa fa-minus"></i></button>
</div>
</div>
</div>
</div>
</body>
<script>
var count = 1;
var countMax = 3;
function adddt() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'block';
count++;
}
function deletdt(id)
{
document.getElementById('dt-' + id + '').style.display = 'none';
}
</script>
</html>

function delete() {
if(count > countMax)
return;
document.getElementById('dt-' + count + '').style.display = 'none';
count++;
}
if you change value to "display: none;" instead of "display: block;" it will work.

Auto Increment HTML class/ID to differentiate between divs

I am currently working on an application where the user gets a list a bunch of divs with details on them, there are also hidden details in each div that can be toggled by the user. The issue is that when you click on "details" for one box it toggles the class on all boxes rather than just within the one that was clicked. I was looking for an answer to this issue and have come up with trying to auto-increment the ID's/Class so that each box that is created will have a unique identifier. I need to make it so that the "extra-details" is only opened in relation to the card "details" is clicked on. Thank you in advance for any help.
My Code
$(".card-details").on("click", function (e) {
e.preventDefault();
$(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>

$(this).siblings('.extra-details').toggleClass('hidden') will achieve what you want.
Also note, your 'details' element is not actually a link, only styled like one, so you don't need the e.preventDefault() line.

Try:
$(".card-details").on("click", function (e) {
e.preventDefault();
$(this).siblings(".extra-details").toggleClass("hidden");
});

This works for me.
I just changed the javascript code as shown below.
$(".card-details").click(function() {
$(this).closest(".card").find(".extra-details").toggleClass("hidden");
});
h4 {
padding:10px 0 0 5px;
font-size:18px;
font-weight:bold;
}
.card {
border:none;
box-shadow:2px 2px 5px rgba(201,201,201, .5);
padding:5px;
margin:5px;
max-width:350px;
background:transparent;
border:1px solid #efefef;
font-size:12px;
}
hr {
border:1px solid #efefef;
width:100%;
margin-top:0;
}
.card-head {
color:#005ABB;
}
.card-container{
margin-top:20px;
margin-left:5px;
}
.card-info {
margin-left:20px;
background:transparent !important;
}
.card-details {
color:#005ABB;
margin-left:85%;
}
.card-details:hover {
text-decoration:underline;
color:#F9A51B;
cursor:pointer;
}
.hidden{
display:none !important;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container-fluid">
<div class="container">
<div class="row card-container">
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-4 col-lg-4 card">
<h4 class="card-head">20 Foot Titan Chassis</h4>
<hr>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Equipment Type
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Available Quantity
</div>
</div>
<div class="row">
<div class="col-xs-12 pull-left card-info">
Selected Quantity
</div>
</div>
<div class="col-xs-12 card-details">
Details
</div>
<div class="row extra-details hidden">
<div class="col-xs-12 card-info">
Address: Test Address
</div>
<div class="col-xs-12 card-info">
Hours of Operation: Weekdays 9AM - 5PM
</div>
</div>
</div>
</div>
</div>
</div>

Bootstrap Column filter using Javascript

I have a bootstrap columns as below (4 columns per row and many rows likewise), I need to filter the columns based on the label (General,Movie,Drama,etc...), something like this http://codepen.io/bmodena/pen/Fybdu . I need a javascript to do this. I can change the HTML code also as if required. I am kind of very beginner to JS.
Please help
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div><br>
<div class="panel-body">
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<br><p><b>Item1</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<br><p><b>item2</b>
<br><span class="label label-success">Movie</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<br><p><b>items3</b>
<br><span class="label label-success">Gereral</span>
</p>
</div>
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<br><p><b>items4</b>
<br><span class="label label-success">Drama</span>
</p>
</div>
</div><br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<br><p><b>items5</b>
<br><span class="label label-success">NEWS</span>
</p>
</div>
</div>
</div>
</div>

It should be simple using jQuery. Use selector to hide and show.
<div class="col-sm-8" style="padding-left:0px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h1 class="panel-title" style="font-size:20px;">Things</h1>
</div>
<br>
<div class="panel-body">
<div class="row">
<div class="col-xs-12">
<button class="btn btn-info" data-set="all">All</button>
<button class="btn btn-info" data-set="general">General</button>
<button class="btn btn-info" data-set="movie">Movie</button>
<button class="btn btn-info" data-set="news">News</button>
<button class="btn btn-info" data-set="drama">Drama</button>
</div>
</div>
<hr/>
<div class="row" style="padding:10px;">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item1.jpg" class="img-responsive" alt="Image">
<a href="/items1">
<br>
<p><b>Item1</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="movie">
<img src="/media/item2.jpg" class="img-responsive" alt="Image">
<a href="/items2">
<br>
<p><b>item2</b></a>
<br><span class="label label-success">Movie</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
<img src="/media/item3.jpg" class="img-responsive" alt="Image">
<a href="/items3">
<br>
<p><b>items3</b></a>
<br><span class="label label-success">Gereral</span>
</div>
<div class="col-xs-5 col-sm-3 col-md-3" data-group="drama">
<img src="/media/item4.jpg" class="img-responsive" alt="Image">
<a href="/items4">
<br>
<p><b>items4</b></a>
<br><span class="label label-success">Drama</span>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-5 col-sm-3 col-md-3" data-group="news">
<img src="/media/item5.jpg" class="img-responsive" alt="Image">
<a href="/items">
<br>
<p><b>items5</b></a>
<br><span class="label label-success">NEWS</span>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(e) {
$("[data-set]").click(function(e) {
if (this.dataset.set == "all") {
$("[data-group]").show();
return false;
}
var $currentLists = $("[data-group=" + this.dataset.set + "]");
$("[data-group]").not($currentLists).hide();
$currentLists.show();
});
});
</script>
jsfiddle link

Change the background color of nth child in every parent DIV

I have HTML as shown below. Using CSS, I want to change the background-color of nth child div of every div. If I click on the first More Info button I want to change the color of first child div of every div and so on.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
HTML :
<div class="row" id="empListTable">
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>

So first, you get the index of the clicked button using the index method, then you can use the nth-child selector to change the background color.
View the solution in full screen mode to see what is happening
var index = 1;
$(".button-container button").on('click', function(){
// this will tell you which index you clicked
$('.to-change div:nth-child('+index+')').css('background-color', 'white');
index = $(this).index('button') + 1;
$('.to-change div:nth-child('+index+')').css('background-color', 'red');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row" id="empListTable">
<div class="form-group to-change col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12 button-container" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>

Since you are using AngularJS, you can add ng-style and modify your ng-click to change the div that you want to change. To change the background of the numbers in the corresponding column of your bootstrap row when you click the more info button:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<div class="row" id="empListTable" ng-app="">
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-weight:bold">
Hired
</div>
<div class="col-xs-6 col-sm-3"style="padding-left: 25px;font-weight:bold">
Screened
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 15px;font-weight:bold">
Pre-Qualified
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-weight:bold">
Approved
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col0">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 25px;font-size:40px;font-weight:bold" ng-style="col1">
10
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col2">
6
</div>
<div class="col-xs-6 col-sm-3" style="padding-left: 35px;font-size:40px;font-weight:bold" ng-style="col3">
2
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:12px;color:#888;">
Total Number of <br /> Employees hired
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees screened <br /> via phone or web
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Via Screened <br />employees
</div>
<div class="col-sm-3" style="font-size:12px;color:#888">
Employees have <br />recieved tax credits
</div>
</div>
<div class="form-group col-md-12" style="padding-left: 35px;">
<div class="col-sm-3" style="font-size:8px">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col0={'background-color':'red'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col1={'background-color':'blue'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col2={'background-color':'green'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
<div class="col-sm-3">
<button type="submit" class="btn btn-primary btn-lg outline" ng-click="col3={'background-color':'yellow'}">More Info <i class="fa fa-arrow-down"></i></button>
</div>
</div>
Go to angular ng-style for more examples.

If you want to do the nth child and ensure that its only divs you use this selector:
div:nth-of-type(2) {
background-color: red;
}
div {
min-height: 200px;
}
div > div {
background-color: blue;
}
div > div:nth-of-type(2) {
background-color: red;
}
<div>
<div></div>
<div></div>
<div></div>
</div>
<div>
<div></div>
<div></div>
<div></div>
</div>

You can use CSS3 nth-child() selector.
.parent > div:nth-child(1)
{
background-color: blue;
}
For more reference, go here.
div
{
height: 50px;
background: gray;
}
.parent > div:nth-child(1)
{
background: blue;
}
<div class="parent">
<div>div 1</div>
<div>div 2</div>
<div>div 3</div>
<div>div 4</div>
</div>

Categories

Resources