I've coded some tabs and it seems to work well, although I'm sure I can achieve this with much cleaner code! I'm just not sure how to do that at the moment. I would really appreciate some help with this one.
I'm not sure if its loops I want to use or something completely different?
The way I've done it obviously works but it just seem unnecessary and messy, after this the next step is to add in a transition effect as the tabs come down. I'm not sure if this will even allow me to do that.
function myFunction() {
var a = document.getElementById("results1");
var b = document.getElementById("results2");
var c = document.getElementById("results3");
var d = document.getElementById("title1");
var e = document.getElementById("title2");
var f = document.getElementById("title3");
if (a.style.display === "none") {
a.style.display = "block";
b.style.display = "none";
c.style.display = "none";
d.style.backgroundColor = "#005FAA";
e.style.backgroundColor = "lightgrey";
f.style.backgroundColor = "lightgrey";
}
else {
a.style.display = "none";
d.style.backgroundColor = "lightgrey";
}
}
function myFunction1() {
var a = document.getElementById("results1");
var b = document.getElementById("results2");
var c = document.getElementById("results3");
var d = document.getElementById("title1");
var e = document.getElementById("title2");
var f = document.getElementById("title3");
if (b.style.display === "none") {
a.style.display = "none";
b.style.display = "block";
c.style.display = "none";
d.style.backgroundColor = "lightgrey";
e.style.backgroundColor = "#005FAA";
f.style.backgroundColor = "lightgrey";
}
else {
b.style.display = "none";
e.style.backgroundColor = "lightgrey";
}
}
function myFunction2() {
var a = document.getElementById("results1");
var b = document.getElementById("results2");
var c = document.getElementById("results3");
var d = document.getElementById("title1");
var e = document.getElementById("title2");
var f = document.getElementById("title3");
if (c.style.display === "none") {
a.style.display = "none";
b.style.display = "none";
c.style.display = "block";
d.style.backgroundColor = "lightgrey";
e.style.backgroundColor = "lightgrey";
f.style.backgroundColor = "#005FAA";
}
else {
c.style.display = "none";
f.style.backgroundColor = "lightgrey";
}
}
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<div class="container">
<div id="title1" class="title" onclick="myFunction()">
<h4>Item 1</h4>
</div>
<div id="title2" class="title" onclick="myFunction1()">
<h4>Item 2</h4>
</div>
<div id="title3" class="title" onclick="myFunction2()">
<h4>Item 3</h4>
</div>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>
Maybe something like this? You are already using JQuery, so maybe make it modular and use it to help with your transition down effects (you can transition them up too if you'd like).
const tabs = {
animating: false,
toggleResults: function(thatTab) {
const thatResult = $(`[data-title="${thatTab.attr('id')}"]`);
thatTab.toggleClass('activeTab');
thatResult.toggleClass("openedResult");
tabs.animating = true;
thatResult.slideToggle("fast", function() {
tabs.animating = false;
});
},
init: function() {
$(".title").click(function() {
const thatTab = $(this);
const openedResult = $('.openedResult');
const thatTabId = thatTab.attr("id");
const openedResultTitle = openedResult.data('title');
if (!tabs.animating) {
$('.activeTab').removeClass('activeTab');
openedResult.removeClass('openedResult').hide();
if (thatTabId !== openedResultTitle) {
tabs.toggleResults(thatTab);
}
}
});
}
};
$(function() {
tabs.init();
});
body {
margin: 0;
}
.container {
display: flex;
justify-content: space-between;
width: 100%;
}
.title {
background-color: lightgrey;
flex-basis: 32%;
transition: background-color 0ms;
text-align: center;
color: white;
padding: 30px;
box-sizing: border-box;
}
.activeTab {
background-color: #005faa;
transition: background-color 100ms;
}
.results {
background-color: #005faa;
display: none;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div id="title1" class="title">
<h4>Item 1</h4>
</div>
<div id="title2" class="title">
<h4>Item 2</h4>
</div>
<div id="title3" class="title">
<h4>Item 3</h4>
</div>
</div>
<div class="results" data-title="title1">Item 1</div>
<div class="results" data-title="title2">Item 2</div>
<div class="results" data-title="title3">Item 3</div>
Try this , you can call same function on all three divs with passing their ids to find the current id.
<!DOCTYPE html>
<style type="text/css">
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
.active{
display = "block"
}
.inactive{
display : "none"
backgroundColor:"#005FAA"
}
</style>
<div class="container">
<div id="title1" class="title" onclick="ActivateTab(1)">
<h4>Item 1</h4>
</div>
<div id="title2" class="title" onclick="ActivateTab(2)">
<h4>Item 2</h4>
</div>
<div id="title3" class="title" onclick="ActivateTab(3)">
<h4>Item 3</h4>
</div>
<button onclick="ActivateTab(2)">Test</button>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>
<script>
function ActivateTab(id){
let results = document.querySelectorAll(".results")
let titles = document.querySelectorAll(".title")
results.forEach((elementResut,index) =>{
let elementTitle = titles[index];
if(elementResut.id === "results"+id
&& elementResut.style.display === "none")
{
elementResut.style.display = "block";
elementTitle.style.backgroundColor = "#005FAA";
}
else{
elementResut.style.display = "none";
elementTitle.style.backgroundColor = "lightgrey";
}
});
}
</script>
Here is one possible clean-up:
function myFunction(title) {
var results = [...document.getElementsByClassName("results")]
results.forEach(function(r) {
if (title.dataset.for == r.id) {
r.style.display = "block";
} else {
r.style.display = "none";
}
});
var titles = [...document.getElementsByClassName("title")]
titles.forEach(function(t) {
if (t == title) {
t.style.backgroundColor = "#005FAA"
} else {
t.style.backgroundColor = "lightgrey"
}
});
}
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<div class="container">
<div id="title1" data-for="results1" class="title" onclick="myFunction(this)">
<h4>Item 1</h4>
</div>
<div id="title2" data-for="results2" class="title" onclick="myFunction(this)">
<h4>Item 2</h4>
</div>
<div id="title3" data-for="results3" class="title" onclick="myFunction(this)">
<h4>Item 3</h4>
</div>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>
I replaced your three functions with one function that accepts a parameter representing the title element. In the event handler, we just pass this to that function. Then in the function, we loop over the things that might have to change (the title and results nodes) testing as we do whether we're working with the matching element or a different one and choosing behavior based on that.
To link the title elements with the results one, I add a data-for attribute to it. There are many other ways this could be done, including using regular expressions to find the basic id (title2 ~> 2, results2 ~> 2 for instance) and matching on those. But this should get you going.
There is more clean-up I would probably do on this, but this should offer significant simplification.
Update
A comment pointed out that the above did not allow for total tab deselection. Given that, it seems better to refactor a bit more and use the shared base id approach. Here is another version written that way:
function myFunction(title) {
var id = title.id.match(/^\D*(\d+)$/)[1]
var hidden = document.getElementById(`results${id}`).style.display !== 'block';
[...document.getElementsByClassName("results")].forEach(function(r) {
r.style.display = "none";
});
[...document.getElementsByClassName("title")].forEach(function(t) {
t.style.backgroundColor = "lightgrey";
});
if (hidden) {
document.getElementById(`results${id}`).style.display = 'block';
document.getElementById(`title${id}`).style.backgroundColor = '#005FAA';
}
}
body{
margin: 10px;}
.title{
background-color:lightgrey;
width: 32%;
float: left;
text-align: center;
text-decoration:none;
color:white;
margin-right: 2%;
padding: 30px;
box-sizing: border-box;
}
.title:last-child{
margin-right:0px;
width:32%;}
.results{
background-color:#005FAA;
float:left;
width: 100%;
color: white;
padding: 30px;
box-sizing: border-box;
}
<div class="container">
<div id="title1" class="title" onclick="myFunction(this)">
<h4>Item 1</h4>
</div>
<div id="title2" class="title" onclick="myFunction(this)">
<h4>Item 2</h4>
</div>
<div id="title3" class="title" onclick="myFunction(this)">
<h4>Item 3</h4>
</div>
</div>
<div class="results" id="results1" style="display:none;">Item 1</div>
<div class="results" id="results2" style="display:none">Item 2</div>
<div class="results" id="results3" style="display:none">Item 3</div>
Related
I'm a beginner in javascript so I'm still learning but I have the impression that my code is too repetitive but I don't know how to improve it, moreover I try to apply the same code to the same html element which have the same id or the same class but it doesn't work every time it applies only to the first element.
Thanks in advance to those who will help me.
<body>
<section>
<div id="prj1" class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div id="projet1">
<a>c'est la div 1</a>
</div>
</div>
<div id="prj2" class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div id="projet2">
<a>c'est la div 2</a>
</div>
</div>
<div id="prj3" class="projet-contain">
<div class="preview">
<a >Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div id="projet3">
<a>c'est la div 3</a>
</div>
</div>
</section>
</body>
<style> .projet-contain{
display: flex;
flex-direction: column;
margin-bottom: 50px;
width: auto;
height: auto;
background: radial-gradient(circle, rgba(238,174,202,0.200) 0%, rgba(148, 188, 233, 0.200) 100%);;
border-radius: 10px 10px 10px 10px;
padding: 10px;
user-select: none;
}
.preview{
display: flex;
justify-content: space-between;
align-items: center;
}
section >div>div >a {
text-decoration: none;
color: white;
}
.convertigo{
width: 10vw;
}
.arrow-down {
transition: transform 0.5s;
width: 1.5vw;
-webkit-filter: invert(100%); /* safari 6.0 - 9.0 */
filter: invert(100%);
}
.rotate-arrow {
transform: rotate(180deg);
}
</style>
<script>
const projet1 = document.getElementById("projet1");
const projet2 = document.getElementById("projet2");
const projet3 = document.getElementById("projet3");
const prj = document.getElementById("prj");
var arrow = document.querySelectorAll(".arrow-down")[0]
projet1.style.display = "none";
projet2.style.display = "none";
projet3.style.display = "none";
prj1.onclick = function () {
if (projet1.style.display !== "none") {
projet1.style.display = "none";
arrow.classList.toggle('rotate-arrow')
} else {
projet1.style.display = "flex";
arrow.classList.toggle('rotate-arrow')
}
console.log("prj1");
};
prj2.onclick = function () {
if (projet2.style.display !== "none") {
projet2.style.display = "none";
arrow.classList.toggle('rotate-arrow')
} else {
projet2.style.display = "flex";
arrow.classList.toggle('rotate-arrow')
}
console.log("prj2");
};
prj3.onclick = function () {
if (projet3.style.display !== "none") {
projet3.style.display = "none";
arrow.classList.toggle('rotate-arrow')
} else {
projet3.style.display = "flex";
arrow.classList.toggle('rotate-arrow')
}
console.log("pr3");
};
</script>
My HTML code has the following structure:
<a class='card'...<a/>
<div id = "divone" class="card__background" ... </div>
with four respective cards.
When one of the divs with class='card' is clicked. The JavaScript code is supposed to hide the 'class="card__background" inside the other class='card' divs. I already have a script code that doesn't work.
Why would that be?
I am looking to fix my JavaScript code to make it work
function imagechange(divid) {
var x = document.getElementById(divid);
if (x == "divone") {
x.style.display = "block";
divtwo.style.display = 'none';
divthree.style.display = 'none';
divfour.style.display = 'none';
} else if (x == "divtwo";) {
x.style.display = "block";
divone.style.display = 'none';
divthree.style.display = 'none';
divfour.style.display = 'none';
} else if (x == "divthree";) {
x.style.display = "block";
divone.style.display = 'none';
divtwo.style.display = 'none';
divfour.style.display = 'none';
} else {
x.style.display = "block";
divone.style.display = 'none';
divtwo.style.display = 'none';
divthree.style.display = 'none';
}
}
:root {
--background-dark: #2d3548;
--text-light: rgba(255, 255, 255, 0.6);
--text-lighter: rgba(255, 255, 255, 0.9);
--spacing-s: 8px;
--spacing-m: 16px;
--spacing-l: 24px;
--spacing-xl: 32px;
--spacing-xxl: 64px;
--width-container: 1200px;
}
* {
border: 0;
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
height: 100%;
font-family: 'Montserrat', sans-serif;
font-size: 14px;
}
body {
height: 100%;
}
.hero-section {
align-items: flex-start;
background-image: linear-gradient(15deg, #0f4667 0%, #2a6973 150%);
display: flex;
min-height: 100%;
justify-content: center;
padding: var(--spacing-xxl) var(--spacing-l);
}
.card-grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: var(--spacing-l);
grid-row-gap: var(--spacing-l);
max-width: var(--width-container);
width: 100%;
}
#media(min-width: 540px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
}
}
#media(min-width: 960px) {
.card-grid {
grid-template-columns: repeat(4, 1fr);
}
}
.card {
list-style: none;
position: relative;
}
.card:before {
content: '';
display: block;
padding-bottom: 150%;
width: 100%;
}
.card__background {
background-size: cover;
background-position: center;
border-radius: var(--spacing-l);
bottom: 0;
filter: brightness(0.75) saturate(1.2) contrast(0.85);
left: 0;
position: absolute;
right: 0;
top: 0;
transform-origin: center;
trsnsform: scale(1) translateZ(0);
transition: filter 200ms linear, transform 200ms linear;
}
.card:hover .card__background {
transform: scale(1.05) translateZ(0);
}
.card-grid:hover>.card:not(:hover) .card__background {
filter: brightness(0.5) saturate(0) contrast(1.2) blur(20px);
}
.card__content {
left: 0;
padding: var(--spacing-l);
position: absolute;
top: 0;
}
.card__category {
color: var(--text-light);
font-size: 0.9rem;
margin-bottom: var(--spacing-s);
text-transform: uppercase;
}
.card__heading {
color: var(--text-lighter);
font-size: 1.9rem;
text-shadow: 2px 2px 20px rgba(0, 0, 0, 0.2);
line-height: 1.4;
word-spacing: 100vw;
}
<body>
<center>
<h1>My Favorite Things</h1>
<h2>Click on one to get started</h2>
</center>
<section class="hero-section">
<div class="card-grid">
<a class="card" onclick="imagechange('divone')" href="#">
<div id="divone" class="card__background" style="background-image: url(photo-one.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #1</p>
<h3 class="card__heading">Photo</h3>
</div>
</a>
<a class="card" onclick="imagechange('divtwo')" href="#">
<div id="divtwo" class="card__background" style="background-image: url(photo-two.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #2</p>
<h3 class="card__heading">Drawing</h3>
</div>
</a>
<a class="card" onclick="imagechange('divthree')" href="#">
<div id="divthree" class="card__background" style="background-image: url(photo-three.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #3</p>
<h3 class="card__heading">Sports & Lifting</h3>
</div>
</a>
<a class="card" onclick="imagechange('divfour')" href="#">
<div id="divfour" class="card__background" style="background-image: url(photo-four.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #4</p>
<h3 class="card__heading">Anime & Peaky Blinders</h3>
</div>
</a>
<div>
</section>
</body>
When you use var x = document.getElementById(divid); you are getting an object. So your condition never going to be true.
If you want to check the id just change condition to:
function imagechange(divid) {
const x = document.getElementById(divid)
const id = x.id
if (id === 'divone') {
x.style.display = 'block'
divtwo.style.display = 'none'
divthree.style.display = 'none'
divfour.style.display = 'none'
}
else if (id === 'divtwo') {
x.style.display = 'block'
divone.style.display = 'none'
divthree.style.display = 'none'
divfour.style.display = 'none'
}
else if (id === 'divthree') {
x.style.display = 'block'
divone.style.display = 'none'
divtwo.style.display = 'none'
divfour.style.display = 'none'
}
else {
x.style.display = 'block'
divone.style.display = 'none'
divtwo.style.display = 'none'
divthree.style.display = 'none'
}
}
1 - Please avoid using scripts straight in your HTML, this leads to unorganized code, with a horrible structure, and pessible for maintence.
2 - I deleted the code in the script tags and in place put
<script src="./site.js"></script>
In the same folder. Create a js file correspondent to the name of your html, in this case I used 'site.js'.
3- Use this code in your 'site.js' file.
var cards = ["card1", "card2", "card3", "card4"]
var divs = ["div1", "div2", "div3", "div4"]
cards.forEach(function (card, i){
document.getElementById(card).addEventListener('click', function(){
document.getElementById(divs[i]).style.display = 'block'
for (let j in divs){
if (i != j) document.getElementById(divs[j]).style.display = 'none'
}
})
})
4 - Delete all the onclick="imagechange()" of your card class tags and add id for them.
5 - Your HTML will be like this:
<body>
<center>
<h1>My Favorite Things</h1>
<h2>Click on one to get started</h2>
</center>
<section class="hero-section">
<div class="card-grid">
<a id = "card1" class="card" href="#">
<div id = "div1" class="card__background" style="background-image: url(photo-one.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #1</p>
<h3 class="card__heading">Photo</h3>
</div>
</a>
<a id = "card2" class="card" href="#">
<div id = "div2" class="card__background" style="background-image: url(photo-two.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #2</p>
<h3 class="card__heading">Drawing</h3>
</div>
</a>
<a id = "card3" class="card" href="#">
<div id = "div3" class="card__background" style="background-image: url(photo-three.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #3</p>
<h3 class="card__heading">Sports & Lifting</h3>
</div>
</a>
<a id = "card4" class="card" href="#">
<div id = "div4" class="card__background" style="background-image: url(photo-four.jpg)"></div>
<div class="card__content">
<p class="card__category">FAV #4</p>
<h3 class="card__heading">Anime & Peaky Blinders</h3>
</div>
</a>
<div>
</section>
<script src="./site.js"></script>
</body>
I am trying to do an event for hide and show with pure Javascript string parameters. I want to hide the other div once one of them is displayed (Let's say there are multiple div).
I tried to do it my own but I only managed to display once clicked. I had no idea how to hide the rest and only show that specified div.
Below is my code:
function show(id) {
if (document.getElementById('div_'+id).style.display == 'none') {
document.getElementById('div_'+id).style.display = 'block';
}
return false;
}
.title {
border:1px solid red;
display: inline-block;
font-size: 16px;
}
.content {
border: 1px solid blue;
display: inline-block;
font-size: 16px;
width: 300px;
}
<div class="title" onclick="show('first');">Title 1</div>
<div class="content" id="div_first" style="display:none;">Content 1
</div>
<div class="title" onclick="show('sec');">Title 2</div>
<div class="content" id="div_sec" style="display:none;">Content 2
</div>
You can use data-* attribute to store the target selector.
Don't use inline on* handlers. Keep your JS in one place.
Use CSS .is-active to manipulate the visibility state like display: block;
const showBtn = document.querySelectorAll('[data-show]');
const content = document.querySelectorAll('.content');
function show(ev) {
const selector = ev.currentTarget.getAttribute('data-show');
const elToShow = document.querySelectorAll(selector);
content.forEach(el => el.classList.remove('is-active'));
elToShow.forEach(el => el.classList.add('is-active'));
}
showBtn.forEach(el => el.addEventListener('click', show));
.title {
border:1px solid red;
display: inline-block;
font-size: 16px;
}
.content {
border: 1px solid blue;
display: inline-block;
font-size: 16px;
width: 300px;
display: none; /* ADD THIS */
}
.content.is-active{ /* ADD THIS */
display: block;
}
<div class="title" data-show="#content-1">Title 1</div>
<div class="title" data-show="#content-2">Title 2</div>
<div class="content" id="content-1">Content 1</div>
<div class="content" id="content-2">Content 2</div>
Just keep track of the id or element that is being displayed so that you can hide it if another one is selected. There's no need to iterate over them to hide them all, as you will know which one is being displayed, or to query the DOM each time to get the current one, as you can just keep a reference to it the first time.
I have updated the logic to toggle them if you click the same one twice and removed the inline event listeners, which I've moved to JS.
Note I have also replaced the <div>s for the .title elements with <button>s, as they will work better with keyboard navigation, mouse events and screen readers. You could also use <a>s instead.
let currentContentTab = null;
function show(e) {
// Using e.target you can get a reference to the clicked button:
const contentTab = document.getElementById(`div${ e.target.id.substring(3) }`);
const isHidden = contentTab.style.display === 'none';
// Toggle the panel we have just clicked (assuming you want to allow closing all of them again):
contentTab.style.display = isHidden ? 'block' : 'none';
// Hide the previous one, if any:
if (currentContentTab) {
currentContentTab.style.display = 'none';
}
// Keep track of the one we are currently displaying:
currentContentTab = isHidden ? contentTab : null;
}
// No need to have inline JS, you can bind the event listeners from JS:
for (const button of document.querySelectorAll('.title')) button.onclick = show;
body {
font-family: monospace;
font-size: 16px;
}
.title {
font-family: monospace;
font-size: 16px;
border: 1px solid red;
background: transparent;
padding: 8px;
outline: none;
}
.content {
border: 1px solid blue;
width: 300px;
padding: 8px;
margin-top: 8px;
}
<button class="title" id="tab1">Title 1</button>
<button class="title" id="tab2">Title 2</button>
<button class="title" id="tab3">Title 3</button>
<button class="title" id="tab4">Title 4</button>
<div class="content" id="div1" style="display:none; ">
Content 1...
</div>
<div class="content" id="div2" style="display:none; ">
Content 2...
</div>
<div class="content" id="div3" style="display:none; ">
Content 3...
</div>
<div class="content" id="div4" style="display:none; ">
Content 4...
</div>
If accessibility is important for you, you might want to add some ARIA attributes and the HTML hidden attribute:
let currentTab = null;
let currentPanel = null;
function show(e) {
const tab = e.target;
const id = tab.getAttribute('aria-controls');
const panel = document.getElementById(id);
// Toggle the panel we have just clicked:
tab.toggleAttribute('aria-selected');
panel.toggleAttribute('hidden');
// Hide the previous one, if any:
if (currentTab) {
currentTab.removeAttribute('aria-selected');
currentPanel.setAttribute('hidden', true);
}
// Keep track of the one we are currently displaying:
if (currentTab === tab) {
currentTab = null;
currentPanel = null;
} else {
currentTab = tab;
currentPanel = panel;
}
}
for (const button of document.querySelectorAll('.title')) button.onclick = show;
body {
font-family: monospace;
font-size: 16px;
}
.title {
font-family: monospace;
font-size: 16px;
border: 1px solid red;
background: transparent;
padding: 8px;
outline: none;
}
.content {
border: 1px solid blue;
width: 300px;
padding: 8px;
margin-top: 8px;
}
<button class="title" role="tab" aria-selected="true" aria-controls="div1" id="tab1">Title 1</button>
<button class="title" role="tab" aria-selected="true" aria-controls="div2" id="tab2">Title 2</button>
<button class="title" role="tab" aria-selected="true" aria-controls="div3" id="tab3">Title 3</button>
<button class="title" role="tab" aria-selected="true" aria-controls="div4" id="tab4">Title 4</button>
<div class="content" id="div1" role="tabpanel" aria-labelby aria-labelledby="tab1" hidden>
Content 1...
</div>
<div class="content" id="div2"role="tabpanel" aria-labelby aria-labelledby="tab2" hidden>
Content 2...
</div>
<div class="content" id="div3"role="tabpanel" aria-labelby aria-labelledby="tab3" hidden>
Content 3...
</div>
<div class="content" id="div4"role="tabpanel" aria-labelby aria-labelledby="tab4" hidden>
Content 4...
</div>
This JS code will grab all .content divs and will hide them unless it's the one we clicked.
function show(id) {
const el = document.getElementById('div' + id);
if (el.style.display == 'none') {
el.style.display = 'block';
}
const otherEls = document.querySelectorAll('.content');
otherEls.forEach(function (elItem) {
if (el !== elItem) {
elItem.style.display = 'none';
}
});
return false;
}
My solution as the following:
function show(id)
{
var divs=document.getElementsByClassName("content");
for (i=0;i<divs.length;i++)
{
divs[i].style.display='none';
}
document.getElementById('div_'+id).style.display = 'block';
}
.title {
border:1px solid red;
display: inline-block;
font-size: 16px;
}
.content {
border: 1px solid blue;
display: inline-block;
font-size: 16px;
width: 300px;
}
<div class="title" onclick="show('first');">Title 1</div>
<div class="content" id="div_first" style="display:none;">Content 1
</div>
<div class="title" onclick="show('sec');">Title 2</div>
<div class="content" id="div_sec" style="display:none;">Content 2
</div>
I am building a page with 3 buttons, each opening a different div-element. What I want, is to show just one div at the time. So when one div is opened, the other div should close.
I managed to create the buttons each opening a different div-element. But I cannot figure out a way to automatically close the div when other div is opened.
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
var content3 = document.getElementById("content3");
content1.style.display = "none";
content2.style.display = "none";
content3.style.display = "none";
button1.addEventListener("click", showContent1);
button2.addEventListener("click", showContent2);
button3.addEventListener("click", showContent3);
function showContent1() {
if (content1.style.display !== "none") {
content1.style.display = "none"
} else {
content1.style.display = "block";
}
}
function showContent2() {
if (content2.style.display !== "none") {
content2.style.display = "none"
} else {
content2.style.display = "block";
}
}
function showContent3() {
if (content3.style.display !== "none") {
content3.style.display = "none"
} else {
content3.style.display = "block";
}
}
#button1,
#button2,
#button3 {
width: 50px;
height: 50px;
background: lightblue;
margin: 5px;
cursor: pointer;
}
#content1,
#content2,
#content3 {
width: 100px;
height: 50px;
background: blue;
color: white;
margin: 5px;
}
<div id="button1">button 1</div>
<div id="button2">button 2</div>
<div id="button3">button 3</div>
<div id="content1">content 1</div>
<div id="content2">content 2</div>
<div id="content3">content 3</div>
You can cut down your code to something like this:
$("[id^=button]").click(function() {
var id = $(this).attr("id").replace("button", "")
$("#content" + id).toggle();
});
The code below will only allow 1 div to show at the time.
$("[id^=button]").click(function() {
var id = $(this).attr("id").replace("button", "");
$("[id^=content]").hide()
$("#content" + id).show();
});
Here we are using the ^ to say that we want all element starting with button to trigger the click event.
Demo
$("[id^=button]").click(function() {
var id = $(this).attr("id").replace("button", "")
$("#content" + id).toggle();
});
#button1,
#button2,
#button3 {
width: 50px;
height: 50px;
background: lightblue;
margin: 5px;
cursor: pointer;
}
#content1,
#content2,
#content3 {
width: 100px;
height: 50px;
background: blue;
color: white;
margin: 5px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="button1">button 1</div>
<div id="button2">button 2</div>
<div id="button3">button 3</div>
<div id="content1">content 1</div>
<div id="content2">content 2</div>
<div id="content3">content 3</div>
Here is a canonical way to do this.
Please study and look at where I delegate and have added classes
Use toggle() in the jQuery example to open AND close on click
jQuery:
$(".button").on("click", function(e) {
$(".content").hide();
$("#" + $(this).data("id")).show(); // or .toggle()
});
.button {
width: 50px;
height: 50px;
background: lightblue;
margin: 5px;
cursor: pointer;
}
.content {
width: 100px;
height: 50px;
background: blue;
color: white;
margin: 5px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button" data-id="content1">button 1</div>
<div class="button" data-id="content2">button 2</div>
<div class="button" data-id="content3">button 3</div>
<div class="content" id="content1">content 1</div>
<div class="content" id="content2">content 2</div>
<div class="content" id="content3">content 3</div>
Vanilla JS
document.getElementById("nav").addEventListener("click", function(e) {
var tgt = e.target;
if (tgt.matches(".button")) {
document.querySelectorAll(".content").forEach(function(div) { // a simple for loop is needed for older IE
div.style.display = "none";
});
// Here I just show. If you want to toggle, you could use classList.toggle
document.getElementById(tgt.getAttribute("data-id")).style.display = "block";
}
});
.button {
width: 50px;
height: 50px;
background: lightblue;
margin: 5px;
cursor: pointer;
}
.content {
width: 100px;
height: 50px;
background: blue;
color: white;
margin: 5px;
display: none;
}
<div id="nav">
<div class="button" data-id="content1">button 1</div>
<div class="button" data-id="content2">button 2</div>
<div class="button" data-id="content3">button 3</div>
</div>
<div class="content" id="content1">content 1</div>
<div class="content" id="content2">content 2</div>
<div class="content" id="content3">content 3</div>
You can even create a tab system without any javascript at all, using the radio button css trick.
If a radio button is checked, then the next div is displayed, using the sibling selector: ~.
input{
display: none;
}
label{
display: inline-block;
padding: 3px;
border: 1px solid #aaa;
}
label:hover{
cursor: pointer;
}
.display{
display: none;
}
[type=radio]:checked ~ .display{
display: block;
}
<section>
<label for="div1">Show div 1</label>
<label for="div2">Show div 2</label>
<label for="div3">Show div 3</label>
</section>
<section>
<input type="radio" id="div1" name="tab-nav" checked />
<div class="display">
Text from div 1.
</div>
</section>
<section>
<input type="radio" id="div2" name="tab-nav" />
<div class="display">
Text from div 2. It's cool.
</div>
</section>
<section>
<input type="radio" id="div3" name="tab-nav" />
<div class="display">
Text from div 3. Definitely a cool css trick.
</div>
</section>
Here's another src and it's demo.
//find all buttons
document.querySelectorAll("button[data-target]").forEach(el => {
//put a click event on each button
el.addEventListener("click", ev => {
//when clicked, hide all divs
let divs = document.getElementsByClassName("my-div");
for (let div of divs) {
div.style = "display: none;";
}
//then show the div that this button should be showing
//by grabbing it's id from the data-target attribute and setting it's style
document.getElementById(el.getAttribute("data-target")).style = "display: block;";
});
});
.my-div {
display: none;
}
<button data-target="div1">div1</button>
<button data-target="div2">div2</button>
<button data-target="div3">div3</button>
<div class="my-div" id="div1">content 1</div>
<div class="my-div" id="div2">content 2</div>
<div class="my-div" id="div3">content 3</div>
Please refer to Accordion, if that is what you are ultimately trying to achieve.
Remove the condition in the button's click event if you do not want to hide the same content on second click.
SOLUTION:
button1.addEventListener("click", () => activeDiv = (activeDiv === "content1") ? "": "content1");
button2.addEventListener("click", () => activeDiv = (activeDiv === "content2") ? "": "content2");
button3.addEventListener("click", () => activeDiv = (activeDiv === "content3") ? "": "content3");
button1.addEventListener("click", openDivGroup);
button2.addEventListener("click", openDivGroup);
button3.addEventListener("click", openDivGroup);
var activeDiv = '';
function openDivGroup ($event) {
var contentIdArray = jQuery ("[id^=content]");
for (var i = 0; i < contentIdArray.length; i++) {
if (activeDiv === contentIdArray[i].id) contentIdArray[i].style.display = 'block';
else contentIdArray[i].style.display = 'none';
}
}
CODE SNIPPET:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
#button1,
#button2,
#button3 {
width: 50px;
height: 50px;
background: lightblue;
margin: 5px;
cursor: pointer;
}
#content1,
#content2,
#content3 {
width: 100px;
height: 50px;
background: blue;
color: white;
margin: 5px;
}
</style>
</head>
<body>
<div id="button1">button 1</div>
<div id="button2">button 2</div>
<div id="button3">button 3</div>
<div id="content1">content 1</div>
<div id="content2">content 2</div>
<div id="content3">content 3</div>
<script>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var content1 = document.getElementById("content1");
var content2 = document.getElementById("content2");
var content3 = document.getElementById("content3");
content1.style.display = "none";
content2.style.display = "none";
content3.style.display = "none";
button1.addEventListener("click", () => activeDiv = (activeDiv === "content1") ? "": "content1");
button2.addEventListener("click", () => activeDiv = (activeDiv === "content2") ? "": "content2");
button3.addEventListener("click", () => activeDiv = (activeDiv === "content3") ? "": "content3");
button1.addEventListener("click", openDivGroup);
button2.addEventListener("click", openDivGroup);
button3.addEventListener("click", openDivGroup);
var activeDiv = '';
function openDivGroup ($event) {
var contentIdArray = jQuery ("[id^=content]");
for (var i = 0; i < contentIdArray.length; i++) {
if (activeDiv === contentIdArray[i].id) contentIdArray[i].style.display = 'block';
else contentIdArray[i].style.display = 'none';
}
}
</script>
</body>
</html>
I need help to do a simple text slider in jQuery or JavaScript.
I need a slider with animation so that the text moves from right to left.
Within my code I have also pagination, where I need highlight which text is active.
This is all of what I have, I need to be very simple.
All answers on the internet are so complicated.
Can someone help me?
.active{
color:red;
}
<div class="buttons">
<button name="prev">Prev</button>
<button name="next">Next</button>
</div>
<div class="content">
<div class="slide">
<p>content od slide</p>
</div>
<div class="slide">
<p>content od slide</p>
</div>
<div class="slide">
<p>content od slide</p>
</div>
</div>
<div class="paginator">
<div class="pagin-tracker">1</div>
<div class="pagin-tracker active">1</div>
<div class="pagin-tracker">1</div>
</div>
You can try this one.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.slider {
}
.slider__wrap {
overflow: hidden;
}
.slide {
width: 100%;
display: inline-block;
text-align: center;
}
.content {
will-change: transform;
white-space: nowrap;
transition: transform 0.3s;
}
</style>
</head>
<body>
<div id="slider" class="slider">
<div class="buttons">
<button name="prev">Prev</button>
<button name="next">Next</button>
</div>
<div class="slider__wrap">
<div class="content" style="transform: translate(-100%);" data-active="1"> <!-- if you need to set initial position to the second slider, or you can use translate(0) to set it to the first slide -->
<div class="slide">
<p>content od slide 1</p>
</div>
<div class="slide">
<p>content od slide 2</p>
</div>
<div class="slide">
<p>content od slide 3</p>
</div>
</div>
</div>
<div class="paginator">
<div class="pagin-tracker">1</div>
<div class="pagin-tracker active">1</div>
<div class="pagin-tracker">1</div>
</div>
</div>
<script>
const slider = document.getElementById('slider');
const sliderWrap = slider.querySelector('.slider__wrap');
const sliderContent = sliderWrap.querySelector('.content');
const sliderButtons = slider.querySelector('.buttons');
const buttonPrev = sliderButtons.querySelector('button[name="prev"]');
const buttonNext = sliderButtons.querySelector('button[name="next"]');
const pages = Array.from(slider.querySelectorAll('.pagin-tracker'));
const pagesCount = pages.length;
const slidesCount = sliderContent.querySelectorAll('.slide').length;
let activeIndex = sliderContent.getAttribute('data-active');
const updatePaginator = () => {
for (let i = 0; i < pagesCount; i++) {
pages[i].classList.remove('active');
}
if (pages[activeIndex]) {
pages[activeIndex].classList.add('active');
}
};
const applyStyle = () => {
sliderContent.setAttribute('data-active', activeIndex);
sliderContent.style.cssText = `transform: translate(-${activeIndex * 100}%);`;
updatePaginator();
};
buttonPrev.addEventListener('click', () => {
if (activeIndex > 0) {
activeIndex--;
applyStyle();
}
}, false);
buttonNext.addEventListener('click', () => {
if (activeIndex < slidesCount - 1) {
activeIndex++;
applyStyle();
}
}, false);
</script>
</body>
</html>
You can use something like this and extend as per you requirement.
https://codepen.io/anon/pen/MqRpKg
HTML
<div class="slide-wrap">
<div class="slide-mask">
<ul class="slide-group">
<li class="slide">this</li>
<li class="slide">is</li>
<li class="slide">a</li>
<li class="slide">simple</li>
<li class="slide">slider</li>
</ul>
</div>
<div class="slider-nav">
<ul></ul>
</div>
</div>
JQuery:
var $slide = $('.slide'),
$slideGroup = $('.slide-group'),
$bullet = $('.bullet')
var slidesTotal = ($slide.length - 1),
current = 0,
isAutoSliding = true;
$bullet.first().addClass('current');
var clickSlide = function() {
//stop auto sliding
window.clearInterval(autoSlide);
isAutoSliding = false;
var slideIndex = $bullet.index($(this));
updateIndex(slideIndex);
};
var updateIndex = function(currentSlide) {
if(isAutoSliding) {
if(current === slidesTotal) {
current = 0;
} else {
current++;
}
} else {
current = currentSlide;
}
$bullet.removeClass('current');
$bullet.eq(current).addClass('current');
transition(current);
};
var transition = function(slidePosition) {
var slidePositionNew = (slidePosition ) * 500;
$slideGroup.animate({
'left': '-' + slidePositionNew + 'px'
});
};
var autoSlide = window.setInterval(updateIndex, 2000);
$( "li.slide" ).each(function( index ) {
$('.slider-nav').append('<span class="bullet">'+index+'</span>');
});
var $bullet = $('.bullet');
$bullet.on( 'click', clickSlide);
CSS
body {
background: rgb(191, 76, 76);
}
/* slider
----------------------*/
.slide-wrap {
margin: 5% auto 0;
width: 540px;
}
.slide-mask {
position: relative;
overflow: hidden;
height: 100px;
}
.slide-group {
position: absolute;
top: 0px;
left: 0;
}
.slide {
display:inline-block;
height: 100px;
width:500px;
font: 100 90px/135px "lato";
font-size: 2em;
color: #fff;
text-align: center;
text-transform: uppercase;
}
/* nav
----------------------*/
.slide-nav {
text-align: center;
border: 1px solid red;
height: 30px;
color: red;
}
.slide-nav ul {
margin: 0;
padding: 0;
}
.slide-nav li {
border: 1px solid red;
width: 100px;
cursor: pointer;
color: red;
}
.slide-nav li.current {
background: rgb(144, 39, 39);
}
.slider-nav {
width: 300px;
text-alignt: center;
margin-left:40%;
}
span.bullet {
display:inline-block;
width: 30px;
cursor: pointer;
}