I am trying to create a JS carousel, and it is somewhat working, but not quite. After I clicked on the 'right' button, it slides to the second slide, but when I click it again, it gives the error 'cannot read properties of undefined (reading 'add). This goes for the adding of the 'active' class to the nextSlide I presume, but I can't seem to grasp what I am doing wrong. Also gives the error 'Cannot read properties of null (reading 'nextElementSibling')' when I tried to click to the third slide.
// CAROUSEL
const carousel = document.querySelector(".cards-wrapper");
const slides = [...carousel.children];
const nextButton = document.querySelector(".button-right");
const previousButton = document.querySelector(".button-left");
let slideWidth = slides[0].getBoundingClientRect();
function positionSlides(slides) {
for (let index = 0; index < slides.length; index++) {
slides[index].style.left = slideWidth * index + "px";
}
}
positionSlides(slides);
nextButton.addEventListener("click", () => {
const currentSlide = carousel.querySelector(".active");
const nextSlide = currentSlide.nextElementSibling.getBoundingClientRect();
const position = nextSlide.width;
console.log(position);
carousel.style.transform = `translateX(-${position}px)`;
currentSlide.classList.remove("active");
nextSlide.classList.add("active");
});
<div class="carousel">
<div class="cards-wrapper">
<div class="card active">
<picture>
<img src="https://s3.envato.com/files/158241052/1.jpg" alt="" />
</picture>
<h3>Slide 1</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
perspiciatis cumque consectetur vero eaque inventore fuga, nobis
reiciendis repudiandae, eius quo odio rem, esse saepe fugiat
quos deserunt dignissimos dolorem.
</p>
</div>
<div class="card">
<picture>
<img src="https://s3.envato.com/files/158241052/1.jpg" alt="" />
</picture>
<h3>Slide 2</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
perspiciatis cumque consectetur vero eaque inventore fuga, nobis
reiciendis repudiandae, eius quo odio rem, esse saepe fugiat
quos deserunt dignissimos dolorem.
</p>
</div>
<div class="card">
<picture>
<img src="https://s3.envato.com/files/158241052/1.jpg" alt="" />
</picture>
<h3>Slide 3</h3>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Id
perspiciatis cumque consectetur vero eaque inventore fuga, nobis
reiciendis repudiandae, eius quo odio rem, esse saepe fugiat
quos deserunt dignissimos dolorem.
</p>
</div>
</div>
<button class="button-left">left</button>
<button class="button-right">right</button>
<div class="carousel-nav">
<button class="active">1</button>
<button>2</button>
<button>3</button>
</div>
</div>
Any thoughts?
Related
Well, what I need is so complex for me that I can't even explain what I want.
I have a main section, where I need this main section to scroll between the main sections.
Inside the first main section I have another section and I need it to scroll independently of the main section, i.e. only this section scrolls.
Can anyone help me with this?
const prevBtn = document.getElementById("prev-btn");
const nextBtn = document.getElementById("next-btn");
const allSection = document.getElementsByTagName("section");
const sections = [];
let count = 0;
for (let i = 0; i < allSection.length; i++) {
let sectionArr = document.getElementById(`section-${i + 1}`);
sections.push(sectionArr);
}
function next() {
prevBtn.classList.remove("disabled");
if (count < allSection.length - 1) {
sections[count].classList.add("d-none");
count++;
console.log(count);
sections[count].classList.remove("d-none");
}
if (count === allSection.length - 1) {
nextBtn.classList.add("disabled");
}
}
function prev() {
nextBtn.classList.remove("disabled");
if (count !== 0) {
sections[count].classList.add("d-none");
count--;
sections[count].classList.remove("d-none");
}
if (count === 0) {
prevBtn.classList.add("disabled");
}
}
#page-content {
width:100%;
display:flex;
justify-content:space-between;
}
#sect-one, #sect-two {
width:50%;
height: 500px;
background-color:red;
}
#media(max-width:768px) {
#page-content {
flex-direction: column;
}
#sect-one, #sect-two {
width:100%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Section, prev & next</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.6.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct"
crossorigin="anonymous"></script>
<script src="https://kit.fontawesome.com/7a83d58e46.js" crossorigin="anonymous"></script>
</head>
<body>
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<section id="section-1" class="container">
<main id='page-content'>
<section id='sect-one'>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis aut distinctio magni dolorem nobis illum
perferendis modi tempora inventore quis!</p>
</section>
<section id='sect-two'>
<section id="section-6" class="container">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 1</h2>
<div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis aut distinctio magni dolorem nobis illum
perferendis modi tempora inventore quis!</p>
</div>
</section>
<section id="section-7" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 2</h2>
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae iure iste fugit dolor dicta voluptate
magnam perferendis, beatae, ipsam id placeat magni voluptatem accusamus animi eum officiis atque hic
temporibus.</p>
</div>
</section>
<section id="section-8" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 3</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-9" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 4</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-10" class="container d-none">
<button id="prev-btn" class="btn" onclick="prev()">« Prev</button>
<button id="next-btn" class="btn" onclick="next()">Next »</button>
<h2>Section 5</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
</section>
</main>
</section>
<section id="section-2" class="container d-none">
<h2>Section 2</h2>
<div>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae iure iste fugit dolor dicta voluptate
magnam perferendis, beatae, ipsam id placeat magni voluptatem accusamus animi eum officiis atque hic
temporibus.</p>
</div>
</section>
<section id="section-3" class="container d-none">
<h2>Section 3</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-4" class="container d-none">
<h2>Section 4</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<section id="section-5" class="container d-none">
<h2>Section 5</h2>
<div>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sed amet suscipit omnis nisi nesciunt hic
expedita optio blanditiis, reiciendis fugit tempora distinctio odit cumque! Dolore eos ratione magnam
ducimus laboriosam natus vel officia, blanditiis illo ullam pariatur, delectus nostrum deleniti.</p>
</div>
</section>
<script src="script.js"></script>
</body>
</html>
I'm trying to copy HTML code to the clipboard similar to how Bootstrap does it on their website. Each code snippet (.html-code) has a button (.copy-btn) with an event listener that copies the code on click. The issue is no matter which button I click, it will always copy the very last code snippet in the htmlCodes array. I did forEach loops for both the code snippets and buttons, but how would I pair each button to its respective code snippet using vanilla js?
const htmlCodes = document.querySelectorAll(".html-code");
const copyBtns = document.querySelectorAll(".copy-btn");
copyBtns.forEach(copyBtn =>
copyBtn.addEventListener("click", function() {
htmlCodes.forEach(htmlCode => navigator.clipboard.writeText(htmlCode.value));
}))
img {
width: 100%;
}
<section class="widget-wrapper">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus ad est consectetur sunt eveniet ab corporis. Voluptates exercitationem dolorem aspernatur magnam sapiente cumque, nisi adipisci hic, laborum, porro iste rerum.</p>
<div class="visual-ex"><img src="https://via.placeholder.com/800x600" alt=""></div>
<div class="code-snippet">
<pre><code>
<textarea class="html-code"><div class="example-1">
</div></textarea></code></pre>
</div>
<button class="copy-btn">Copy code</button>
</section>
<section class="widget-wrapper">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus ad est consectetur sunt eveniet ab corporis. Voluptates exercitationem dolorem aspernatur magnam sapiente cumque, nisi adipisci hic, laborum, porro iste rerum.</p>
<div class="visual-ex"><img src="https://via.placeholder.com/800x600" alt=""></div>
<div class="code-snippet">
<pre><code>
<textarea class="html-code"><div class="example-2">
</div></textarea></code></pre>
</div>
<button class="copy-btn">Copy code</button>
</section>
<section class="widget-wrapper">
<h2>Heading</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Doloribus ad est consectetur sunt eveniet ab corporis. Voluptates exercitationem dolorem aspernatur magnam sapiente cumque, nisi adipisci hic, laborum, porro iste rerum.</p>
<div class="visual-ex"><img src="https://via.placeholder.com/800x600" alt=""></div>
<div class="code-snippet">
<pre><code>
<textarea class="html-code"><div class="example-3">
</div></textarea></code></pre>
</div>
<button class="copy-btn">Copy code</button>
</section>
**update: I've included the html below.
Maybe this could work:
const htmlCodes = document.querySelectorAll(".html-code");
const copyBtns = document.querySelectorAll(".copy-btn");
copyBtns.forEach((copyBtn, index) =>
copyBtn.addEventListener("click", function() {
navigator.clipboard.writeText(htmlCodes[index].value);
}
))
I prefer the forEach() method because it's less lines of code but for the sake of knowledge, here is how to do it using a for-loop.
const copyBtns = document.querySelectorAll(".copy-btn");
const htmlCodes = document.querySelectorAll(".html-code");
for (let i = 0; i < copyBtns.length; i++) {
copyBtns[i].addEventListener("click", () => {
htmlCodes[i].select();
navigator.clipboard.writeText(htmlCodes[i].value);
})
}
I have an accordion that basically works except for one detail. Instead of the usual arrow, which shows whether the accordion is closed or not, I have the text - "Open". I use innerHTML in Pure JS to change it to "Close". When I click on the button on the item that I want to close, everything works, but when I click on another item, I need the rest of the items to change the text to "Open", but this does not happen. My code is below and this is the link to the codepen
document.addEventListener("DOMContentLoaded", function(event) {
const accordionItems = document.querySelectorAll('.acc__item');
accordionItems.forEach((acc) => {
const btns = acc.querySelectorAll('.acc__button')
btns.forEach(btn => {
btn.addEventListener("click", () => {
if (acc.classList.contains('open') && btn.innerHTML !== "Open") {
btn.innerHTML = "Open";
} else {
btn.innerHTML = "Close";
}
accordionItems.forEach((item) => {
if (item !== acc) {
item.classList.remove("open");
}
});
acc.classList.toggle("open");
});
});
});
});
.acc__item {
border: 1px solid navy;
}
.acc__title {
display: flex;
justify-content: space-between;
}
.acc__content {
display: none;
}
.acc__button {
background-color: none;
width: 30%
}
.open .acc__content {
display: block;
}
<div class="acc">
<div class="acc__item">
<div class="acc__title">
<h4>Title 1</h4>
<button class="acc__button">Open</button>
</div>
<div class="acc__content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
</div>
</div>
<div class="acc__item">
<div class="acc__title">
<h4>Title 1</h4>
<button class="acc__button">Open</button>
</div>
<div class="acc__content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
</div>
</div>
<div class="acc__item">
<div class="acc__title">
<h4>Title 1</h4>
<button class="acc__button">Open</button>
</div>
<div class="acc__content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
</div>
</div>
<div class="acc__item">
<div class="acc__title">
<h4>Title 1</h4>
<button class="acc__button">Open</button>
</div>
<div class="acc__content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
</div>
</div>
Try to get the button inside the div and change the text like this
item.getElementsByTagName("button")[0].innerHTML = "Open";
Demo below:
document.addEventListener("DOMContentLoaded", function(event) {
debugger;
const accordionItems = document.querySelectorAll('.acc__item');
accordionItems.forEach((acc) => {
debugger;
const btns = acc.querySelectorAll('.acc__button')
btns.forEach(btn => {
btn.addEventListener("click", () => {
debugger;
if (acc.classList.contains('open') && btn.innerHTML !== "Open") {
btn.innerHTML = "Open";
} else {
btn.innerHTML = "Close";
}
accordionItems.forEach((item) => {
if (item !== acc) {
debugger;
item.classList.remove("open");
//getting the button by tag name and updating it
item.getElementsByTagName("button")[0].innerHTML = "Open";
}
});
acc.classList.toggle("open");
});
});
});
});
.acc__item {
border: 1px solid navy;
}
.acc__title {
display: flex;
justify-content: space-between;
}
.acc__content {
display: none;
}
.acc__button {
background-color: none;
width: 30%
}
.open .acc__content {
display: block;
}
<div class="acc">
<div class="acc__item">
<div class="acc__title">
<h4>Title 1</h4>
<button class="acc__button">Open</button>
</div>
<div class="acc__content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
</div>
</div>
<div class="acc__item">
<div class="acc__title">
<h4>Title 1</h4>
<button class="acc__button">Open</button>
</div>
<div class="acc__content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
</div>
</div>
<div class="acc__item">
<div class="acc__title">
<h4>Title 1</h4>
<button class="acc__button">Open</button>
</div>
<div class="acc__content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
</div>
</div>
<div class="acc__item">
<div class="acc__title">
<h4>Title 1</h4>
<button class="acc__button">Open</button>
</div>
<div class="acc__content">
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Necessitatibus nemo inventore, assumenda aliquam aut sed aspernatur pariatur velit vel, facere mollitia tempore ratione minima incidunt repudiandae veniam harum fuga laudantium.
</div>
</div>
I've created some clickable tabs but for some reason the tab content does not display on click. I can't see anything out of place with my code. Any ideas would be greatly appreciated. Thanks.
<div className="container-tabs">
<ul className="tablist">
<li data-tab-target="engage" className="active-tab tab">01</li>
<li data-tab-target="scope" className="tab">02</li>
<li data-tab-target="build" className="tab">03</li>
</ul>
<div className="tab-content py">
<div id="engage" data-tab-content className="active-tab">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam repudiandae animi rerum
quae porro molestias placeat iure nostrum doloribus.
</p>
</div>
<div id="scope" data-tab-content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sit iste, veritatis iusto nulla delectus
voluptatibus neque. Tenetur, aperiam itaque.
</p>
</div>
<div id="build" data-tab-content>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quas nulla, necessitatibus expedita illum
in numquam omnis tempora illo consequuntur.
</p>
</div>
</div>
</div>
const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContents => {
tabContents.classList.remove('active-tab')
})
tabs.forEach(tab => {
tab.classList.remove('active-tab')
})
tab.classList.add('active-tab')
target.classList.add('active-tab')
})
});
you can keep a variable with the selected tab, and go from there, also it's better to have only one listener on your tablist, i would set an id to <ul class="tablist"> for faster select.. something like this:
const tabs = document.getElementById("tablist");
let selected = document.querySelectorAll("[data-tab-target]")[0];
const tabContents = document.querySelectorAll("[data-tab-content]");
let selectedContent = tabContents[0];
tabs.addEventListener("click", (e) => {
selected.classList.remove("active-tab");
selected = e.target;
selected.classList.toggle("active-tab");
const index = [...selected.parentNode.children].indexOf(selected);
selectedContent.classList.remove("active-tab");
selectedContent = tabContents[index];
selectedContent.classList.toggle("active-tab");
});
.active-tab {
color: red;
}
<div class="container-tabs">
<ul class="tablist" id="tablist">
<li data-tab-target="engage" class="active-tab tab">01</li>
<li data-tab-target="scope" class="tab">02</li>
<li data-tab-target="build" class="tab">03</li>
</ul>
<div class="tab-content py">
<div id="engage" data-tab-content class="active-tab">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam repudiandae animi rerum quae porro molestias placeat iure nostrum doloribus.
</p>
</div>
<div id="scope" data-tab-content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sit iste, veritatis iusto nulla delectus voluptatibus neque. Tenetur, aperiam itaque.
</p>
</div>
<div id="build" data-tab-content>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quas nulla, necessitatibus expedita illum in numquam omnis tempora illo consequuntur.
</p>
</div>
</div>
Hello everyone I'm having a hard time trying to understand how to make this work.
I have 8 different divs, each one with an img used as button and same class (tm-img) and hidden divs with additional info. What I want is to have displayed only the img at the beginnig and when the user clicks one of the 8 images depending on the one they clicked the hidden divs from that image show. (Whats happening now is tha if I click on one image all hidden divs from all images show not just the one I clicked)
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' onclick='run()' src="/team_1.png" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<script>
function run(){
$('.tm-info').toggle();
$('.tm-full-info').toggle();
$('.tm-title').toggle();
}</script>
All other 7 divs look the same with different image and name (Rick).
Thanks in advance.
Example
Consider the following.
$(function() {
function revealFullInfo(event) {
var self = $(event.target);
var parent = self.closest(".tm-full-container");
$('.tm-info, .tm-full-info, .tm-title', parent).toggle();
}
$(".tm-img").click(revealFullInfo);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://dummyimage.com/100x150/000/fff.png" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
It's all a matter of using the correct selector and scope.
$('.tm-info, .tm-full-info, .tm-title', parent).toggle();
This is the same as:
parent.find('.tm-info, .tm-full-info, .tm-title').toggle();
This could be done using the keyword this: https://www.yogihosting.com/jquery-this/
.tm-info, .tm-full-info, .tm-title {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://via.placeholder.com/150" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<div class="tm-full-container">
<div class="team-member card-container blue-card">
<img class='tm-img' src="https://via.placeholder.com/150" alt="">
<h5 class="tm-title">Chef</h6>
<div class="tm-info">
<p class="tm-name">Rick Jones</p>
<p class="tm-position">Chef</p>
</div>
</div>
<div class="tm-full-info">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at
ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia
tempora temporibus perspiciatis? Assumenda?</p>
</div>
</div>
<script>
$('.tm-img').click(function(){
$(this).parent().parent().find('.tm-info').toggle();
$(this).parent().parent().closest('.tm-full-info').toggle();
$(this).parent().parent().closest('.tm-title').toggle();
});
</script>
You can do something like in below snippet . Use the this keyword so that the clicked element is triggered not all .
You can also for loop to run through all tags and trigger(toggle) clicked event
function funcRun(show) {
var showInfo = show.querySelector(".tm-tag-Info");
showInfo.classList.toggle("tm-tag-Info-Show")
}
.tm-tag-Info {
display: none
}
.tm-tag-Info-Show {
display: block
}
.tm-tag {
border: 2px solid red;
margin: 10px;
padding: 10px;
}
.imageFun {
width: 100px;
height: 100px
}
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>
<div class="tm-tag" onclick="funcRun(this)">
<h4 class="tm-tag-Hed">CV for BV</h4>
<span class="tm-tag-Info"><img alt="imageFun" src="https://www.hdnicewallpapers.com/Walls/Big/Rainbow/Rainbow_on_Mountain_HD_Image.jpg" class="imageFun"><br>Lorem ipsum dolor sit amet consectetur adipisicing elit. Error magnam aliquam similique at ipsam accusamus sed enim, in non ipsa excepturi reprehenderit fugit velit libero mollitia tempora temporibus perspiciatis? Assumenda?</span>
</div>