What I'm trying to accomplish is to make a list with headings and on click at one it will show up a little description about the heading.
So far it only opens but it doesn't close. I tried to manipulate classes with if statements as well as I was searching for a solution but without success.
js:
export default function openTitle() {
const colTitle = document.querySelectorAll('.col-title');
const colContainer = document.querySelector('.col-container');
const colContent = document.querySelectorAll('.col-content');
colContainer.addEventListener('click', function (e) {
const clicked = e.target.closest('.col-title');
if (!clicked) return;
document.querySelector(
`.operations__content--${clicked.dataset.tab}`
).style.display = 'block';
});
}
html:
<div class="col-container">
<div class="col">
<div class="col-title" data-tab="1">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--1">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="2">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--2">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="3">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--3">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="4">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--4">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt.
Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit
exercitationem.
</p>
</div>
</div>
</div>
Create a CSS class and use the classList API to toggle it:
element.classList.toggle('hidden')
function openTitle() {
const colContainer = document.querySelector('.col-container');
colContainer.addEventListener('click', function(e) {
const clicked = e.target.closest('.col-title');
if (!clicked) return;
document.querySelector(
`.operations__content--${clicked.dataset.tab}`
).classList.toggle('hidden');
});
}
openTitle();
.hidden {
display: none;
}
<div class="col-container">
<div class="col">
<div class="col-title" data-tab="1">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--1 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="2">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--2 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="3">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--3 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
<div class="col">
<div class="col-title" data-tab="4">
<h3>Lorem</h3>
<i class="fas fa-chevron-up"></i>
</div>
<div class="col-content operations__content--4 hidden">
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ab asperiores placeat mollitia deserunt. Iusto quidem quas quia error quos nam sequi voluptas, architecto, nulla vel atque libero et suscipit exercitationem.
</p>
</div>
</div>
</div>
Here's a minimal reproducable example using event delegation and [element].classList.toggle to toggle visibility.
document.addEventListener("click", handle);
function handle(evt) {
const origin = evt.target;
const item = origin.closest("[data-item]");
if (item) {
item.querySelector(".txt").classList.toggle("show");
}
}
body {
font: normal 12px/15px Lato, verdana, arial;
margin: 2rem;
}
[data-item] {
margin-bottom: 1rem;
}
.header {
font-size: 1.3em;
font-weight: bold;
cursor: pointer;
}
.txt {
display: none;
margin-top: 0.3rem;
}
.txt.show {
display: block;
}
<div data-item>
<div class="header">Header</div>
<div class="txt">Lorem ipsem etc</div>
</div>
<div data-item>
<div class="header"><i>Another</i> header </div>
<div class="txt">Ipsem Lorem etc</div>
</div>
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 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>
I was wondering if there is a way to swap the content of a html page with a nice fade in fade out effect using JS or jQuery.
In the HTML code I have below I cant to be able to swap out the section class="inner-wrapper" for some new content.
Would be great if you could help me out. :)
<div class="meny">
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper">
<article id="one-two">
<h2>Målet med vagnen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p>
</article>
<aside id="tablet2">
<hr>
<h2>Senaste nytt från vagnen</h2>
<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
</section>
Edit:
sorry for the bad post :P
This is what I would like to swap it for when i CLICK on one of the one-fourth divs
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper2">
<article id="one-two">
<h2>Recept</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi sit quas quam accusamus, quia facilis illo omnis repudiandae distinctio architecto sed, deleniti ducimus mollitia sequi repellendus. Distinctio rerum maiores rem.</p>
</article>
<aside id="tablet2">
<hr>
<img src="img/pannkakor.jpg" alt="">
</aside>
</section>
You can use fadeOut and fadein for this. fadeout/fadeIn also provide a callback function which will be fired once action is completed.
Read here
http://api.jquery.com/fadein/
and
http://api.jquery.com/fadeout/
$(".inner-wrapper").fadeOut( 3000, function() {
$(this).html("<div>Hello</div>");
$(".inner-wrapper").fadeIn(3000)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="meny">
<a href="#">
<section class="one-fourth" id="html">
<i class="fa fa-shopping-cart"><h3>Beställ</h3></i>
</section>
</a>
<a href="#">
<section class="one-fourth" id="social">
<i class="fa fa-list-ul"><h3>Recept</h3></i>
</section>
</a>
</div>
<!--övre delen slut-->
<!-- mitten-->
<section class="inner-wrapper">
<article id="one-two">
<h2>Målet med vagnen</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis repellat, distinctio alias expedita exercitationem maxime, dolores cumque rem beatae laudantium sint! Exercitationem perferendis, illum suscipit, cupiditate sit facere ullam harum.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum aliquam explicabo beatae quam. Officia adipisci voluptatibus explicabo corrupti quaerat, non, voluptatem consequatur repellat in sequi. Odit adipisci dolore, deserunt labore!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nesciunt eaque deleniti debitis inventore unde aliquid nemo, optio ipsam voluptatum, a, libero laborum? Dolore eaque quod ratione optio voluptatum omnis reiciendis.</p>
</article>
<aside id="tablet2">
<hr>
<h2>Senaste nytt från vagnen</h2>
<a class="twitter-timeline" data-width="500" data-height="600" href="https://twitter.com/ViktorParment">Tweets by ViktorParment</a> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
</aside>
</section>