Targeting next Image that is inside a col class

Targeting next Image that is inside a col class - javascript

<div class="container bg-custom-blue">
<h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
<div class="row">
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
</div>
I am trying to build an image gallery with arrows so you can press the next arrow and display next image (like all basic sliders). Since I just learned some basics of bootstrap I decided to use bootstrap for this project, however, I had to put every image in a separate col class (please notify me if this is not a good way). Since every image is in nested in another col class when I use this.nextElementSibling in the event listener I get null as a return. Is there any way that I can target the next image please?

You can use jQuery for this since you already using it for bootstrap
$(this).parent().siblings().find("img")
You can use Javascript as well as follow
this.parentElement.nextElementSibling.children[0];
Where children[0] means first child element

You can use document.querySelectorAll and access your nodes via index.
Small example
const items = document.querySelectorAll('.row .col-12'); // all .col-12 notes inside .row
let currentIndex = 0; // current item index
// refresh icons and set border color
const refreshItems = () => {
items.forEach((item, index) => {
item.style.border = `1px solid ${index === currentIndex ? '#f00' : '#0f0'}`;
});
}
// init
refreshItems();
// simple call by index
// items[5].style.border = '1px solid #0f0';
// Add click event to .prev button and increase current index 1
document.querySelector('.next').addEventListener('click', () => {
currentIndex += 1;
refreshItems();
});
// Add event to .prev button and decrease current index by 1
document.querySelector('.prev').addEventListener('click', () => {
currentIndex -= 1;
refreshItems();
})
<button class="next">next</button>
<button class="prev">prev</button>
<div class="container bg-custom-blue">
<h2 class="text-center pt-5 pb-4">The Responsive Gallery</h2>
<div class="row">
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/waiter.jpg" alt="Waiter serving food">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/romantic.jpg" alt="A couple enjoying a romantic dinner at our restaurant">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Tasty nibbles to share">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/pasta-rucola-salad.jpg" alt="Fresh pasta with rucola">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="Fresh fillet of fish">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/fish.jpg" alt="One of our large selection of cakes we serve">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/chill.jpg" alt="Friends enjoying wine">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/beef.jpg" alt="Argentinian beef fillet">
</div>
<div class="col-12 col-md-6 col-xl-4 p-2">
<img class="img-fluid" src="images/nibbles.jpg" alt="Waiter serving food">
</div>
</div>
</div>
Lastly, add transforms, transitions, overflows, and index checks, and your slider is ready.

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.

javscript onclick() replace images

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;
}
};

How can i display fixed number of images in a row on different devices

I have a set of images in a row,I want them to be displayed as 4 images on lg devices,2 images on sm and md devices but I am confused on How to use the grids to achieve this. this is my bootstrap code.you can see the effect herein the skills section.when you resize the screen to sm the images take the complete width of the screen,
How can I make them take 50% of the width only so that 2 images are displayed in a row.
img{
height: 200px;
}
<div class="row pr-3 pt-1 pl-3 pb-3">
<div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3">
<img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">grid1 </h5>
</div>
</div>
<div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3">
<img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">grid2</h5>
</div>
</div>
<div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3">
<img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">grid3</h5>
</div>
</div>
<div class="skill-set col-lg-3 col-md-3 col-sm-6 pt-3">
<img class="card-img-top" src="https://images.unsplash.com/photo-1533883355737-25ab4d1fbefb?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e596d702f8053a202b1ce231eaa2f999&auto=format&fit=crop&w=1049&q=80" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">grid4</h5>
</div>
</div>
</div>

Replace the grid class from col-md-3 to col-md-6

Masonry and dynamic tabs

I have this page that contains dynamic tabs. The content inside the tabs changes depending on the tab the user picks. I want to get that content to be laid out with Masonry so that it looks nice.
Here's the problem: When the user switches tabs the content collapses. Like this:
If the user plays around with the window size it responds and lays out correctly. Like this:
Now I am pretty sure I know what the issue is here. I am using masonry on HTML and not jquery:
<div class="row" data-masonry='{ "columnWidth": ".news-box", "itemSelector": ".news-box" }'>
So I think the issue is that masonry on HTML doesn't work that well if the content isn't loaded (the images, in this case). I have looked around for JQuery approaches to solve this and my problem is that I can't get JQuery to work for some reason. This site is on ASP.NET and I can't get masonry on JQuery going, which is why I am stuck with HTML.
This is what I have tried, without any success, with JQuery:
<script>
$('.row').masonry({
itemSelector: '.news-box',
columnWidth: '.news-box'
});
</script>
I know that piece of code doesn't wait for the images to load. My point is that I don't get any results, even erroneous with that code.
Is there any way I can solve this on HTML? Make it so that when a user switches tabs the contents lay out perfectly to begin with?
Edit: I got this working with vanilla JS
var msnry = new Masonry('.row', {
columnWidth: '.news-box',
itemSelector: '.news-box'
});
Maybe I can get an event handler in here? Tips?
Example code that replicates problem
<!--TABS-->
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<!--TAB CONTENT-->
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<!--DUMMY CONTENT FOR MAIN TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
<div id="menu1" class="tab-pane fade">
<!--DUMMY CONTENT FOR SECONDARY TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
</div>

