I'm using Bootstrap and I get the JavaScript code for the filterable div elements from W3Schools. It's an easy mode to filter but it's a bit bored without animations.
Because of this, I'm trying to add some animations by CSS or js in my filter code and I don't know how to run it. I tried CSS and js animations but nothing, it's not working.
HTML
<div class="container-fluid">
<div id="myBtnContainer">
<ul>
<li class="list-inline-item"><button class="btn active" onclick="filterSelection('all')">All</button></li>
<li class="list-inline-item"><button class="btn" onclick="filterSelection('category1')">Category1</button></li>
<li class="list-inline-item"><button class="btn" onclick="filterSelection('category2')">Category2</button></li>
</ul>
</div>
<div class="row row-cols-1 row-cols-sm-2 row-cols-lg-3 g-3 pt-2 pb-5">
<div class="col fade-in-image filterDiv category1 show">
<a href="http://localhost:8888/test01/projects/project1/">
<div class="card">
<img width="480" height="320" src="http://localhost:8888/test01/wp-content/uploads/2021/06/img1.jpeg" class="img-fluid wp-post-image" alt="" loading="lazy">
<div class="hover-project">
<h3 class="titol-projecte">Project 1</h3>
<p class="location pb-4">Location 1</p>
<p class="category">Category 1</p>
</div>
</div>
</a>
</div>
<div class="col fade-in-image filterDiv category-2 show">
<a href="http://localhost:8888/test01/projects/project2/">
<div class="card">
<img width="480" height="320" src="http://localhost:8888/test01/wp-content/uploads/2021/06/img2.jpeg" class="img-fluid wp-post-image" alt="" loading="lazy">
<div class="hover-project">
<h3 class="titol-projecte">Project 2</h3>
<p class="location pb-4">Location 2</p>
<p class="category">Category 2</p>
</div>
</div>
</a>
</div>
</div>
</div>
The JavaScript I used:
filterSelection("all")
function filterSelection(c) {
var x, i;
x = document.getElementsByClassName("filterDiv");
if (c == "all") c = "";
// Add the "show" class (display:block) to the filtered elements, and remove the "show" class from the elements that are not selected
for (i = 0; i < x.length; i++) {
w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], "show");
}
}
// Show filtered elements
function w3AddClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
if (arr1.indexOf(arr2[i]) == -1) {
element.className += " " + arr2[i];
}
}
}
// Hide elements that are not selected
function w3RemoveClass(element, name) {
var i, arr1, arr2;
arr1 = element.className.split(" ");
arr2 = name.split(" ");
for (i = 0; i < arr2.length; i++) {
while (arr1.indexOf(arr2[i]) > -1) {
arr1.splice(arr1.indexOf(arr2[i]), 1);
}
}
element.className = arr1.join(" ");
}
// Add active class to the current control button (highlight it)
var btnContainer = document.getElementById("myBtnContainer");
var btns = btnContainer.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
The CSS i used
.filterDiv {
display: none; /* Hidden by default */
visibility: hidden;
opacity: 0;
}
/* The "show" class is added to the filtered elements */
.show {
display: block;
visibility: visible;
opacity: 1;
}
Thank you!!
Here is one ready example you can use for your code, its pretty amazing in my opinion
<div class="wrap">
<div class="container">
<div class="row">
<div class="twelve columns">
<h4>Filter Programs</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<div class="programs">
<button class="filter-btn" data-filter="all">All</button>
<button class="filter-btn" data-filter=".undergraduate">Undergraduate</button>
<button class="filter-btn" data-filter=".graduate">Graduate</button>
<button class="filter-btn" data-filter=".phd">PhD</button>
</div>
</div>
</div><!-- end of row -->
<div class="row">
<div class="columns twelve">
<h4>Sort Programs</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="columns twelve">
<div class="programs">
<button class="sort-btn" data-sort="default:asc">Default</button>
<button class="sort-btn" data-sort="random">Random</button>
<button class="sort-btn" data-sort="order:asc">Ascending</button>
<button class="sort-btn" data-sort="year:desc order:desc">Descending<span
class="multi">(Multi)</span></button>
</div>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<h4>Programs List</h4>
</div>
</div><!-- end of row -->
<div class="row">
<div class="twelve columns">
<ul class="courses" id="mix-wrapper">
<li class="mix-target undergraduate" data-order="5" data-year="4">Economics<span>(U)</span></li>
<li class="mix-target graduate" data-order="14" data-year="2">Pharmacology<span>(G)</span></li>
<li class="mix-target graduate" data-order="7" data-year="1">Informatics<span>(G)</span></li>
<li class="mix-target phd" data-order="4" data-year="3">Criminology<span>(P)</span>
</li>
<li class="mix-target undergraduate" data-order="16" data-year="3">Sociology<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="6" data-year="4">Greek<span>(U)</span></li>
<li class="mix-target phd" data-order="1" data-year="3">Astrophysics<span>(P)</span>
</li>
<li class="mix-target undergraduate" data-order="12" data-year="4">Nursing<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="10" data-year="5">Microbiology<span>(U)</span></li>
<li class="mix-target undergraduate" data-order="9" data-year="4">Mathematics<span>(U)</span></li>
<li class="mix-target graduate" data-order="11" data-year="3">Nanoscience<span>(G)</span></li>
<li class="mix-target phd" data-order="2" data-year="2">Biochemistry<span>(P)</span>
</li>
<li class="mix-target phd" data-order="13" data-year="3">Pathology<span>(P)</span>
</li>
<li class="mix-target graduate" data-order="8" data-year="1">Management<span>(G)</span></li>
<li class="mix-target graduate" data-order="3" data-year="2">Biostatistics<span>(G)</span></li>
<li class="mix-target phd" data-order="15" data-year="4"><a href="#">Public
Health<span>(P)</span></a></li>
</ul>
</div>
</div>
</div>
</div>
The CSS:
#import url(https://fonts.googleapis.com/css?family=Alegreya+Sans+SC);
body {
background: #ededed;
font-family: 'Alegreya Sans SC', sans-serif;
}
h4 {
font-size: 21px;
border-radius: 5px;
margin: 0 auto;
text-align: center;
background: #d2d2d2;
color: white;
font-weight: 700;
padding: 3px 0;
}
li {
margin: 0;
}
a {
font-size: 18px;
text-decoration: none;
}
span {
display: block;
font-size: .75em;
font-style: italic;
position: relative;
top: 5px;
}
.multi {
display: inline;
top: 0;
left: 3px;
}
img {
max-width: 100%;
}
.programs,
.courses {
margin: 8px 0 0 0;
}
.programs {
font-size: 0;
margin-bottom: 15px;
}
.programs button {
outline: none;
margin-bottom: 0;
background: whitesmoke;
width: 50%;
height: auto;
font-weight: normal;
border: 1px solid #ededed;
color: #000000;
font-size: 14px;
padding: 4px 0;
text-shadow: 0px 0px 0px #2f6627;
}
.programs button:hover {
background: #99cfe0;
}
.programs button.programs-filter-btn-active,
.programs button.programs-sort-btn-active {
box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.5) inset, 0px 0px 1px transparent;
background: #3a9fbf;
color: white;
}
.courses {
margin-bottom: 15px;
font-size: 0;
background: whitesmoke;
}
.courses li {
text-align: center;
font-size: 14px;
display: inline-block;
width: 46%;
margin: 0 2%;
}
.courses a {
display: block;
height: 60px;
margin: 15px 0;
padding-top: 12.5px;
background: whitesmoke;
color: black;
border: 1px solid white;
transition: all .4s ease;
}
.courses a:hover {
background: #99cfe0;
}
.p, .p a {
font-family: Arial, sans-serif;
font-size: 14px;
text-align: center;
}
/* MEDIA QUERIES STYLES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
#media only screen and (min-width: 750px) {
.container {
width: 95%;
}
.courses a {
background: #EBEBEB;
border: none;
}
h4 {
width: 50%;
margin-top: 12px;
}
img {
margin-bottom: 0;
}
.programs {
margin-bottom: 0;
}
.programs button {
width: 25%;
margin-bottom: 15px;
}
.courses li {
width: 21%;
}
}
The JS:
mixitup('#mix-wrapper', {
load: {
sort: 'order:asc'
},
animation: {
effects: 'fade rotateZ(-180deg)',
duration: 700
},
classNames: {
block: 'programs',
elementFilter: 'filter-btn',
elementSort: 'sort-btn'
},
selectors: {
target: '.mix-target'
}
});
I have dynamically updated list. Each list element has text input and delete button. I have 2 problems:
when I delete a list item, leninputs in cloneLi doesn't change
when I enter a text value in the first list item, it is copied also to the new one (i tried also elmtInput.reset(), but no change)
Do you have an idea what's wrong?
html code:
<ul id="sortable">
<li>
<div class="row">
<input type="text" id="item1" name="item1" value="">
<div>
<a class="btn" onclick="this.parentElement.parentElement.parentElement.style.display = 'none';"><i class="fas fa-trash"></i></a>
</div>
</div>
</li>
</ul>
<input type="submit" value="New item" class="btn" onclick="cloneLi()">
js:
function cloneLi() {
leninputs = document.getElementsByTagName("input").length;
if (leninputs < 5) {
var ul = document.getElementById("sortable");
var elmnt = ul.getElementsByTagName("li")[0];
var cln = elmnt.cloneNode(true);
document.getElementById("sortable").appendChild(cln);
var elmtInput = document.getElementsByTagName("input")[leninputs];
elmtInput.setAttribute("name", "item"+(leninputs+1).toString());
elmtInput.setAttribute("id", "item"+(leninputs+1).toString());
elmtInput.setAttribute("value", "");
} else {
alert('Max number of items reached!');
}
}
You need to exclude the button input from gettting selected with the other input elements, so be more precise in your selecting, and that will make your condition to have only five inputs as max instead of four correct because you were counting one plus input, you need to delete the li element instead of just hiding it and that keeps its input element as it is, you need to change the value of each new input cloned to avoid cloning the value as well
var listsContainer = document.querySelector("#sortable");
document.querySelector("#add_item").onclick = function() {
var inputLen = document.querySelectorAll("#sortable input").length, newList;
if(inputLen === 5) {
return alert('Max number of items reached!');
}
newList = document.createElement("li");
newList.innerHTML = `
<div class="row">
<input type="text" id="item${++inputLen}" name="item${inputLen}" value="">
<div>
<a class="btn" onclick="this.parentElement.parentElement.parentElement.remove();"><i class="fas fa-trash"></i></a>
</div>
</div>`;
listsContainer.appendChild(newList);
}
ul {
list-style-type: none;
margin: 0 0 10px 0;
padding: 0;
width: 300px;
}
.row {
background-color: lightgreen;
display: flex;
align-items: center;
border-radius: 10px;
padding: 10px;
margin-bottom: 5px;
}
.row div {
display: inline-block;
}
.row div i {
font-size: 20px;
color: white;
text-shadow: 0 0 5px green;
cursor: pointer;
}
.row input {
width: 85%;
margin-right: 10px;
border: none;
border-bottom: 1px solid #777;
}
#add_item {
display: none;
}
label {
background-color: #ccc;
color: white;
font: bold 24px monospace;
padding: 5px;
border-radius: 5px;
box-shadow: inset 1px 1px 3px #fff;
cursor: pointer;
}
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<ul id="sortable">
<li>
<div class="row">
<input type="text" id="item1" name="item1" value="">
<div>
<a class="btn" onclick="this.parentElement.parentElement.parentElement.remove();"><i class="fas fa-trash"></i></a>
<div>
</div>
</li>
</ul>
<label for="add_item"><input id="add_item" type="submit" class="btn">New item <i class='far fa-plus-square'></i></label>
I'm sorry for my English in advance, it's not my native language. I'm creating a tool for personal use. It's an Image Path Generator tool. It's used to generate a new path for the image filenames uploaded.
This tool needs 2 user inputs:
(1) Upload the image files (can be more than one)
(2) Input the new path of the images
When the images are uploaded and generated, the output will show inside the 2 text areas. One textarea shows the new path + filenames of the images while the second textarea shows the filenames only of the images.
I already created a search bar function and it works while the user types but the problem is, how can I bring back the original textarea values when the user doesn't type anything inside the search bar?
NOTE: I only created a search function in the New Path + Image Filename(s) textarea section.
Codes:
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function()
{
// THIS IS THE SEARCH BAR FUNCTION
$('#searchDir').keyup(function()
{
var val = $(this).val();
var lines1 = $('#outputText').val();
lines1 = lines1.split(/\n/);
var originalDirect = [];
for(var o=0; o < lines1.length; o++)
{
// var text0 = lines1[o];
originalDirect.push((lines1[o]));
console.log(originalDirect);
}
if(val != null)
{
// $(lines1).hide();
var searchDirect = [];
for (var a=0; a < lines1.length; a++)
{
var text = lines1[a];
if(text.indexOf(val) != -1)
{
// $(this).show();
searchDirect.push((lines1[a]));
}
}
$('#outputText').val(searchDirect.join('\n'));
// $(lines1).each(function()
// {
// var text = $(this).text().toLowerCase();
// if(text.indexOf(val) != -1)
// {
// $(this).show();
// }
// });
}
else if(val == null)
{
$('#outputText').val(originalDirect.join('\n'));
}
});
$('.output1').hover(function(){
$('.copy-btn1').addClass('copy-btn-show');
}, function(){
$('.copy-btn1').removeClass('copy-btn-show');
});
$('.output2').hover(function(){
$('.copy-btn2').addClass('copy-btn-show');
}, function(){
$('.copy-btn2').removeClass('copy-btn-show');
});
$('.copy-btn1').click(function()
{
$('.copy-btn1').attr('data-content', 'Copied to clipboard!')
$('.copy-btn1').popover('show');
var copyText = $('#outputText');
copyText.select();
document.execCommand("copy");
copyText.blur();
setTimeout(function(){ $('.copy-btn1').popover('hide') }, 1000);
});
$('.copy-btn2').click(function()
{
$('.copy-btn2').attr('data-content', 'Copied to clipboard!')
$('.copy-btn2').popover('show');
var copyText = $('#filenameText');
copyText.select();
document.execCommand("copy");
copyText.blur();
setTimeout(function(){ $('.copy-btn2').popover('hide') }, 1000);
});
});
function makeFileList() {
var input = document.getElementById("filesToUpload");
var addtext = $('#addText').val();
//var inputAffix = $('#inputAffix').val();
var ul = document.getElementById("fileList");
var outputData = [];
var fileNames = [];
var countSrc = 0;
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i++) {
// var p = document.createElement("p");
// p.innerHTML = addtext + input.files[i].name;
outputData.push((addtext + input.files[i].name));
fileNames.push((input.files[i].name));
countSrc++;
// ul.appendChild(p);
}
if(!ul.hasChildNodes()) {
// var p = document.createElement("p");
// p.innerHTML = 'No Files Selected';
// ul.appendChild(p);
}
$('#outputText').val(outputData.join('\n'));
$('#filenameText').val(fileNames.join('\n'));
$('.numbSrc').html(countSrc);
}
function countImages(changeBGColor)
{
var input = document.getElementById("filesToUpload");
var labelElem = document.getElementById("labelUpload");
var upCont = document.getElementById("uploadCont");
// $('#countImg').html(input.files.length + " Images");
if (input.files.length == 0)
{
$('#labelUpload').html(" No Image Uploaded!");
labelElem.style.background = "red";
upCont.style.boxShadow = "1px 1px 5px 1px red";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
else if (input.files.length == 1)
{
$('#labelUpload').html(input.files.length + " Image Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
else
{
$('#labelUpload').html(input.files.length + " Images Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
}
</script>
body
{
margin:0;
padding:0;
font-family: 'Montserrat', sans-serif;
color:#20629F!important;
background-color:rgba(204, 230, 255, 0.76) !important;
/* color:#20629F!important;*/
/* color:white!important;*/
/* background-color:rgb(204, 230, 255, 0.07) !important;*/
/* background: rgb(242,242,242);
background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(9,71,121,0.6587009803921569) 0%, rgba(102,231,235,0.7763480392156863) 100%);*/
}
h1, h2, h3, h4, h5, h6
{
font-weight: 600;
}
h4
{
/* color:#061420!important;*/
/* color:white!important;*/
color:#093e79 !important;
text-align: center;
}
/*SIDE NAV MENU*/
#mySidenav
{
position: fixed;
z-index:6 !important;
}
#howToContainer {
top: 2px;
/* background-color: #2675BF;*/
position: absolute;
left: -615px;
transition: 0.3s;
padding: 3px 15px 3px 15px;
width: 770px;
text-decoration: none;
color: white;
/* border-radius: 0 5px 5px 0;*/
}
#howToContainer:hover {
left: 0px;
/*background-color: #339CFF;*/
}
#howToContainer .howToTitle
{
position: absolute;
z-index:-1;
right:-0vh;
font-size: 16px;
/*background-color: #2675BF;*/
background-color: white;
border-radius: 0 10px 10px 0;
width:50%;
}
#howToContainer .howToTitle span
{
display: inline-block;
vertical-align: middle;
float:right;
color:#2675BF;
}
#howToContainer .howToTitle span img
{
width:40px;
height:40px;
margin-left:1em;
background-color:#2675BF;
border-radius:0px 10px 10px 0;
}
#howToContainer:hover .howToTitle{
background-color: #339CFF;
}
#howToContainer:hover .howToTitle span
{
color:white;
font-weight: bold;
}
#howToContainer .howToText
{
border: 1px solid rgba(51, 156, 255);
border-radius:10px;
background-color: white;
width:600px;
padding:1em 0.5em 0.5em 0.5em;
}
#howToContainer .howToText ol li
{
font-size: 14px;
color:#20629F!important;
}
#howToContainer:hover .howToText
{
color:#061420!important;
font-weight: 400;
border:1px solid white;
/* box-shadow: 0px 0px 10px 0px white;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*box-shadow: 0px 0px 6px 0px #2D89DF;*/
}
/*END OF SIDENAV MENU*/
.directoryInput
{
text-indent:8px;
font-size:14px !important;
/* color:#0C253C!important;*/
color:#20629F!important;
font-weight: 400;
height:100%;
}
.directoryInput::placeholder
{
font-style:italic;
}
/*.directoryInput::focus DOESNT WORK!!!
{
color:#061420!important;
font-weight: 400;
box-shadow: 0px 0px 0px 1px #2D89DF;
} */
.form-control:focus
{
/*border:2px solid rgb(38, 117, 191) !important;*/
/*box-shadow: none!important;*/
border:none!important;
box-shadow: 0px 0px 0px 1px #2D89DF !important;
}
.searchBar::placeholder
{
color:rgba(38, 117, 191, 0.65);
font-size:13px;
}
.fa-search
{
color:#2D89DF;
position: absolute;
float:right;
right:1em;
top:0.5em;
}
/*.form-control:focus .fa-search DOESNT WORK!!!
{
color:#093579 !important;
}*/
/*Copy Button*/
.copy-btn1, .copy-btn2
{
border:1px solid rgb(38, 117, 191);
padding:7px 30px;
margin-right:6px;
border-radius:7px 7px 0px 0px;
border-bottom:none;
transform: translate3d(0, 28px, -1px);
color:#2D89DF !important;
transition:all .3s;
z-index: -1;
}
.copy-btn-show{
transform: translate3d(0, 0px, -1px);
/* box-shadow: 0px 0px 5px 0px #20629F;*/
border:1px solid #2D89DF;
border-bottom:none;
/*background-color:#2D89DF;*/
color:#2D89DF !important;
z-index: -1;
cursor:pointer;
user-select: none;
font-weight:800;
}
.copy-btn-show:hover
{
background-color:#2D89DF;
color:white !important;
}
/*END OF Copy Button*/
#genButton
{
/*border: 1px solid rgb(19, 59, 96);*/
/* background-color:white;*/
background-color:#2D89DF;
padding:0.5em 1em 0.5em 1em;
text-align: center;
/*color:rgb(19, 59, 96);*/
color:white!important;
font-weight: bold;
font-size:15px;
}
#genButton:hover
{
/* border: 1px solid rgb(19, 59, 96);*/
background-color:rgb(19, 59, 96);
color:white!important;
}
.inputTA
{
display:inline-block;
margin:3px 20px 0 20px;
}
.inputTA2
{
display:inline-block;
margin:3px 20px 0 20px;
}
.outputTAstyle, .outputTAstyle2{
border: 1px solid rgba(51, 156, 255);
border-radius:5px;
width:800px;
height:500px;
font-size:13px !important;
color:#0C253C!important;
margin:0 0;
outline:none;
padding:15px 15px;
z-index: 99999;
transform: translateZ(3px);
transition: all .3s;
}
.outputTAstyle:focus , .outputTAstyle2:focus{
/*box-shadow: 0px 0px 2px 0px #ffffff;
border-color:white;*/
cursor:default!important;
/*color:#061420!important;*/
/*border:1px solid white;*/
color:#061420!important;
font-weight: 400;
/*border-color: #2D89DF;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*font-weight: 500;*/
/*border-color: #2D89DF;*/
/*box-shadow: 0px 0px 10px 0px white;*/
}
/* .outputTAstyle2[readonly]
{
background-color:rgb(229, 243, 255) !important;
}*/
::placeholder{
color:rgba(38, 117, 191, 0.65);
font-size:15px;
}
::-webkit-scrollbar {
display: none;
}
/*
.footer
{
color:#0D2740 !important;
font-weight: 600;
}*/
<!-- Programmed by Christine Jane Kudera ¯\_( ͡❛ ͜ʖ͡❛ )_/¯ -->
<html>
<head>
<title>Image Path Generator</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <!-- for the material icons -->
</head>
<body>
<!-- HOW TO USE CONTAINER -->
<div id="mySidenav" class="sidenav">
<a href="#" class="containerStyle" id="howToContainer" title="How to Use" alt="How to Use">
<div class="howToTitle">
<span>How to Use<img src="https://media1.giphy.com/media/TIA4R33jmGPPis5KPv/giphy.gif"><!-- <img src="https://media3.giphy.com/media/9Daw0eNNSE0e9WM2lI/source.gif" style="width:40px;height:40px;"> -->
</span>
</div>
<div class="howToText">
<ol>
<li> <b>Upload/Choose the images</b> you wanted to generate a new image path. <i>(Can be more than 1)</i></li>
<li> Input the new path inside the <b>Path Input Form</b>.</li>
<li> Click the <b>Generate button</b>.</li>
<li> The Left Textarea contains the <b>filenames of the images with the path</b> while the Right Textarea contains the <b>filenames only</b>.</li>
<li> Copy the new image sources from the Left Textarea.</li>
</ol>
</div>
</a>
</div>
<center>
<h4 style="margin-top:1vh;">Image Path Generator</h4>
<!-- UPLOAD FILES INPUT -->
<div class="row" style="width:50%;">
<!-- <small style="margin-top:0;padding-top:0;float:right;">No. of Images Uploaded: <span id="countImg" style="font-weight: 600;"></span> </small> -->
<div class="input-group mb-3" id="uploadCont" style="z-index:1 !important;margin-top:0 !important;padding-top:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Upload</strong></span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="filesToUpload" id="filesToUpload" onchange="countImages('#2D89DF')" multiple="">
<label class="custom-file-label" id="labelUpload" for="filesToUpload" style="text-align:left;font-size:16px;font-weight: 500;color:#20629F!important;padding-left:20px;">Choose Images...</label>
</div>
</div>
</div> <!-- end of row -->
<!-- DIRECTORY INPUT FORM -->
<div class="row" style="width:50%;">
<!-- h5><strong>DIRECTORY:</strong></h5> -->
<div class="input-group" style="margin-bottom:0 !important;padding-bottom:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Path</strong></span>
</div>
<input type="text" class="form-control directoryInput" aria-label="directory" name="addText" id="addText" value="images/newImg/2020/08/"/>
<div class="input-group-append">
<button class="btn" id="genButton" onclick="makeFileList()">Generate</button>
</div>
</div>
<small style="margin-top:0;padding-top:0;"><strong> | e.g. |</strong> images/newImg/2020/08/</small>
</div> <!-- end of row -->
<ul id="fileList"></ul>
<div class="inputTA output1">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">New Path + Image Filename<small><b>(s)</b></small>:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> images/newImg/2020/08/image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong> <span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" id="searchDir" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class ="copy-holder">
<span class = "float-right copy-btn1" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="outputText" class="outputTAstyle" placeholder="New Path + Image Filename(s) here..." readonly></textarea>
</div>
<div class="inputTA2 output2">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">Image Filename<small><b>(s)</b></small> only:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong> <span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class ="copy-holder">
<span class = "float-right copy-btn2" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="filenameText" class="outputTAstyle2" placeholder="Image Filename(s) only here..." readonly></textarea>
</div>
</center>
</body>
</html>
One way to solve this is by declaring variable globally so that it can use in entire code .In below code i have declare two variable globally i.e : original_datas & original_filenames to store values of file path and file name .
Whenever user upload file we can assign value outputData which has entire list of file to these global variable and if the value is null of input-box we can use these global variable to assign value of textarea. Same you can do for other input-box for searching filename.
Demo Code :
$('#searchDir').keyup(function() {
var lines1;
var val = $(this).val();
lines1 = $('#outputText').val();
lines1 = lines1.split(/\n/);
var originalDirect = [];
//check if value is not null
if ((val != null) && (val != '')) {
for (var o = 0; o < lines1.length; o++) {
originalDirect.push((lines1[o]));
}
var searchDirect = [];
for (var a = 0; a < lines1.length; a++) {
var text = lines1[a];
if (text.indexOf(val) != -1) {
// $(this).show();
searchDirect.push((lines1[a]));
}
}
$('#outputText').val(searchDirect.join('\n'));
} else if (val == '') {
console.log("value is null")
$('#outputText').val(original_datas);//add value to textarea
}
});
//declare this globally
var original_datas; //for path+image search
var original_filenames;//for file search
function makeFileList() {
var input = document.getElementById("filesToUpload");
var addtext = $('#addText').val();
//var inputAffix = $('#inputAffix').val();
var ul = document.getElementById("fileList");
var outputData = [];
var fileNames = [];
var countSrc = 0;
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i++) {
outputData.push((addtext + input.files[i].name));
fileNames.push((input.files[i].name));
countSrc++;
}
if (!ul.hasChildNodes()) {
}
//assign values to use later
original_datas = outputData.join('\n');
original_filenames = fileNames.join('\n');
$('#outputText').val(outputData.join('\n'));
$('#filenameText').val(fileNames.join('\n'));
$('.numbSrc').html(countSrc);
}
function countImages(changeBGColor) {
var input = document.getElementById("filesToUpload");
var labelElem = document.getElementById("labelUpload");
var upCont = document.getElementById("uploadCont");
if (input.files.length == 0) {
$('#labelUpload').html(" No Image Uploaded!");
labelElem.style.background = "red";
upCont.style.boxShadow = "1px 1px 5px 1px red";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
} else if (input.files.length == 1) {
$('#labelUpload').html(input.files.length + " Image Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
} else {
$('#labelUpload').html(input.files.length + " Images Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
}
body {
margin: 0;
padding: 0;
font-family: 'Montserrat', sans-serif;
color: #20629F!important;
background-color: rgba(204, 230, 255, 0.76) !important;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 600;
}
h4 {
/* color:#061420!important;*/
/* color:white!important;*/
color: #093e79 !important;
text-align: center;
}
/*SIDE NAV MENU*/
#mySidenav {
position: fixed;
z-index: 6 !important;
}
#howToContainer {
top: 2px;
/* background-color: #2675BF;*/
position: absolute;
left: -615px;
transition: 0.3s;
padding: 3px 15px 3px 15px;
width: 770px;
text-decoration: none;
color: white;
/* border-radius: 0 5px 5px 0;*/
}
#howToContainer:hover {
left: 0px;
/*background-color: #339CFF;*/
}
#howToContainer .howToTitle {
position: absolute;
z-index: -1;
right: -0vh;
font-size: 16px;
/*background-color: #2675BF;*/
background-color: white;
border-radius: 0 10px 10px 0;
width: 50%;
}
#howToContainer .howToTitle span {
display: inline-block;
vertical-align: middle;
float: right;
color: #2675BF;
}
#howToContainer .howToTitle span img {
width: 40px;
height: 40px;
margin-left: 1em;
background-color: #2675BF;
border-radius: 0px 10px 10px 0;
}
#howToContainer:hover .howToTitle {
background-color: #339CFF;
}
#howToContainer:hover .howToTitle span {
color: white;
font-weight: bold;
}
#howToContainer .howToText {
border: 1px solid rgba(51, 156, 255);
border-radius: 10px;
background-color: white;
width: 600px;
padding: 1em 0.5em 0.5em 0.5em;
}
#howToContainer .howToText ol li {
font-size: 14px;
color: #20629F!important;
}
#howToContainer:hover .howToText {
color: #061420!important;
font-weight: 400;
border: 1px solid white;
/* box-shadow: 0px 0px 10px 0px white;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*box-shadow: 0px 0px 6px 0px #2D89DF;*/
}
/*END OF SIDENAV MENU*/
.directoryInput {
text-indent: 8px;
font-size: 14px !important;
/* color:#0C253C!important;*/
color: #20629F!important;
font-weight: 400;
height: 100%;
}
.directoryInput::placeholder {
font-style: italic;
}
/*.directoryInput::focus DOESNT WORK!!!
{
color:#061420!important;
font-weight: 400;
box-shadow: 0px 0px 0px 1px #2D89DF;
} */
.form-control:focus {
/*border:2px solid rgb(38, 117, 191) !important;*/
/*box-shadow: none!important;*/
border: none!important;
box-shadow: 0px 0px 0px 1px #2D89DF !important;
}
.searchBar::placeholder {
color: rgba(38, 117, 191, 0.65);
font-size: 13px;
}
.fa-search {
color: #2D89DF;
position: absolute;
float: right;
right: 1em;
top: 0.5em;
}
/*.form-control:focus .fa-search DOESNT WORK!!!
{
color:#093579 !important;
}*/
/*Copy Button*/
.copy-btn1,
.copy-btn2 {
border: 1px solid rgb(38, 117, 191);
padding: 7px 30px;
margin-right: 6px;
border-radius: 7px 7px 0px 0px;
border-bottom: none;
transform: translate3d(0, 28px, -1px);
color: #2D89DF !important;
transition: all .3s;
z-index: -1;
}
.copy-btn-show {
transform: translate3d(0, 0px, -1px);
/* box-shadow: 0px 0px 5px 0px #20629F;*/
border: 1px solid #2D89DF;
border-bottom: none;
/*background-color:#2D89DF;*/
color: #2D89DF !important;
z-index: -1;
cursor: pointer;
user-select: none;
font-weight: 800;
}
.copy-btn-show:hover {
background-color: #2D89DF;
color: white !important;
}
/*END OF Copy Button*/
#genButton {
/*border: 1px solid rgb(19, 59, 96);*/
/* background-color:white;*/
background-color: #2D89DF;
padding: 0.5em 1em 0.5em 1em;
text-align: center;
/*color:rgb(19, 59, 96);*/
color: white!important;
font-weight: bold;
font-size: 15px;
}
#genButton:hover {
/* border: 1px solid rgb(19, 59, 96);*/
background-color: rgb(19, 59, 96);
color: white!important;
}
.inputTA {
display: inline-block;
margin: 3px 20px 0 20px;
}
.inputTA2 {
display: inline-block;
margin: 3px 20px 0 20px;
}
.outputTAstyle,
.outputTAstyle2 {
border: 1px solid rgba(51, 156, 255);
border-radius: 5px;
width: 800px;
height: 500px;
font-size: 13px !important;
color: #0C253C!important;
margin: 0 0;
outline: none;
padding: 15px 15px;
z-index: 99999;
transform: translateZ(3px);
transition: all .3s;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<body>
<!-- HOW TO USE CONTAINER -->
<div id="mySidenav" class="sidenav">
<a href="#" class="containerStyle" id="howToContainer" title="How to Use" alt="How to Use">
<div class="howToTitle">
<span>How to Use<img src="https://media1.giphy.com/media/TIA4R33jmGPPis5KPv/giphy.gif"><!-- <img src="https://media3.giphy.com/media/9Daw0eNNSE0e9WM2lI/source.gif" style="width:40px;height:40px;"> -->
</span>
</div>
<div class="howToText">
<ol>
<li> <b>Upload/Choose the images</b> you wanted to generate a new image path. <i>(Can be more than 1)</i></li>
<li> Input the new path inside the <b>Path Input Form</b>.</li>
<li> Click the <b>Generate button</b>.</li>
<li> The Left Textarea contains the <b>filenames of the images with the path</b> while the Right Textarea contains the <b>filenames only</b>.</li>
<li> Copy the new image sources from the Left Textarea.</li>
</ol>
</div>
</a>
</div>
<center>
<h4 style="margin-top:1vh;">Image Path Generator</h4>
<!-- UPLOAD FILES INPUT -->
<div class="row" style="width:50%;">
<!-- <small style="margin-top:0;padding-top:0;float:right;">No. of Images Uploaded: <span id="countImg" style="font-weight: 600;"></span> </small> -->
<div class="input-group mb-3" id="uploadCont" style="z-index:1 !important;margin-top:0 !important;padding-top:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Upload</strong></span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="filesToUpload" id="filesToUpload" onchange="countImages('#2D89DF')" multiple="">
<label class="custom-file-label" id="labelUpload" for="filesToUpload" style="text-align:left;font-size:16px;font-weight: 500;color:#20629F!important;padding-left:20px;">Choose Images...</label>
</div>
</div>
</div>
<!-- end of row -->
<!-- DIRECTORY INPUT FORM -->
<div class="row" style="width:50%;">
<!-- h5><strong>DIRECTORY:</strong></h5> -->
<div class="input-group" style="margin-bottom:0 !important;padding-bottom:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Path</strong></span>
</div>
<input type="text" class="form-control directoryInput" aria-label="directory" name="addText" id="addText" value="images/newImg/2020/08/" />
<div class="input-group-append">
<button class="btn" id="genButton" onclick="makeFileList()">Generate</button>
</div>
</div>
<small style="margin-top:0;padding-top:0;"><strong> | e.g. |</strong> images/newImg/2020/08/</small>
</div>
<!-- end of row -->
<ul id="fileList"></ul>
<div class="inputTA output1">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">New Path + Image Filename<small><b>(s)</b></small>:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> images/newImg/2020/08/image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong> <span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" id="searchDir" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class="copy-holder">
<span class="float-right copy-btn1" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="outputText" class="outputTAstyle" placeholder="New Path + Image Filename(s) here..." readonly></textarea>
<!--<div class="outputTAstyle" id="outputText" contenteditable="true" spellcheck="false" autocomplete="off" placeholder="New Path + Image Filename(s) here..." readonly></div>-->
</div>
<div class="inputTA2 output2">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">Image Filename<small><b>(s)</b></small> only:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong> <span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class="copy-holder">
<span class="float-right copy-btn2" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="filenameText" class="outputTAstyle2" placeholder="Image Filename(s) only here..." readonly></textarea>
</div>
</center>
My answer is you need to store the original names to compare old versus new names. It looks like your functionality is on the right path but implement somewhere before you store the filename to also store to another area of the old name. Make sense?
I finally know how to implement it after many tries but I think I made it more complicated than it has to be.
Like the previous answers given, I tried to store the original values of the 2 textareas in 2 arrays and declaring it globally so that I can call it again everytime the user does not type in the search bar.
This works everytime the user clicks on the Generate button. The original values will be stored in arrays everytime it's clicked. I also made sure to declare the arrays to 0(zero) every time the Generate button is clicked so that the previous values will be gone and new values will be stored instead.
I also added the same functions to the 2nd textare, the Filenames only section.
<script
src="https://code.jquery.com/jquery-3.4.0.min.js"
integrity="sha256-BJeo0qm959uMBGb65z40ejJYGSgR7REI4+CW1fNKwOg="
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script type="text/javascript">
$(document).ready(function()
{
//Store the Original Values of the 2 Text Areas
var originalDirect = [];
var originalFile = [];
var origNum1 = 0;
var origNum2 = 0;
//Save the Original Values of the 2 Text Areas everytime the Generate Button is clicked
$('#genButton').click(function()
{
originalDirect.length = 0;
originalFile.length = 0;
origNum1 = 0;
origNum2 = 0;
var lines0 = $('#outputText').val();
var lines0b = $('#filenameText').val();
lines0 = lines0.split(/\n/);
lines0b = lines0b.split(/\n/);
for(var o=0; o < lines0.length; o++)
{
originalDirect.push((lines0[o]));
origNum1++;
}
for(var p=0; p < lines0b.length; p++)
{
originalFile.push((lines0b[p]));
origNum2++;
}
});
//SEARCH BAR FUNCTION in PATH + FILENAME TEXTAREA
$('#searchDir').keyup(function()
{
var val = $(this).val();
var lines1 = $('#outputText').val();
lines1 = lines1.split(/\n/);
var countDir = 0;
if(val != '')
{
var searchDirect = [];
for (var a=0; a < lines1.length; a++)
{
var text = lines1[a];
if(text.indexOf(val) != -1)
{
searchDirect.push((lines1[a]));
countDir++;
}
}
$('#outputText').val(searchDirect.join('\n'));
$('.numbSrc1').html(countDir);
}
else
{
$('#outputText').val(originalDirect.join('\n'));
$('.numbSrc1').html(origNum1);
}
});
//SEARCH BAR FUNCTION in FILENAME ONLY TEXTAREA
$('#searchFil').keyup(function()
{
var val2 = $(this).val();
var lines1b = $('#filenameText').val();
lines1b = lines1b.split(/\n/);
var countDir2 = 0;
if(val2 != '')
{
var searchDirect2 = [];
for (var a=0; a < lines1b.length; a++)
{
var text2 = lines1b[a];
if(text2.indexOf(val2) != -1)
{
searchDirect2.push((lines1b[a]));
countDir2++;
}
}
$('#filenameText').val(searchDirect2.join('\n'));
$('.numbSrc2').html(countDir2);
}
else
{
$('#filenameText').val(originalFile.join('\n'));
$('.numbSrc2').html(origNum2);
}
});
$('.output1').hover(function(){
$('.copy-btn1').addClass('copy-btn-show');
}, function(){
$('.copy-btn1').removeClass('copy-btn-show');
});
$('.output2').hover(function(){
$('.copy-btn2').addClass('copy-btn-show');
}, function(){
$('.copy-btn2').removeClass('copy-btn-show');
});
$('.copy-btn1').click(function()
{
$('.copy-btn1').attr('data-content', 'Copied to clipboard!')
$('.copy-btn1').popover('show');
var copyText = $('#outputText');
copyText.select();
document.execCommand("copy");
copyText.blur();
setTimeout(function(){ $('.copy-btn1').popover('hide') }, 1000);
});
$('.copy-btn2').click(function()
{
$('.copy-btn2').attr('data-content', 'Copied to clipboard!')
$('.copy-btn2').popover('show');
var copyText = $('#filenameText');
copyText.select();
document.execCommand("copy");
copyText.blur();
setTimeout(function(){ $('.copy-btn2').popover('hide') }, 1000);
});
});
function makeFileList() {
var input = document.getElementById("filesToUpload");
var addtext = $('#addText').val();
//var inputAffix = $('#inputAffix').val();
var ul = document.getElementById("fileList");
var outputData = [];
var fileNames = [];
var countSrc = 0;
while (ul.hasChildNodes()) {
ul.removeChild(ul.firstChild);
}
for (var i = 0; i < input.files.length; i++) {
// var p = document.createElement("p");
// p.innerHTML = addtext + input.files[i].name;
outputData.push((addtext + input.files[i].name));
fileNames.push((input.files[i].name));
countSrc++;
// ul.appendChild(p);
}
if(!ul.hasChildNodes()) {
// var p = document.createElement("p");
// p.innerHTML = 'No Files Selected';
// ul.appendChild(p);
}
$('#outputText').val(outputData.join('\n'));
$('#filenameText').val(fileNames.join('\n'));
$('.numbSrc1').html(countSrc);
$('.numbSrc2').html(countSrc);
}
function countImages(changeBGColor)
{
var input = document.getElementById("filesToUpload");
var labelElem = document.getElementById("labelUpload");
var upCont = document.getElementById("uploadCont");
// $('#countImg').html(input.files.length + " Images");
if (input.files.length == 0)
{
$('#labelUpload').html(" No Image Uploaded!");
labelElem.style.background = "red";
upCont.style.boxShadow = "1px 1px 5px 1px red";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
else if (input.files.length == 1)
{
$('#labelUpload').html(input.files.length + " Image Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
else
{
$('#labelUpload').html(input.files.length + " Images Uploaded!");
labelElem.style.background = changeBGColor;
upCont.style.boxShadow = "1px 1px 5px 1px #097579";
upCont.style.border = "none";
upCont.style.borderRadius = "8px";
labelElem.style.color = 'white';
labelElem.border = "none";
labelElem.style.fontWeight = '700';
}
}
</script>
body
{
margin:0;
padding:0;
font-family: 'Montserrat', sans-serif;
color:#20629F!important;
background-color:rgba(204, 230, 255, 0.76) !important;
/* color:#20629F!important;*/
/* color:white!important;*/
/* background-color:rgb(204, 230, 255, 0.07) !important;*/
/* background: rgb(242,242,242);
background: linear-gradient(90deg, rgba(242,242,242,1) 0%, rgba(9,71,121,0.6587009803921569) 0%, rgba(102,231,235,0.7763480392156863) 100%);*/
}
h1, h2, h3, h4, h5, h6
{
font-weight: 600;
}
h4
{
/* color:#061420!important;*/
/* color:white!important;*/
color:#093e79 !important;
text-align: center;
}
/*SIDE NAV MENU*/
#mySidenav
{
position: fixed;
z-index:6 !important;
}
#howToContainer {
top: 2px;
/* background-color: #2675BF;*/
position: absolute;
left: -615px;
transition: 0.3s;
padding: 3px 15px 3px 15px;
width: 770px;
text-decoration: none;
color: white;
/* border-radius: 0 5px 5px 0;*/
}
#howToContainer:hover {
left: 0px;
/*background-color: #339CFF;*/
}
#howToContainer .howToTitle
{
position: absolute;
z-index:-1;
right:-0vh;
font-size: 16px;
/*background-color: #2675BF;*/
background-color: white;
border-radius: 0 10px 10px 0;
width:50%;
}
#howToContainer .howToTitle span
{
display: inline-block;
vertical-align: middle;
float:right;
color:#2675BF;
}
#howToContainer .howToTitle span img
{
width:40px;
height:40px;
margin-left:1em;
background-color:#2675BF;
border-radius:0px 10px 10px 0;
}
#howToContainer:hover .howToTitle{
background-color: #339CFF;
}
#howToContainer:hover .howToTitle span
{
color:white;
font-weight: bold;
}
#howToContainer .howToText
{
border: 1px solid rgba(51, 156, 255);
border-radius:10px;
background-color: white;
width:600px;
padding:1em 0.5em 0.5em 0.5em;
}
#howToContainer .howToText ol li
{
font-size: 14px;
color:#20629F!important;
}
#howToContainer:hover .howToText
{
color:#061420!important;
font-weight: 400;
border:1px solid white;
/* box-shadow: 0px 0px 10px 0px white;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*box-shadow: 0px 0px 6px 0px #2D89DF;*/
}
/*END OF SIDENAV MENU*/
.directoryInput
{
text-indent:8px;
font-size:14px !important;
/* color:#0C253C!important;*/
color:#20629F!important;
font-weight: 400;
height:100%;
}
.directoryInput::placeholder
{
font-style:italic;
}
/*.directoryInput::focus DOESNT WORK!!!
{
color:#061420!important;
font-weight: 400;
box-shadow: 0px 0px 0px 1px #2D89DF;
} */
.form-control:focus
{
/*border:2px solid rgb(38, 117, 191) !important;*/
/*box-shadow: none!important;*/
border:none!important;
box-shadow: 0px 0px 0px 1px #2D89DF !important;
}
.searchBar::placeholder
{
color:rgba(38, 117, 191, 0.65);
font-size:13px;
}
.fa-search
{
color:#2D89DF;
position: absolute;
float:right;
right:1em;
top:0.5em;
}
/*.form-control:focus .fa-search DOESNT WORK!!!
{
color:#093579 !important;
}*/
/*Copy Button*/
.copy-btn1, .copy-btn2
{
border:1px solid rgb(38, 117, 191);
padding:7px 30px;
margin-right:6px;
border-radius:7px 7px 0px 0px;
border-bottom:none;
transform: translate3d(0, 28px, -1px);
color:#2D89DF !important;
transition:all .3s;
z-index: -1;
}
.copy-btn-show{
transform: translate3d(0, 0px, -1px);
/* box-shadow: 0px 0px 5px 0px #20629F;*/
border:1px solid #2D89DF;
border-bottom:none;
/*background-color:#2D89DF;*/
color:#2D89DF !important;
z-index: -1;
cursor:pointer;
user-select: none;
font-weight:800;
}
.copy-btn-show:hover
{
background-color:#2D89DF;
color:white !important;
}
/*END OF Copy Button*/
#genButton
{
/*border: 1px solid rgb(19, 59, 96);*/
/* background-color:white;*/
background-color:#2D89DF;
padding:0.5em 1em 0.5em 1em;
text-align: center;
/*color:rgb(19, 59, 96);*/
color:white!important;
font-weight: bold;
font-size:15px;
}
#genButton:hover
{
/* border: 1px solid rgb(19, 59, 96);*/
background-color:rgb(19, 59, 96);
color:white!important;
}
.inputTA
{
display:inline-block;
margin:3px 20px 0 20px;
}
.inputTA2
{
display:inline-block;
margin:3px 20px 0 20px;
}
.outputTAstyle, .outputTAstyle2{
border: 1px solid rgba(51, 156, 255);
border-radius:5px;
width:800px;
height:500px;
font-size:13px !important;
color:#0C253C!important;
margin:0 0;
outline:none;
padding:15px 15px;
z-index: 99999;
transform: translateZ(3px);
transition: all .3s;
}
.outputTAstyle:focus , .outputTAstyle2:focus{
/*box-shadow: 0px 0px 2px 0px #ffffff;
border-color:white;*/
cursor:default!important;
/*color:#061420!important;*/
/*border:1px solid white;*/
color:#061420!important;
font-weight: 400;
/*border-color: #2D89DF;*/
box-shadow: 0px 0px 0px 1px #2D89DF;
/*font-weight: 500;*/
/*border-color: #2D89DF;*/
/*box-shadow: 0px 0px 10px 0px white;*/
}
/* .outputTAstyle2[readonly]
{
background-color:rgb(229, 243, 255) !important;
}*/
::placeholder{
color:rgba(38, 117, 191, 0.65);
font-size:15px;
}
::-webkit-scrollbar {
display: none;
}
/*
.footer
{
color:#0D2740 !important;
font-weight: 600;
}*/
<!-- Programmed by Christine Jane Kudera ¯\_( ͡❛ ͜ʖ͡❛ )_/¯ -->
<html>
<head>
<title>Image Path Generator</title>
<!-- CSS only -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<!-- JS, Popper.js, and jQuery -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css"> <!-- for the material icons -->
</head>
<body>
<!-- HOW TO USE CONTAINER -->
<div id="mySidenav" class="sidenav">
<a href="#" class="containerStyle" id="howToContainer" title="How to Use" alt="How to Use">
<div class="howToTitle">
<span>How to Use<img src="https://media1.giphy.com/media/TIA4R33jmGPPis5KPv/giphy.gif"><!-- <img src="https://media3.giphy.com/media/9Daw0eNNSE0e9WM2lI/source.gif" style="width:40px;height:40px;"> -->
</span>
</div>
<div class="howToText">
<ol>
<li> <b>Upload/Choose the images</b> you wanted to generate a new image path. <i>(Can be more than 1)</i></li>
<li> Input the new path inside the <b>Path Input Form</b>.</li>
<li> Click the <b>Generate button</b>.</li>
<li> The Left Textarea contains the <b>filenames of the images with the path</b> while the Right Textarea contains the <b>filenames only</b>.</li>
<li> Copy the new image sources from the Left Textarea.</li>
</ol>
</div>
</a>
</div>
<center>
<h4 style="margin-top:1vh;">Image Path Generator</h4>
<!-- UPLOAD FILES INPUT -->
<div class="row" style="width:50%;">
<!-- <small style="margin-top:0;padding-top:0;float:right;">No. of Images Uploaded: <span id="countImg" style="font-weight: 600;"></span> </small> -->
<div class="input-group mb-3" id="uploadCont" style="z-index:1 !important;margin-top:0 !important;padding-top:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Upload</strong></span>
</div>
<div class="custom-file">
<input type="file" class="custom-file-input" name="filesToUpload" id="filesToUpload" onchange="countImages('#2D89DF')" multiple="">
<label class="custom-file-label" id="labelUpload" for="filesToUpload" style="text-align:left;font-size:16px;font-weight: 500;color:#20629F!important;padding-left:20px;">Choose Images...</label>
</div>
</div>
</div> <!-- end of row -->
<!-- DIRECTORY INPUT FORM -->
<div class="row" style="width:50%;">
<!-- h5><strong>DIRECTORY:</strong></h5> -->
<div class="input-group" style="margin-bottom:0 !important;padding-bottom:0 !important;">
<div class="input-group-prepend">
<span class="input-group-text" style="font-size:14px;padding:0 1.5em;"><strong>Path</strong></span>
</div>
<input type="text" class="form-control directoryInput" aria-label="directory" name="addText" id="addText" value="images/newImg/2020/08/"/>
<div class="input-group-append">
<button class="btn" id="genButton" onclick="makeFileList()">Generate</button>
</div>
</div>
<small style="margin-top:0;padding-top:0;"><strong> | e.g. |</strong> images/newImg/2020/08/</small>
</div> <!-- end of row -->
<ul id="fileList"></ul>
<div class="inputTA output1">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">New Path + Image Filename<small><b>(s)</b></small>:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> images/newImg/2020/08/image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong> <span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc1">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" id="searchDir" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class ="copy-holder">
<span class = "float-right copy-btn1" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="outputText" class="outputTAstyle" placeholder="New Path + Image Filename(s) here..." readonly></textarea>
</div>
<div class="inputTA2 output2">
<p><strong style="color:#093579;margin-bottom:0;padding-bottom:0;line-height: 0;">Image Filename<small><b>(s)</b></small> only:</strong></p>
<p><small style="margin-top:0;padding-top:0;line-height: 0;margin-bottom:0;padding-bottom:0;"><strong>| e.g. |</strong> image1.jpg</small></p>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:1em;margin-top:0.5em;">
<small style=""><strong>Img src:</strong> <span style="margin-top:0;padding-top:0;line-height: 0;" class="numbSrc2">0</span></small>
</div>
<div style="display: inline-block;vertical-align: middle;float:left;margin-left:3em;margin-top:0;position: relative;">
<i class="fa fa-search" style=""></i>
<input type="text" class="form-control searchBar" id="searchFil" style="width:500px;height:30px;border-radius:30px;font-size:13px;" placeholder="Search image here...">
</div>
<div class ="copy-holder">
<span class = "float-right copy-btn2" data-container="body" data-toggle="popover" data-placement="top" data-content="Copied to Clipboard!">Copy</span>
</div>
<textarea id="filenameText" class="outputTAstyle2" placeholder="Image Filename(s) only here..." readonly></textarea>
</div>
</center>
</body>
</html>
I'm creating a jquery filter search.
I want to be able to search within a filtered category. I can filter out categories, but if I search within the selected category the search searches through the whole bunch but not only the selected category.
The search is almost working as it should, but I'm not sure how I can implement the search within categories criteria.
Here is a link to a fiddle
Any help or advise would be very much appreciated
$(document).ready(function(){
$("#searchInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#searchFilterDiv div.CompanyDirectoryItem").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
if($('#searchFilterDiv div.CompanyDirectoryItem:visible').length===0){
$('.error').show();
}else{
$('.error').hide();
}
});
});
$(".filter-button").on("click", function(){
var selectItem = $(this).data('category');
filter(selectItem);
});
function filter(e) {
var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
$('.CompanyDirectoryItem').hide().filter(function () {
return regex.test($(this).data('name'))
}).show();
if($('.CompanyDirectoryItem:visible').length===0){
$('.error').show();
}else{
$('.error').hide();
}
}
$('.box-item').on('click', function(){
$('.box-item').removeClass('selected');
$(this).addClass('selected');
});
.search-form-item{
margin-top: 30px;
background-color: #f9f9f9;
border: 1px solid lightgrey;
margin-bottom: 2em;
padding: 20px;
font-size: .9em;
text-align: left;
}
/* Thjonusta AO */
.boxes-centered{
text-align:center;
}
.box-item{
color: #333;
background-color: #fff;
border: 1px solid #ccc;
padding: 20px 10px;
margin: 1.7em .8em 1.7em .8em;
max-width: 10vw;
font-size: 1.1em;
font-weight: 500;
cursor: pointer;
display:inline-block;
float:none;
text-align:center;
}
.box-item:hover{
border-color: blue;
}
.box-item.selected{
border-color:red;
color:red;
}
.search-form-service {
border: 1px solid lightgray;
margin-left: 8.333%;
margin-right: 8.333%;
background: #fff;}
.search-form-service .form-control {
border-radius: 0 !important;
box-shadow: none;
-webkit-appearance: none;
border: 0;
height: 50px;
font: 18px "DINPro", Arial, sans-serif;
padding: 15px;
color: #4b4b4b; }
.search-form-service .form-control::-moz-placeholder {
color: #4b4b4b;
opacity: 1; }
.search-form-service .form-control:-ms-input-placeholder {
color: #4b4b4b; }
.search-form-service .form-control::-webkit-input-placeholder {
color: #4b4b4b; }
#media (max-width: 767px) {
.search-form-service .form-control {
font-size: 16px;
height: 50px;
padding: 10px 12px; } }
.search-form-service .btn-search {
border-width: 0 0 0 1px; }
.search-form-service .input-group-btn {
z-index: 5; }
.search-form-service.type2 {
max-width: 281px; }
.search-form-service.type2 .form-control {
height: 39px;
padding: 8px 15px; }
.search-form-service.type2 .btn-search {
min-width: 57px;
height: 39px; }
/*Custom Media Quearies */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="container form-container">
<div class="row search-form-item">
<div class="col-md-10 col-md-offset-1 searchtext-input search-form-service">
<input class="form-control" id="searchInput" type="text" placeholder="Search">
</div>
<div class="row boxes-centered">
<div class="col-md-2 col-md-offset-1 box-item filter-button" data-category="EveryCat">Every Category</div>
<div class="col-md-2 box-item filter-button" data-category="Category1">Category1</div>
<div class="col-md-2 box-item filter-button" data-category="Category2">Category2</div>
<div class="col-md-2 box-item filter-button" data-category="Category3">Category3</div>
<div class="col-md-2 box-item filter-button" data-category="Category4">Category4</div>
</div>
</div>
</div><!-- / container -->
<div id="searchFilterDiv">
<div class="CompanyDirectoryItem" data-name="EveryCat, Category1">
<h3>this belongs to Category1</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category2">
<h3>this belongs to Category2</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category3">
<h3>Item belongs to Category3</h3>
<p>Some text, more text more text more text </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name=" EveryCat, Category4">
<h3>Item in Cat 4</h3>
<p> this item belongs to Category4 </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category4, Category1">
<h3> this belongs to 1 and Category4</h3>
<p>Some text, text about this item that belongs to category 1 and 4 </p>
some link
</div>
<div class="CompanyDirectoryItem" data-name="EveryCat, Category3, Category2">
<h3>Item belongs to Category2 and Category3</h3>
<p>Some text, more text more text more text Category2 and Category3 txoeljljl </p>
some link
</div>
<div class="alert alert-error"></div>
<div class="error search-results-box-item" style="display: none;">
<h3>No Results</h3>
<p> Search gave no results, please try again </p>
</div>
</div> <!-- searchFilterDiv ends -->
You want to search from visible sections only:
$("#searchFilterDiv div.CompanyDirectoryItem:visible").filter(function() {
EDIT
To keep searching/filtering functionality I suggest to use detach/attach:
let tmp=[];
function filter(e) {
if(tmp.length>0)
tmp.map(x => x.appendTo($('#searchFilterDiv')));
var regex = new RegExp('\\b\\w*' + e + '\\w*\\b');
$('.CompanyDirectoryItem').detach().filter(function () {
if(regex.test($(this).data('name')))
return true
else
tmp.push($(this))
}).appendTo($('#searchFilterDiv'));
}
and now you can use your initial search/filtering function
$("#searchFilterDiv div.CompanyDirectoryItem").filter(function() {
I have the following code which contains some nested DIVs.
The DIVs have Plus and Minus Font Awesome icons to expand and collapse them.
You can use the buttons at the top of the page to toggle visibility of the DIVs.
The blue button and / or plus/minus icons can toggle visibility of the parents (Activities and Animals & Nature).
The green button toggles visiblity of the "child" divs which contain sub-headings such as award-medal, event etc.
The problem I have is that when it comes to toggling visibility of the child divs with the green plus/minus icons, if you e.g. click on the green minus for the award-medal heading, it also collapses the div for event.
I wondered if there is any way to split out the collapse functionality there, so that the green toggle button still works as it does now, but so that the individual gree plus/minus icons control the visibility of each div the icon is related to.
I can sort of see why the code works as it does now, but cannot get my head around how I would have to change the JS code to be able to achieve what I'm trying to do.
$(document).ready(function() {
$('.toggleparent').addClass('toggle-open');
$('.heading > a').on('click', function(event){
event.preventDefault();
if ( $(this).find('i').hasClass('fa-minus') ) {
$(this).find('i').removeClass('fa-minus').addClass('fa-plus');
$(this).parent().parent().find('.submenu').css("display", "none");
$(this).parent().parent().find('.submenu').addClass('closed');
if ( $('.submenu.closed').length == $('.menu').length ) {
$('.toggleparent').removeClass('toggle-open');
}
}
else if ( $(this).find('i').hasClass('fa-plus') ) {
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
$(this).parent().parent().find('.submenu').css("display", "block");
$(this).parent().parent().find('.submenu').removeClass('closed');
$('.toggleparent').addClass('toggle-open');
}
});
$('.toggleparent').on('click', function(){
if ( $(this).hasClass('toggle-open') ) {
$('.heading').each(function() {
$(this).find('i').removeClass('fa-minus').addClass('fa-plus');
$(this).parent().find('.submenu').css("display", "none");
$(this).parent().parent().find('.submenu').addClass('closed');
});
$('.toggleparent').removeClass('toggle-open');
}
else{
$('.heading').each(function() {
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
$(this).parent().find('.submenu').css("display", "block");
$(this).parent().parent().find('.submenu').removeClass('closed');
});
$('.toggleparent').addClass('toggle-open');
}
});
});
$(document).ready(function() {
$('.togglechild').addClass('toggle-open');
$('.subheading > a').on('click', function(event){
event.preventDefault();
if ( $(this).find('i').hasClass('fa-minus') ) {
$(this).find('i').removeClass('fa-minus').addClass('fa-plus');
$(this).parent().parent().find('.indent').css("display", "none");
$(this).parent().parent().find('.indent').addClass('closed');
if ( $('.indent.closed').length == $('.menu').length ) {
$('.togglechild').removeClass('toggle-open');
}
}
else if ( $(this).find('i').hasClass('fa-plus') ) {
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
$(this).parent().parent().find('.indent').css("display", "block");
$(this).parent().parent().find('.indent').removeClass('closed');
$('.togglechild').addClass('toggle-open');
}
});
$('.togglechild').on('click', function(){
if ( $(this).hasClass('toggle-open') ) {
$('.subheading').each(function() {
$(this).find('i').removeClass('fa-minus').addClass('fa-plus');
$(this).parent().find('.indent').css("display", "none");
$(this).parent().parent().find('.indent').addClass('closed');
});
$('.togglechild').removeClass('toggle-open');
}
else{
$('.subheading').each(function() {
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
$(this).parent().find('.indent').css("display", "block");
$(this).parent().parent().find('.indent').removeClass('closed');
});
$('.togglechild').addClass('toggle-open');
}
});
});
body{
background: #fff;
margin-top:20px;
}
h1.heading {
font: 'Oswald';
text-transform: uppercase;
}
td { background: #f1f1f1; border-bottom:1px solid #ccc; border-right:1px solid #ccc; padding:20px; margin:5px; border-top:1px solid #fff; border-left:1px solid #fff; }
.wrappingmapping {
margin:20px 0 0 20px;
border-radius:85px;
overflow:hidden;
border:10px solid #fff;
box-shadow:0 0 10px #999;
}
.menu {
margin-bottom: 50px;
}
.submenu {
padding: 20px;
background: repeating-linear-gradient(
-45deg,
#999,
#999 10px,
#888 10px,
#888 20px
);
border-radius: 2px;
}
.green {
color:#28a745;
}
.heading {
color: #000;
background: #ccc;
border-bottom: 1px solid #ccc;
padding: 5px;
}
.subheading {
background: #fff;
padding-left: 10px;
background: #f1f1f1;
border-top: 1px solid #fff;
font-size: 30px;
}
.indent {
background: #fff;
padding: 0px 20px 20px 20px;
}
.icon {
width: 64px;
height: 64px;
}
.gallery {
width: 100%;
*width: 99.94877049180327%;
margin: 0;
padding: 0;
}
.gallery.grid li {
margin: 2px 5px;
}
.gallery.grid li {
margin: 2px 5px;
display: block;
}
.gallery.grid li:hover {
background: #ccc;
}
.gallery.grid li {
display: inline-block;
border-top: 1px solid #eee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #eee;
padding: 6px;
position: relative;
-moz-box-sizing: border-box;
border-radius: 3px 3px 3px 3px;
background: #fff;
}
.gallery a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container-fluid">
<div>
<span class="toggleparent btn btn-primary btn-lg" data-selector="parent_">Toggle Parents</span>
<span class="togglechild btn btn-success btn-lg" data-selector="child_">Toggle Children</span>
</div>
<hr />
<!-- parent start -->
<div id="activities" class="menu">
<h1 class="heading">
<i class="fa fa-minus" aria-hidden="true"></i> Activities <span style="color:#ccc;"> [57] </span>
</h1>
<div id="parent_activities" class="submenu">
<!-- child start -->
<h4 class="subheading">
<i class="fa fa-minus green" aria-hidden="true"></i> award-medal <span style="color:#ccc;"> [6] </span>
</h4>
<div id="child_award-medal" class="indent">
<ul class="gallery grid">
<li>
<img title="military medal - 🎖️" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f396.svg" class="icon" role="presentation">
</li>
</ul>
</div> <!-- /indent -->
<!-- child start -->
<h4 class="subheading">
<i class="fa fa-minus green" aria-hidden="true"></i> event <span style="color:#ccc;"> [19] </span>
</h4>
<div id="child_event" class="indent">
<ul class="gallery grid">
<li>
<img title="jack-o-lantern - 🎃" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f383.svg" class="icon" role="presentation">
</li>
</ul>
</div> <!-- /indent -->
</div> <!-- /submenu -->
</div> <!-- /menu -->
<!-- parent end -->
<!-- parent start -->
<div id="animals-nature" class="menu">
<h1 class="heading">
<i class="fa fa-minus" aria-hidden="true"></i> Animals & Nature <span style="color:#ccc;"> [106] </span>
</h1>
<div id="parent_animals-nature" class="submenu">
<!-- child start -->
<h4 class="subheading">
<i class="fa fa-minus green" aria-hidden="true"></i> animal-amphibian <span style="color:#ccc;"> [1] </span>
</h4>
<div id="child_animal-amphibian" class="indent">
<ul class="gallery grid">
<li>
<img title="frog face - 🐸" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f438.svg" class="icon" role="presentation">
</li>
</ul>
</div> <!-- /indent -->
<!-- child start -->
<h4 class="subheading">
<i class="fa fa-minus green" aria-hidden="true"></i> animal-bird <span style="color:#ccc;"> [12] </span>
</h4>
<div id="child_animal-bird" class="indent">
<ul class="gallery grid">
<li>
<img title="turkey - 🦃" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f983.svg" class="icon" role="presentation">
</li>
</ul>
</div> <!-- /indent -->
</div> <!-- /submenu -->
</div> <!-- /menu -->
<!-- parent end -->
</div>
Because by .parent().find('.indent') it find all .indent, but what you need to find .next element with .indent class not all, so you should use .parent().next('.indent').
$(document).ready(function() {
$('.toggleparent').addClass('toggle-open');
$('.heading > a').on('click', function(event) {
event.preventDefault();
if ($(this).find('i').hasClass('fa-minus')) {
$(this).find('i').removeClass('fa-minus').addClass('fa-plus');
$(this).parent().parent().find('.submenu').css("display", "none");
$(this).parent().parent().find('.submenu').addClass('closed');
if ($('.submenu.closed').length == $('.menu').length) {
$('.toggleparent').removeClass('toggle-open');
}
} else if ($(this).find('i').hasClass('fa-plus')) {
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
$(this).parent().parent().find('.submenu').css("display", "block");
$(this).parent().parent().find('.submenu').removeClass('closed');
$('.toggleparent').addClass('toggle-open');
}
});
$('.toggleparent').on('click', function() {
if ($(this).hasClass('toggle-open')) {
$('.heading').each(function() {
$(this).find('i').removeClass('fa-minus').addClass('fa-plus');
$(this).parent().find('.submenu').css("display", "none");
$(this).parent().parent().find('.submenu').addClass('closed');
});
$('.toggleparent').removeClass('toggle-open');
} else {
$('.heading').each(function() {
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
$(this).parent().find('.submenu').css("display", "block");
$(this).parent().parent().find('.submenu').removeClass('closed');
});
$('.toggleparent').addClass('toggle-open');
}
});
});
$(document).ready(function() {
$('.togglechild').addClass('toggle-open');
$('.subheading > a').on('click', function(event) {
event.preventDefault();
if ($(this).find('i').hasClass('fa-minus')) {
$(this).find('i').removeClass('fa-minus').addClass('fa-plus');
$(this).parent().next('.indent').css("display", "none");
$(this).parent().next('.indent').addClass('closed');
if ($('.indent.closed').length == $('.menu').length) {
$('.togglechild').removeClass('toggle-open');
}
} else if ($(this).find('i').hasClass('fa-plus')) {
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
$(this).parent().next('.indent').css("display", "block");
$(this).parent().next('.indent').removeClass('closed');
$('.togglechild').addClass('toggle-open');
}
});
$('.togglechild').on('click', function() {
if ($(this).hasClass('toggle-open')) {
$('.subheading').each(function() {
$(this).find('i').removeClass('fa-minus').addClass('fa-plus');
$(this).next('.indent').css("display", "none");
$(this).next('.indent').addClass('closed');
});
$('.togglechild').removeClass('toggle-open');
} else {
$('.subheading').each(function() {
$(this).find('i').removeClass('fa-plus').addClass('fa-minus');
$(this).next('.indent').css("display", "block");
$(this).next('.indent').removeClass('closed');
});
$('.togglechild').addClass('toggle-open');
}
});
});
body {
background: #fff;
margin-top: 20px;
}
h1.heading {
font: 'Oswald';
text-transform: uppercase;
}
td {
background: #f1f1f1;
border-bottom: 1px solid #ccc;
border-right: 1px solid #ccc;
padding: 20px;
margin: 5px;
border-top: 1px solid #fff;
border-left: 1px solid #fff;
}
.wrappingmapping {
margin: 20px 0 0 20px;
border-radius: 85px;
overflow: hidden;
border: 10px solid #fff;
box-shadow: 0 0 10px #999;
}
.menu {
margin-bottom: 50px;
}
.submenu {
padding: 20px;
background: repeating-linear-gradient( -45deg, #999, #999 10px, #888 10px, #888 20px);
border-radius: 2px;
}
.green {
color: #28a745;
}
.heading {
color: #000;
background: #ccc;
border-bottom: 1px solid #ccc;
padding: 5px;
}
.subheading {
background: #fff;
padding-left: 10px;
background: #f1f1f1;
border-top: 1px solid #fff;
font-size: 30px;
}
.indent {
background: #fff;
padding: 0px 20px 20px 20px;
}
.icon {
width: 64px;
height: 64px;
}
.gallery {
width: 100%;
*width: 99.94877049180327%;
margin: 0;
padding: 0;
}
.gallery.grid li {
margin: 2px 5px;
}
.gallery.grid li {
margin: 2px 5px;
display: block;
}
.gallery.grid li:hover {
background: #ccc;
}
.gallery.grid li {
display: inline-block;
border-top: 1px solid #eee;
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #eee;
padding: 6px;
position: relative;
-moz-box-sizing: border-box;
border-radius: 3px 3px 3px 3px;
background: #fff;
}
.gallery a {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<div class="container-fluid">
<div>
<span class="toggleparent btn btn-primary btn-lg" data-selector="parent_">Toggle Parents</span>
<span class="togglechild btn btn-success btn-lg" data-selector="child_">Toggle Children</span>
</div>
<hr />
<!-- parent start -->
<div id="activities" class="menu">
<h1 class="heading">
<i class="fa fa-minus" aria-hidden="true"></i> Activities <span style="color:#ccc;"> [57] </span>
</h1>
<div id="parent_activities" class="submenu">
<!-- child start -->
<h4 class="subheading">
<i class="fa fa-minus green" aria-hidden="true"></i> award-medal <span style="color:#ccc;"> [6] </span>
</h4>
<div id="child_award-medal" class="indent">
<ul class="gallery grid">
<li>
<img title="military medal - 🎖️" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f396.svg" class="icon" role="presentation">
</li>
</ul>
</div>
<!-- /indent -->
<!-- child start -->
<h4 class="subheading">
<i class="fa fa-minus green" aria-hidden="true"></i> event <span style="color:#ccc;"> [19] </span>
</h4>
<div id="child_event" class="indent">
<ul class="gallery grid">
<li>
<img title="jack-o-lantern - 🎃" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f383.svg" class="icon" role="presentation">
</li>
</ul>
</div>
<!-- /indent -->
</div>
<!-- /submenu -->
</div>
<!-- /menu -->
<!-- parent end -->
<!-- parent start -->
<div id="animals-nature" class="menu">
<h1 class="heading">
<i class="fa fa-minus" aria-hidden="true"></i> Animals & Nature <span style="color:#ccc;"> [106] </span>
</h1>
<div id="parent_animals-nature" class="submenu">
<!-- child start -->
<h4 class="subheading">
<i class="fa fa-minus green" aria-hidden="true"></i> animal-amphibian <span style="color:#ccc;"> [1] </span>
</h4>
<div id="child_animal-amphibian" class="indent">
<ul class="gallery grid">
<li>
<img title="frog face - 🐸" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f438.svg" class="icon" role="presentation">
</li>
</ul>
</div>
<!-- /indent -->
<!-- child start -->
<h4 class="subheading">
<i class="fa fa-minus green" aria-hidden="true"></i> animal-bird <span style="color:#ccc;"> [12] </span>
</h4>
<div id="child_animal-bird" class="indent">
<ul class="gallery grid">
<li>
<img title="turkey - 🦃" src="https://cdn.jsdelivr.net/emojione/assets/svg/1f983.svg" class="icon" role="presentation">
</li>
</ul>
</div>
<!-- /indent -->
</div>
<!-- /submenu -->
</div>
<!-- /menu -->
<!-- parent end -->
</div>