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)
})
Related
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.
I am having problems with a javascript code, as there is an innerHTML and it is giving me a different width than the one I have in my css and bootstrap rules.
This is my javascript code:
let numeroStreams = document.getElementById('num')
let resultado = document.getElementById('res')
// let requestURL = 'https://economia.awesomeapi.com.br/json/all/USD-BRL';
// let request = new XMLHttpRequest();
// request.open('GET', requestURL);
// request.send();
// request.onload = function() {
// let cotacaoDolar = JSON.parse(request.response);
// let divisaoReais = parseFloat(cotacaoDolar['USD']['ask']);
// }
// codigo acima funciona, entender Promise e then para criar let real
let dolar = {
Spotify: 0.00437,
Deezer: 0.0064,
Amazon: 0.00402,
Apple: 0.00783,
Ytmusic: 0.008,
Tidal: 0.01284,
Yt: 0.00087,
};
let divisaoReais = 5.37;
let real = { // fonte: geniusbrasil na pasta
Spotify: dolar.Spotify*divisaoReais,
Deezer: dolar.Deezer*divisaoReais,
Amazon: dolar.Amazon*divisaoReais,
Apple: dolar.Apple*divisaoReais,
Ytmusic: dolar.Ytmusic*divisaoReais,
Tidal: dolar.Tidal*divisaoReais,
Yt: dolar.Yt*divisaoReais,
};
// let real = {
// Spotify: 0.00193,
// Deezer: 0.00195,
// Amazon: 0.00754,
// Apple: 0.00546,
// Ytmusic: 0.006, // falta verificar esse valor
// Tidal: 0.00604,
// Yt: 0.00045,
// };
function calc() {
if (numeroStreams.value > 0) {
res.innerHTML = `<div class="row no-gutters" id="stores-container">
<div class="col">
<div class="row voffset-md">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platforms-spotify voffset-clear-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/spotify_logo.png" class="img-fluid img-protected logo-cal-style mg-sm float-sm-none" alt="spotify_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Spotify
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Spotify).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platforms-deezer voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/deezer-logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="deezer_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Deezer
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Deezer).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platform-amazon voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/amazon_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="amazon_music_logo">
</div>
</div>
<div class="align-self-center stores-cal-info col-lg-7 col-sm-7 col-7">
<h2 class="mg-clear cal-store-style">
Amazon Music
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Amazon).toFixed(2)}</p>
</div>
</div>
</div>
</div>
<div class="row voffset">
<div class="col-lg-4 col-md-4 col-sm-12 col-12">
<div class="row platforms-apple voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/apple_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_music_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="mg-clear cal-store-style">
Apple Music
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Apple).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-ytmusic voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/youtube_music_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_music_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-6">
<h2 class="mg-clear cal-store-style">
Youtube Music
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Ytmusic).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-tidal voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/tidal_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="tidal_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Tidal
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Tidal).toFixed(2)}</p>
</div>
</div>
</div>
</div>
<div class="row voffset">
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-soundcloud voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/soundcloud-logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="soundcloud_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="mg-clear cal-store-style">
SoundCloud
</h2>
<p class="currency mg-clear text-lg-left">US$ ${(numeroStreams.value*dolar.Soundcloud).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-tiktok voffset-sm">
<div class="align-self-center col-lg-5 col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/tiktok_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="tiktok_logo">
</div>
</div>
<div class="align-self-center col-lg-7 col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
TikTok
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.TikTok).toFixed(2)}</p>
</div>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-12">
<div class="row platforms-youtube voffset-sm">
<div class="col-lg-6 align-self-center col-sm-5 col-5">
<div class="text-md-center text-lg-left">
<img src="https://fwdmusic.com/img/youtube_logo.png" class="img-fluid img-protected logo-cal-style mx-auto d-block mg-sm" alt="youtube_logo">
</div>
</div>
<div class="col-lg-6 align-self-center col-sm-7 col-7">
<h2 class="cal-store-style mg-clear">
Youtube
</h2>
<p class="currency mg-clear">US$ ${(numeroStreams.value*dolar.Yt).toFixed(2)}</p>
</div>
</div>
</div>
</div>
</div>
</div>`
} else {
window.alert('Estimated streams number cannot be blank.')
}
}
And the end result should look like this:
But instead this is what is happening
I am leaving you the page where I have implemented this application,
https://fwdmusic.com/royalties-calculator/
I would be very grateful for your help.
Thanks a lot in advance.
It's not about your JS generated HTML. It's about your class you set above .form-group.
Change yellow marked HTML class from col-lg-4 offset-lg-4 col-md-4 offset-md-4 to col-md-12.
Update: Found a better solution. I saw you're using class row no-gutter 2 times in a row. Delete the first one class row no-gutter as shown in image and you will be good. Also, don't implement my previous solution as this breaks your form width to full-width.
I try to create a reward card, basically I have a div with 10 images with same id and what I want to achieve is that every time user click a button, images in the div will replace by a new images.
so far with the code below, I only achieve first image replaced than it stops and nothing else happen
<div class="container">
<h1>Reward Program</h1>
<div class="section" id="card">
<div class="row">
<div class="col-lg-4 col-sm-3" id="tut">
<img src="images/mail.png" id="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" id="stamp">
</div>
</div>
</div>
</div>
<button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>
var counter = 0,
checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];
showCheck = function () {
document.getElementById("stamp").src = checked[counter];
counter++;
if (counter >= checked.length) {
counter = 0;
}
};
You can only have one element ID on a website (each ID has to be unique, otherwise you will get an error), so it's best to change those IDs to classes.
You don't need a loop after all, as you're not changing all the images with a single click of the button, but rather, one at a time, so just keep clicking the button.
You can remove the alt tag on the images and the imges[counter].alt = checked[counter] in the code. I just put it there so you can see what's happening. Run the code snippet to see it working:
var counter = 0;
var checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];
function showCheck() {
var imges = document.querySelectorAll(".stamp")
imges[counter].src = checked[counter]
imges[counter].alt = checked[counter]
counter++
if (counter >= checked.length) {
counter = 0;
}
};
<div class="row">
<div class="col-lg-4 col-sm-3" id="tut">
<img src="images/mail.png" alt="mail" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" alt="mail" class="stamp">
</div>
</div>
<button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>
document.getElementById("tut").src = checked[counter];
First of all it looks like you are setting src attribute of the <div>.
If you want to replace the image you are supposed the set the src attribute of the <img> inside the <div>.
Also the id attribute in supposed to be unique for each html element.
If you want several elements to be referred to by a single attribute value use class attribute instead.
I have slightly tweaked your code. This should solve your problem.
<div class="container">
<h1>Reward Program</h1>
<div class="section" id="card">
<div class="row">
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp" alt="">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
<div class="col-lg-4 col-sm-3">
<img src="images/mail.png" class="stamp">
</div>
</div>
</div>
</div>
<button value="show Check" onclick="showCheck()" class="btn btn-dark btn-lg">Buy now</button>
var counter = 0,
var checked = ["images/check.png", "images/check1.png", "images/check2.png", "images/check3.png", "images/check4.png", "images/check5.png", "images/check6.png", "images/check7.png", "images/check8.png", "images/check9.png"];
function showCheck() {
document.getElementsByClassName("stamp").forEach(img=>{
img.src=checked[counter++];
});
if (counter >= checked.length) {
counter = 0;
}
}
This problem is you are replacing src of only one element. You need to use a loop to replace src of all the elements.
Below is the working snippet of the function:
showCheck = function () {
$("img[id*='stamp']").each(function(){
this.src=checked[counter];
});
counter++;
if(counter >= checked.length) {
counter = 0;
}
};
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.
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'));
});
});