Actual solution, based on your provided code:
var updateMasonry = function(){
$('.tab-pane.active').masonry({
itemSelector: '.well',
})
}
$('a[data-toggle="tab"]').on('shown.bs.tab', updateMasonry);
$(window).on('resize load', updateMasonry)
var updateMasonry = function(){
$('.tab-pane.active').masonry({
itemSelector: '.well',
})
}
$('a[data-toggle="tab"]').on('shown.bs.tab', updateMasonry);
$(window).on('resize load', updateMasonry)
/* you don't need this css */
#media (min-width: 700px) {
.container {margin-top: 80px;}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.0/masonry.pkgd.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>
<!--TAB CONTENT-->
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<!--DUMMY CONTENT FOR MAIN TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
<div id="menu1" class="tab-pane fade">
<!--DUMMY CONTENT FOR SECONDARY TAB-->
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title title title title title title title title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title</h4>
</div>
<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 well well-sm">
<img src="https://www.bypeople.com/wp-content/uploads/2016/07/css-stack-overflow-animated-logo.jpg" class="img-responsive" />
<h4>title title title title title title title</h4>
</div>
</div>
</div>
</div>
</div>
<!--TABS-->
Initial answer, unfolded...
The <script> tag you posted will be run when it is met. This means it will be executed when:
your DOM object has not yet been fully constructed
your images haven't loaded (because DOM building happens much faster than loading images).
That's why you need to push the execution of your code on the window.load event, which happens when all assets finished loading:
window.onload = function() {
var msnry = new Masonry('.row', {
columnWidth: '.news-box',
itemSelector: '.news-box'
});
};
Also, I'm not entirely sure pasing a selector to columnWidth param is valid. I think it can only take width-like values (you can go 25% to avoid pixels). My guess is it's currently ignored. It also doesn't make much sense, since you're giving it the width of the elements you're resizing...
Further details.
From comments, it results you're trying to apply .masonry() to content placed in inactive tabs. In most tabs mechanisms, this means the tab container has display:none, which makes it not rendered and its width will return 0. Because masonry() uses the container's width to calculate the columns, and place the items, it does work, but all the columns have 0 width. Here's what you probably want to do.
Step 1. Place your masonry init method inside a function, so you can call it when you need it:
var massonryInit = function() {
var msnry = new Masonry('.row', {
columnWidth: '.news-box',
itemSelector: '.news-box'
});
Step 2. Look in the documentation of whatever tabs you are using for a callback method run on tab contents after the tab is shown. If they were Bootstrap tabs we would be talking about shown.bs.tab event, but I know you're not using Bootstrap because you're not using jQuery.
On that method you'll need to call your newly declared massonryInit() function:
var yourTab = document.querySelector('yourTabSelectorHere');
yourTab.addEventListener("yourTabWasRenderedEvent", masonryInit);
Note the above method will only work on a single, specific tab, returned by yourTabselectorHere. If that selector matches more than one element, the event will only be added to first match. To add it to all, you need .querySelectorAll() instead of .querySelector() and you'll need to run a javascript for on that collection and add the event to each.
By default, JavaScript is pretty verbose. That's why jQuery is so popular. It reduces writing common methods and tasks to much shorter syntax. All the above, using jQuery would be:
var masonryInit = function(){
$('.row').masonry({
itemSelector: '.news-box',
});
}
$('yourTabSelectorHere').on('yourTabWasRenderedEvent', masonryInit);
... and it would work on multiple tabs. No for loop needed. It would be internally applied by jQuery.
Adding to the great explanation above, this article is a great read:
https://www.sitepoint.com/bootstrap-tabs-play-nice-with-masonry/

The best - simple solution i find is to destroy and initialized:
Demo (Tabby.js & Masonry): https://codepen.io/ezra_siton/pen/KOLdBO?editors=1111
Removes the Masonry functionality completely. destroy will return the
element back to its pre-initialized state.
$grid.masonry("destroy");
$grid.masonry(masonryOptions);
Flow (Use this with your tabs code): **Click on tabX show contectX - destroy gridX than reload gridX - **works like magic without any complex tricks (Like timeout or resize) :)
The idea comes from official docs (Toggle Masonry):
Masonry - destroy
Codepen: https://codepen.io/desandro/pen/jPyoRE
Docs: https://masonry.desandro.com/methods.html#destroy
Why not using "layout" (reload)?
Because this idea will work only if you change the grid (Append/prepended item, change elements size and so on).
// trigger layout after item size changes
$grid.masonry('layout');
Example (toggle class and update layout):
https://masonry.desandro.com/methods.html#layout-masonry

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.

Targeting next Image that is inside a col class - javascript

You can use jQuery for this since you already using it for bootstrap $(this).parent().siblings().find("img") You can use Javascript as well as follow this.parentElement.nextElementSibling.children[0]; Where children[0] means first child element

Related

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

javscript onclick() replace images

How can i display fixed number of images in a row on different devices

Masonry and dynamic tabs

how to toggle each div

Categories

Resources