gallery selector using bootstrap does not work

gallery selector using bootstrap does not work - javascript

Below is the HTML followed by JavaScript file called filter.js.
I am developing a gallery page on my website and i believe i am missing some selector id or something because when i check the page, none of the pictures change and none of the categories work. please can someone help me see what i'm missing. Thank You
<script src="js/vendor/modernizr-2.8.3.min.js"></script>
<script src="js/filter.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"
id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!--Start about area -->
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button" data-filter="hdpe">HDPE Pipes</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
<button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
<button class="btn btn-default filter-button" data-filter="irrigation">Irrigation
Pipes</button>
</div>
<br/>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
</div>
</div>
</section>
</div>
</div>
</div>
<!--end about area -->
This is the javascript below
$(document).ready(function(){
$(".filter-button").click(function(){
var value = $(this).attr('data-filter');
if(value == "all")
{
// $('.filter').removeClass('hidden');
$('.filter').show('1000');
}else{
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$('.filter').filter('.'+value).show('3000');
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});

"Can anyone Spot Error?" There is None atleast not in the code you posted , just Make sure you have the bootstrap and jquery working. The Rest of it seems to be working fine, i have changed the images so that you could see that the code is working
$(document).ready(function() {
$(".filter-button").click(function() {
var value = $(this).attr("data-filter");
if (value == "all") {
// $('.filter').removeClass('hidden');
$(".filter").show("1000");
} else {
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter")
.not("." + value)
.hide("3000");
$(".filter")
.filter("." + value)
.show("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<style>
img {
width: 365px;
height: 365px;
}
</style>
</head>
<body>
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">
All
</button>
<button class="btn btn-default filter-button" data-filter="hdpe">
HDPE Pipes
</button>
<button
class="btn btn-default filter-button"
data-filter="sprinkle"
>
Sprinkle Pipes
</button>
<button class="btn btn-default filter-button" data-filter="spray">
Spray Nozzle
</button>
<button
class="btn btn-default filter-button"
data-filter="irrigation"
>
Irrigation Pipes
</button>
</div>
<br />
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.fastflowpipes.com/wp-content/uploads/2014/10/19737_HDPE-PIPES.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://apollo-singapore.akamaized.net/v1/files/xbjlgpzdkcfh3-PK/image;s=850x0"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg/"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
</div>
</div>
</div>
<!--end about area -->
<!--The JS File -->
<script src="./index.js"></script>
</body>
</html>

$(document).ready(function() {
$(".filter-button").click(function() {
var value = $(this).attr("data-filter");
if (value == "all") {
// $('.filter').removeClass('hidden');
$(".filter").show("1000");
} else {
// $('.filter[filter-item="'+value+'"]').removeClass('hidden');
// $(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter")
.not("." + value)
.hide("3000");
$(".filter")
.filter("." + value)
.show("3000");
}
});
if ($(".filter-button").removeClass("active")) {
$(this).removeClass("active");
}
$(this).addClass("active");
});
<!DOCTYPE html>
<html lang="en">
<head>
<!-- jquery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Bootstrap JS -->
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"
></script>
<style>
img {
width: 365px;
height: 365px;
}
</style>
</head>
<body>
<div class="about_area">
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">
All
</button>
<button class="btn btn-default filter-button" data-filter="hdpe">
HDPE Pipes
</button>
<button
class="btn btn-default filter-button"
data-filter="sprinkle"
>
Sprinkle Pipes
</button>
<button class="btn btn-default filter-button" data-filter="spray">
Spray Nozzle
</button>
<button
class="btn btn-default filter-button"
data-filter="irrigation"
>
Irrigation Pipes
</button>
</div>
<br />
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.fastflowpipes.com/wp-content/uploads/2014/10/19737_HDPE-PIPES.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://apollo-singapore.akamaized.net/v1/files/xbjlgpzdkcfh3-PK/image;s=850x0"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation"
>
<img
src="https://5.imimg.com/data5/CX/SG/MY-24086146/agricultural-drip-irrigation-pipes-500x500.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe"
>
<img
src="https://www.apollopipes.com/media/product/18068_hdpe.jpg"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray"
>
<img
src="https://5.imimg.com/data5/LH/MW/MY-3212000/airless-spray-pipe-500x500.jpg/"
class="img-responsive"
/>
</div>
<div
class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle"
>
<img
src="https://5.imimg.com/data5/VT/SC/MY-8859326/hdpe-sprinkler-pipe-500x500.jpg"
class="img-responsive"
/>
</div>
</div>
</div>
</div>
<!--end about area -->
<!--The JS File -->
<script src="./index.js"></script>
</body>
</html>

how to remove functionality of "ALL" button i want to show only rest categories instead of all. by default all images should now show when run the code.

Related

why can't I use the same javascript toggle button twice?

I'm attempting to utilize this javascript toggle button in two separate parts on the same page, but I'm having trouble. I tried altering the id as well, but it didn't work. Is it impossible to complete it, or am I overlooking something? I am not an expert in javascript and am a complete novice, so any help would be greatly appreciated.
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton span");
var moreIcon = document.querySelector("#moreButton img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less');
moreIcon.classList.remove('less');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less');
moreIcon.classList.add('less');
}
}
function toggleText2() {
var showMoreText2 = document.getElementById("more2");
var buttonText2 = document.querySelector("#moreButton2 span");
var moreIcon2 = document.querySelector("#moreButton2 img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less2');
moreIcon.classList.remove('less2');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less2');
moreIcon.classList.add('less2');
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint"></div>
<div id="more">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText()" id="moreButton">
<span class="pink">Show More</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint2"></div>
<div id="more2">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText2()" id="moreButton2">
<span class="pink2">Show More</span>
<img class="more2" src="./images/load-more.png" alt="">
</button>
</div>
</div>

The correct way to do that:
document.querySelectorAll('button.moreButton').forEach(bt =>
{
let
moreItem = bt.closest('div.row').querySelector('div.more_items')
, spPink = bt.querySelector('span.pink')
;
bt.onclick =_=>
{
spPink.textContent = moreItem.classList.toggle('noDisplay') ? 'Show More' : 'Show Less'
}
})
.more_items.noDisplay {
display: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="more_items">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button class="moreButton">
<span class="pink">Show Less</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>
<br>
<br>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="more_items">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button class="moreButton">
<span class="pink">Show Less</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>

You had some issues with the naming of your variables etc. (things coming up as undefined).
function toggleText() {
var showMoreText = document.getElementById("more");
var buttonText = document.querySelector("#moreButton span");
var moreIcon = document.querySelector("#moreButton img");
if (startpoint.style.display === "none") {
showMoreText.style.display = "none";
startpoint.style.display = "table-cell";
buttonText.innerHTML = "Show More";
buttonText.classList.remove('less');
moreIcon.classList.remove('less');
} else {
showMoreText.style.display = "table-cell";
startpoint.style.display = "none";
buttonText.innerHTML = "Show Less";
buttonText.classList.add('less');
moreIcon.classList.add('less');
}
}
function toggleText2() {
var showMoreText2 = document.getElementById("more2");
var buttonText2 = document.querySelector("#moreButton2 span");
var moreIcon2 = document.querySelector("#moreButton2 img");
if (startpoint.style.display === "none") {
showMoreText2.style.display = "none";
startpoint.style.display = "table-cell";
buttonText2.innerHTML = "Show More";
buttonText2.classList.remove('less2');
moreIcon2.classList.remove('less2');
} else {
showMoreText2.style.display = "table-cell";
startpoint.style.display = "none";
buttonText2.innerHTML = "Show Less";
buttonText2.classList.add('less2');
moreIcon2.classList.add('less2');
}
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint"></div>
<div id="more">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText()" id="moreButton">
<span class="pink">Show More</span>
<img class="more" src="./images/load-more.png" alt="">
</button>
</div>
</div>
<br>
<br>
<br>
<br>
<div class="container-fluid clientbox text-center">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div id="startpoint2"></div>
<div id="more2">
<div class="row">
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class=" col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
<div class="col-6 col-md-4 col-lg-3">
<img class="img-fluid brand-img" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/69/How_to_use_icon.svg/100px-How_to_use_icon.svg.png" alt="Logo">
</div>
</div>
</div>
<button onclick="toggleText2()" id="moreButton2">
<span class="pink2">Show More</span>
<img class="more2" src="./images/load-more.png" alt="">
</button>
</div>
</div>
With that said, there are much cleaner ways of constructing this logic. For instance, you could parse the event and look for a certain parent or child to toggle. That way, you can utilize the same function as long as it's surrounded by the same html structure. You'd have to exchange the id's for classes however.

Javascript button filtering show another div on page

I'm using button filtering from this website:
https://bootsnipp.com/snippets/featured/portfolio-gallery-with-filtering-category
Is it possible to let it automatically open 'HDPE Pipes' instead of 'All'?
I hope someone here can provide me an answer because I'm really stuck here..

You simply need to add these two lines at the beginning of your JQuery code:
$(".filter").not('.hdpe').hide();
$('.filter').filter('.hdpe').show();
This ensures that after the document is loaded, all the filters which don't have the class of hdpe are hidden and the ones which have are shown.
Here's a snippet for that:
https://bootsnipp.com/user/snippets/5MBWR

X2 primary concerns to address:
1. Hide the .filter elements that are not .hdpe so that they don't display on page load
Since you are using .hide() and .show() methods respectively to toggle between the display of elements in question, stick with an inline style rule (style="display: none;") that you should declare on all .figure elements that do not have the class .hdpe - so in other words; "all elements you don't want to have show up on page load", e.g:
<!-- You want to have displayed on page load -->
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<!-- You don't want to have displayed on page load -->
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
2. Add the .active class to the .filter-button element you want to have active on page load
You'll need to also account for the filter button that should be active on page load. Add the class .active to the .filter-button element in question, in this case that would be element with the attribute data-filter="hdpe", e.g:
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button active" data-filter="hdpe">HDPE Pipes</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
<button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
<button class="btn btn-default filter-button" data-filter="irrigation">Irrigation Pipes</button>
</div>
Code Snippet Demonstration:
$(document).ready(function(){
$(".filter-button").click(function(){
$(".filter-button").removeClass('active');
$(this).addClass('active');
var value = $(this).attr('data-filter');
if(value == "all") {
//$('.filter').removeClass('hidden');
$('.filter').show('1000');
} else {
//$('.filter[filter-item="'+value+'"]').removeClass('hidden');
//$(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
$(".filter").not('.'+value).hide('3000');
$(".filter").filter('.'+value).show('3000');
}
});
});
.gallery-title
{
font-size: 36px;
color: #42B32F;
text-align: center;
font-weight: 500;
margin-bottom: 70px;
}
.gallery-title:after {
content: "";
position: absolute;
width: 7.5%;
left: 46.5%;
height: 45px;
border-bottom: 1px solid #5e5e5e;
}
.filter-button
{
font-size: 18px;
border: 1px solid #42B32F;
border-radius: 5px;
text-align: center;
color: #42B32F;
margin-bottom: 30px;
}
.filter-button:hover
{
font-size: 18px;
border: 1px solid #42B32F;
border-radius: 5px;
text-align: center;
color: #ffffff;
background-color: #42B32F;
}
.btn-default:active .filter-button:active
{
background-color: #42B32F;
color: white;
}
.port-image
{
width: 100%;
}
.gallery_product
{
margin-bottom: 30px;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<div class="gallery col-lg-12 col-md-12 col-sm-12 col-xs-12">
<h1 class="gallery-title">Gallery</h1>
</div>
<div align="center">
<button class="btn btn-default filter-button" data-filter="all">All</button>
<button class="btn btn-default filter-button active" data-filter="hdpe">HDPE Pipes</button>
<button class="btn btn-default filter-button" data-filter="sprinkle">Sprinkle Pipes</button>
<button class="btn btn-default filter-button" data-filter="spray">Spray Nozzle</button>
<button class="btn btn-default filter-button" data-filter="irrigation">Irrigation Pipes</button>
</div>
<br/>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter irrigation" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter hdpe">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter spray" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
<div class="gallery_product col-lg-4 col-md-4 col-sm-4 col-xs-6 filter sprinkle" style="display: none;">
<img src="http://fakeimg.pl/365x365/" class="img-responsive">
</div>
</div>
</div>

How to display a text box while selecting an option from a multiselect dropdown

I am developing a web page which has multiple drop down menu. Now i need to display some text area according to the options selected in the drop down. If it is a normal drop down i can do that easily. But here the problem is need to display multiple text areas on multiple selection of that drop down.
Here is my code
<div class="row form-group">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
<spring:message text="Nature of Type" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<select id="nature" type="text" class="form-control"
multiple="multiple" onchange="ChangeNature(this)">
<option>Airticket(Round Trip)</option>
<option value="visa">Visa</option>
<option value="medical">Medical</option>
<option value="resident">Resident Card</option>
<option value="pickupdrop">Airport Pickup/Drop</option>
<option value="accommodation">First 7 Days Free
Accommodation</option>
<option value="other1">Other 1</option>
<option value="other2">Other 2</option>
</select> <span class="errorspan" id="nature_er">select the
type</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"
id="airticket_amt">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Airticket Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter
airticket the Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="visa_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Visa Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
visa amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="medical_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Medical Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
medical amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="residentcard_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Resident Card Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
resident card Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="pickupdrop_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Airport Pickup/Drop Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls " />
<span class="errorspan" id="billinghrs_er">enter the
pickup/drop Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="accommodation_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Free Accommodation Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
free accommodation Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="other1_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Other1 Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
other1 Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
<div class="row form-group multihide" id="other2_amt">
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 ">
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"></div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12">
<div class="row padding6">
<div
class="col-lg-4 col-md-4 col-sm-4 col-xs-12 margintop8 rq-field">
<spring:message text="Other2 Amount" />
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<input id="amount" type='text' class="form-control numcls" />
<span class="errorspan" id="billinghrs_er">enter the
other2 Air ticket amount</span>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-12"></div>
</div>
</div>
</div>
and here is my script
function ChangeNature(obj) {
var selectValue = obj;
var selected = selectValue.options[selectValue.selectedIndex].value;
/* var visa = document.getElementsByClassName("multihide");
var medical = document.getElementById("medical_amt");
var resident = document.getElementById("residentcard_amt");
var pickupdrop = document.getElementById("pickupdrop_amt");
var acc= document.getElementById("accommodation_amt");
var other1 = document.getElementById("other1_amt");
var other2 = document.getElementById("other2_amt"); */
if(selected ==="visa"){
$("#visa_amt").show();
}
if(selected ==="medical"){
$("#visa_amt").hide();
$("#medical_amt").show();
}
if(selected ==="resident"){
$("#medical_amt").hide();
$("#residentcard_amt").show();
}
if(selected ==="pickupdrop"){
$("#residentcard_amt").hide();
$("#pickupdrop_amt").show();
}
if(selected ==="accommodation"){
$("#pickupdrop_amt").hide();
$("#accommodation_amt").show();
}
else{
$("#accommodation_amt").hide();
}
}

Use a second function.
The first one will be triggered ever time you change the selection of the checkbox. It will change the class of the trigger source (the current active element) and add or remove a class (e.g. selected). After this you start a second function named updateTextAreas.
Inside this Function you get all you elements with the given class (e.g. selected) and walk over the result list. Then you could show the needed text areas and hide all others.
function ChangeNature(obj) {
$(obj).toggleClass('selected');
updateTextAreas();
}
function updateTextAreas(){
// hide everything
$("#visa_amt").hide();
$("#medical_amt").hide();
// get all selected options
$('.selected').each(function(i,e){
if($(e).hasClass("visa")){
$("#visa_amt").show();
}else if($(e).hasClass("medical")){
$("#medical_amt").show();
} [and so on]
});
}
Hope I understand you right.

The problem got solved now. I used the following script.
$('#nature').on('change',function(){
var val = $('#nature').val();
if(val!=null){
arr = val.toString().split(",");
$('.multihide').hide();
for(var i=0;i<arr.length;i++){
if(arr[i]=="airticket"){$("#airticket_amt").show();}
if(arr[i]=="visa"){$("#visa_amt").show();}
if(arr[i]=="medical"){$("#medical_amt").show();}
if(arr[i]=="resident"){$("#residentcard_amt").show();}
if(arr[i]=="pickupdrop"){$("#pickupdrop_amt").show();}
if(arr[i]=="accommodation"){$("#accommodation_amt").show();}
if(arr[i]=="other1"){$("#other1_amt").show();}
if(arr[i]=="other2"){$("#other2_amt").show();}
}
}else{
$('.multihide').hide();
}
});
Thanks to all.

How to display sorted divs into HTML

I'm working with this piece of JS to sort a group of divs, with the code that I have, I able to get the values(id) of each div and I push the values into an array, then I sort the array.
The problem is that I don't know how to display the sorted divs again into the screen. I tried this but it only displays the id value, is there a way to display the sorted divs ?
for (var j=0; j<portfolio.length; j++)
{
$('#portfolio-divs').append(portfolio[j]);
}
Full Code
<br><br>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p2">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 2</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p1">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 1</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p4">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 4</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p3">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 3</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p6">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 6</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p5">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 5</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p8">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 8</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p7">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 7</h3>
</div> <!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
</div> <!-- ./row -->
</div>
JS:
var x = document.getElementsByClassName('pss');
var portfolio = new Array;
for(var i=0; i<x.length; i++)
{
var y = document.getElementsByClassName('pss')[i].getAttribute('id');
portfolio.push(y);
}
portfolio.sort();
for (var j=0; j<portfolio.length; j++)
{
$('#portfolio-divs').append(portfolio[j]);
}

You want to create an object from the ID string.
$('#portfolio-divs').append($('#'+portfolio[j]));
var x = document.getElementsByClassName('pss');
var portfolio = new Array;
for (var i = 0; i < x.length; i++) {
var y = document.getElementsByClassName('pss')[i].getAttribute('id');
portfolio.push(y);
}
portfolio.sort();
for (var j = 0; j < portfolio.length; j++) {
$('#portfolio-divs').append($('#'+portfolio[j]));
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<br><br>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p2">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 2</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p1">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 1</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p4">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 4</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p3">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 3</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p6">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 6</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p5">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 5</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p8">
<center><img src="http://placekitten.com/250/300" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 8</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12 pss" id="p7">
<center><img src="http://placekitten.com/250/310" width="230" height="190" alt="" class="img-responsive"></center>
<h3 align="center">Website 7</h3>
</div>
<!-- ./col-lg-3 col-md-3 col-sm-6 col-xs-12 -->
</div>
<!-- ./row -->
</div>
<h1>portfolio-divs</h1>
<div id="portfolio-divs"></div>

You can just change html content of parent div with sorted content using html() DEMO.
var sorted = $('.pss').sort(function(a, b) {
return $(a).attr('id').localeCompare($(b).attr('id'))
})
$('.row').html(sorted)
In case you have multiple elements you want to sort, in this case multiple .rows then you need to loop each one and run sort inside DEMO.
$('.row').each(function() {
var sorted = $(this).find('.pss').sort(function(a, b) {
return $(a).attr('id').localeCompare($(b).attr('id'))
})
$(this).html(sorted)
})

how to toggle each div

I have a question for toggle, I wrote a function which when I hover some image then that image was change and click then div will display and other image click:hover acting is same close display before selected
this is html code
<div class="bs-example" data-example-id="simple-thumbnails">
<div class="row">
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_ezer"
src="/img/intro_ezer_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_coloris"
src="/img/intro_coloris_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4 thumbnail">
<img class="intro_galaxia"
src="/img/intro_galaxia_main.png"
data-holder-rendered="true"display:block;">
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-3 intro_ezer_detail intro">
<img class="intro_margot_main"
src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_coloris_detail intro">
<img class="intro_nanobuble"
src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_galaxia_detail intro">
<img class="intro_teatoxy"
src="/img/intro_ezer.jpg">
</div>
</div>
<div class="row">
<div class="col-xs-6 col-md-4">
<img
class="intro_margot" src="/img/intro_margot_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4">
<img
class="intro_nanobuble"
src="/img/intro_nanobuble_main.png"
data-holder-rendered="true"display:block;">
</div>
<div class="col-xs-6 col-md-4">
<img class="intro_teatoxy"
src="/img/intro_teatoxy_main.png"
data-holder-rendered="true"display:block;">
</div>
</div>
<div class="row detail">
<div class="col-xs-12 col-md-3 intro">
<img src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_nanobuble_detail intro">
<img src="/img/intro_ezer.jpg">
</div>
<div class="col-xs-12 col-md-3 intro_teatoxy_detail intro">
<img src="/img/intro_ezer.jpg">
</div>
</div>
</div>
javascript
var className = "";
var toggleImg = "";
$('div').find('img').hover(function() {
className = $(this).attr('class');
this.src = '/img/' + className + '_hover.png';
}, function() {
this.src = '/img/' + className + '_main.png';
}).click(function(e) {
toggleImg = className + "_detail";
e.preventDefault(); $('.intro').hide()
$("."+className+"_detail").show();
})
How can I do?

You should use .each
Check the example below.
HTML :
<div>
<img alt="chrome" src="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w300">
</div>
<div>
<img alt="firefox" src="https://www.mozilla.org/media/img/firefox/firefox-256.e2c1fc556816.jpg">
</div>
JS :
$('div img').each(function() {
$(this).click(function() {
alert($(this).attr('alt'));
});
});

Develop Reference

JavaScript is the programming language of the Web.

gallery selector using bootstrap does not work - javascript

how to remove functionality of "ALL" button i want to show only rest categories instead of all. by default all images should now show when run the code.

Related

why can't I use the same javascript toggle button twice?

Javascript button filtering show another div on page

How to display a text box while selecting an option from a multiselect dropdown

How to display sorted divs into HTML

how to toggle each div

Categories

Resources