Display only the nearest element with the given class - javascript

How can I change the code so that when I click on the reply-img, only the following element with the reply-form class is displayed, but the others are not displayed at the same time.
I have several elements with the reply-img class and I always want to display the closest element with the reply-form class
HTML blade.php
<div class="comments-form">
#foreach($comments as $comment)
<div class="comments">
...
<div class="reply-img">
<img src="{{asset('img/react.svg')}}" alt="">
</div>
</div>
...
<form class='login-form mmm ml-x reply-form'</form>
#endforeach
...
</div>
JS
<script>
// Get all image elements
var images = document.querySelectorAll(".reply-img");
// Attach a click event listener to each image
images.forEach(function(image) {
image.addEventListener("click", function() {
// Show all forms
var forms = document.querySelectorAll(".reply-form");
forms.forEach(function(form) {
form.style.display = "block";
});
});
});
</script>

You can use the image element's .parentElement twice to navigate up the tree to the <div class="comments">. Then use .nextElementSibling to get to the form element.
Like this:
const img = document.querySelector('img');
const form = img.parentElement.parentElement.nextElementSibling;
console.log(form.innerHTML);
<div class="comments">
<div class="reply-img">
<img src="https://via.placeholder.com/150" />
</div>
</div>
<form class='login-form mmm ml-x reply-form'>blah</form>

you will need to change your function so that it shows only the next form and not all of them:
images.forEach(function(image) {
image.addEventListener("click", function() {
let ele = image.parentNode.nextElementSibling;
while(ele){
if(ele.matches('.reply-form')){
ele.style.display = "block";
return;
}
ele = ele.nextElementSibling;
}
});
});

I find it cleaner to toggle a class on the comments to indicate the active comment. Then we can handle the forms with CSS.
Here's an example of that:
const comments = document.querySelectorAll('.comments');
document.querySelectorAll('.reply-img').forEach(img => img.addEventListener('click', function() {
comments.forEach(x => x.classList.remove('active-comment'));
this.parentElement.classList.add('active-comment');
}))
.reply-form {
width: 100px;
height: 50px;
background: lightblue;
margin: 10px 0;
}
.comments:not(.active-comment)+.reply-form {
display: none;
}
<div class="comments-form">
<div class="comments">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
...
<form class='login-form mmm ml-x reply-form'></form>
<div class="comments">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
...
<form class='login-form mmm ml-x reply-form'></form>
<div class="comments">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
<form class='login-form mmm ml-x reply-form'></form>
...
</div>
This can also be done without JavaScript, just CSS.
By adding the tabindex attribute to the comments, the comments get a focus state. Now we can use the focus state to toggle the display of the forms.
Note that in this case clicking on the comment will cause the form to display, not only clicking on the image.
.reply-form {
width: 100px;
height: 50px;
background: lightblue;
margin: 10px 0;
}
.comments:not(:focus)+.reply-form {
display: none;
}
<div class="comments-form">
<div class="comments" tabindex="0">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
...
<form class='login-form mmm ml-x reply-form'></form>
<div class="comments" tabindex="0">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
...
<form class='login-form mmm ml-x reply-form'></form>
<div class="comments" tabindex="0">
<div class="reply-img">
<img src="https://via.placeholder.com/50" alt="">
</div>
</div>
<form class='login-form mmm ml-x reply-form'></form>
...
</div>

Related

How toggle elements inside this intersection observer?

I have a few elements I want to toggle wth a function, but by some reason I can't make it work. When the toggle function is executed, the console logs "cannot read the property classList of Undefined". But if I log them before the function starts I can see the elements.
Javascript
const toggle = element => {
element.classList.toggle('toggle');
};
let numberOfProyects = document.getElementsByClassName('portfolio__item'),
proyects = [],
for (var i = 0; i < numberOfProyects.length; i++) {
proyects[i] = document.getElementById(`proyect${i+1}`);
console.log(proyects[i]);
new IntersectionObserver(()=>{
toggle(proyects[i])
},{threshold: .6}).observe(proyects[i]);
};
HTML
<div class="portfolio__item toggle" id="proyect1">
<h3 class="portfolio__item-title">Podomoro Timer</h3>
<img class="portfolio__item-img" src="assets/images/Captura de pantalla (316).png">
<div class="portfolio__item-links">
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://js-codetalker.github.io/Timer/" class="portfolio__item-links-overlay-link">
<img src="assets/images/world.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go proyect</p>
</a>
</div>
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://github.com/Js-codetalker/Timer" class="portfolio__item-links-overlay-link">
<img src="assets/images/github.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go github</p>
</a>
</div>
</div>
</div>
<div class="portfolio__item toggle" id="proyect2">
<h3 class="portfolio__item-title">Sample Restaurant</h3>
<img class="portfolio__item-img" src="assets/images/Captura de pantalla (317).png">
<div class="portfolio__item-links">
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://js-codetalker.github.io/restaurant-example/" class="portfolio__item-links-overlay-link">
<img src="assets/images/world.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go proyect</p>
</a>
</div>
<div class="overlay portfolio__item-links-overlay">
<a target="_blank" href="https://github.com/Js-codetalker/restaurant-example" class="portfolio__item-links-overlay-link">
<img src="assets/images/github.svg" class="portfolio__item-links-overlay-link-img">
<p class="portfolio__item-links-overlay-link-txt">Go github</p>
</a>
</div>
</div>
</div>
What I want is to create a different observer for each element in order to remove the class "toggle" when it reach the expected space in the viewport
(almost) Always use let instead of var when defining variables inside for loops
Also, you don't need store your elements in second array.
const toggle = element => {
element.classList.toggle('toggle');
console.log(element);
};
const proyects = document.getElementsByClassName('portfolio__item');
for (let i = 0; i < proyects.length; i++) {
new IntersectionObserver(() => {
toggle(proyects[i])
}, {
threshold: .6
}).observe(proyects[i]);
};
.container
{
border: 1px solid black;
resize: both;
overflow: auto;
width: 20em;
height: 10em;
}
.container > :after
{
content: attr(id) " class is " attr(class);
}
.container > :not(.toggle) {
background-color: pink;
}
.container >.toggle {
background-color: lightgreen;
}
<div class="container">
<div class="portfolio__item toggle" id="proyect1">
<h3 class="portfolio__item-title">Podomoro Timer</h3>
</div>
<div class="portfolio__item" id="proyect2">
<h3 class="portfolio__item-title">Sample Restaurant (has not toggle by default)</h3>
</div>
<div class="portfolio__item toggle" id="proyect3">
<h3 class="portfolio__item-title">test</h3>
</div>
<div class="portfolio__item toggle" id="proyect4">
<h3 class="portfolio__item-title">test</h3>
</div>
</div>

How do I stop this JS 'show and hide' button from revealing the content at first?

Basically, I have 3 images and once the button is clicked it displays those images, however, when the page is loading up, the button is already toggled on and displays the images, once you click on it the images go. So the button works, but it starts off with displaying the contents which is not what I want.
var a;
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
<div id="image">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>
You can assign a = 1 and make your div to display none.
HTML:
<div id="image" style="display: none">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
JS:
var a = 1;
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
You can use a class to define the style which you can toggle on clicking the button using DOMTokenList.toggle().
Also, I will suggest you to avoid inline event handler.
Demo:
document.querySelector('button').addEventListener('click', show_hide);
function show_hide()
{
document.getElementById("image").classList.toggle('showHide');
}
.showHide{
display: none;
}
<div id="image" class="showHide">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button>Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>
That's it just assign the value of 0 to the var before doing anything and call the function. It was that easy. I hope I solved your query you can run this code snippet to check if it works!
Thanks!
var a = 0;
show_hide()
function show_hide()
{
if(a==1)
{
document.getElementById("image").style.display="inline";
return a=0;
}
else
{
document.getElementById("image").style.display="none";
return a=1;
}
}
<div id="image">
<img class= "tree1" src="img/tree1.jpeg">
<img class= "tree2" src="img/tree2.jpeg">
<img class= "tree3" src="img/roots.jpeg">
</div>
<div>
<button onclick="show_hide()">Click to Reveal</button>
</div>
<script src="showhideelement.js"></script>

How to check if all the input values are equal to my data?

I have 32 items in my array, all of them have these properties: id, word, image. User has to guess what's in all the images and write their guess in inputs (so 32 inputs in total). I need to check if the input equals my arrays property "word" and then when clicked a button (type submit, all my pic's and inputs are in a form) display some text for example "Oops! Guess again" if wrong and "Yay! You got it correctly" if right. The text should appear below every input. I displayed all the pictures and inputs with a forEach, and i'm using bulma framework for this page:
const wordBox = info.forEach((words) => {
mainColumns.innerHTML += `
<div class="column is-one-quarter">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src=${words.image} alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<input class="input" id="text" type="text" placeholder="Įvesk žodį">
</div>
</div>
<div class="content">
Content
</div>
</div>
</div>
</div>`;
});
Any ideas?
This is how it should look like (the result should appear in content place)
Something like this
I use change instead of a button click
const info = [
{word:"flower",image:"flower.gif"},
{word:"boat",image:"boat.gif"}
];
const mainColumns = document.getElementById("mainColumns");
mainColumns.innerHTML = info.map(({image,word}) =>
`<div class="column is-one-quarter">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src=${image} alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<input class="input" data-word="${word}" type="text" placeholder="Įvesk žodį">
<span class="correct hide">Yay</span>
<span class="wrong hide">NOO</span>
</div>
</div>
<div class="content">
Content
</div>
</div>
</div>
</div>`).join("");
mainColumns.addEventListener("change",function(e) {
const correct = [...mainColumns.querySelectorAll("[data-word]")].map(input => {
if (input.value) {
const correct = input.value === input.dataset.word;
parent = input.closest("div");
parent.querySelector(".correct").classList.toggle("hide",!correct)
parent.querySelector(".wrong").classList.toggle("hide",correct);
return correct ? 1 : 0;
}
else return 0;
}).reduce((a,b)=>a+b);
document.getElementById("correct").innerText = correct;
})
#mainColumns { display:flex; }
.hide { display: none; }
<div id="mainColumns"></div>
Correct: <span id="correct"></span>
What you can do is to filter the word array with word from the input value. Then check if the length is equal zero, No match, if the length is greater than one, then there is a match.
const status = wordBox.filter(item => item.word === inputWord)
I'd move towards keeping the objects and the HTML separate, binding the HTML to the object and vice versa. This means including a couple more properties to your array elements.
let info = [{
image: 'flower.png',
word: 'flower',
content: '',
guess: ''
}];
function bindWords() {
info.forEach((words) => {
mainColumns.innerHTML = `
<div class="column is-one-quarter">
<div class="card">
<div class="card-image">
<figure class="image is-4by3">
<img src=${words.image} alt="Placeholder image">
</figure>
</div>
<div class="card-content">
<div class="media">
<div class="media-content">
<input class="input" data-word="${words.word}" type="text" placeholder="Įvesk žodį" value="${words.guess}">
</div>
</div>
<div class="content">
${words.content}
</div>
</div>
</div>
</div>`;
});
}
bindWords();
check.addEventListener('click', () => {
info = Array.from(document.querySelectorAll('.card')).map(el => ({
image: el.querySelector('img').src,
word: el.querySelector('.input').dataset.word,
guess: el.querySelector('.input').value,
content: el.querySelector('.input').value === el.querySelector('.input').dataset.word ?
'Correct' : 'Incorrect'
}));
bindWords();
});
<div id="mainColumns"></div>
<button id="check">Check Answers</button>

Javascript doesn't toggle the display of an element

So, I'm trying to obtain multiple slideshows on my website.
I have done almost everything, excepting the fact that when I press a picture, the modal of previews is showing, but the clicked image is not showing up. I have to use the buttons of the slideshow to go through them and make the first one to appear.
**
If you don't want to go along this whole code, here you can see what's happening: http://beta.eduardstefan.com
**
I am not trying to promote myself, I just think that I am not quite easy to understand without the example
So, my question, how can I make the first picture to show up when I press one, or why it's not happening, what is bad with my code?
My html:
<div class="portfolio-slideshow">
<a class="prev" onclick="slide(0,-1)">❮</a>
<div class="slide"> <img src="img/dailyui/008.png" class="slideimg_0" id="0" data-no="0"> </div>
<div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_0" id="1" data-no="0"> </div>
<div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_0" id="2" data-no="0"> </div>
<div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_0" id="3" data-no="0"> </div>
<a class="next" onclick="slide(0,1)">❯</a>
</div>
<div class="portfolio-slideshow">
<a class="prev" onclick="slide(2,-1)">❮</a>
<div class="slide"> <img src="img/dailyui/008.png" class="slideimg_2" id="0" data-no="2"> </div>
<div class="slide"> <img src="img/dailyui/007.jpg" class="slideimg_2" id="1" data-no="2"> </div>
<div class="slide"> <img src="img/dailyui/006.jpg" class="slideimg_2" id="2" data-no="2"> </div>
<div class="slide"> <img src="img/dailyui/003.jpg" class="slideimg_2" id="3" data-no="2"> </div>
<a class="next" onclick="slide(2,1)">❯</a>
</div>
<div class="imgpreview">
<i class="fa fa-close" onclick="closepreview()"></i>
<div class="slidepreview no_0">
<a class="prev" onclick="slide(1,-1)">❮</a>
<div class="slidep"> <img src="img/dailyui/008.png" class="slideimg_1" id="0"> </div>
<div class="slidep"> <img src="img/dailyui/007.jpg" class="slideimg_1" id="1"> </div>
<div class="slidep"> <img src="img/dailyui/006.jpg" class="slideimg_1" id="2"> </div>
<div class="slidep"> <img src="img/dailyui/003.jpg" class="slideimg_1" id="3"> </div>
<a class="next" onclick="slide(1,1)">❯</a>
</div>
<div class="slidepreview no_2">
<a class="prev" onclick="slide(3,-1)">❮</a>
<div class="slidep"> <img src="img/dailyui/008.png" class="slideimg_3" id="0"> </div>
<div class="slidep"> <img src="img/dailyui/007.jpg" class="slideimg_3" id="1"> </div>
<div class="slidep"> <img src="img/dailyui/006.jpg" class="slideimg_3" id="2"> </div>
<div class="slidep"> <img src="img/dailyui/003.jpg" class="slideimg_3" id="3"> </div>
<a class="next" onclick="slide(3,1)">❯</a>
</div>
</div>
SCSS:
.portfolio-slideshow{
width: 30%;
display: flex;
justify-content: space-between;
align-items: center;
}
.slide{
padding:0 35px;
display: block;
img{
display: none;
max-height:40vh;
max-width:100%;
}
}
.prev,.next{
display: flex;
align-items: center;
justify-content: center;
}
.imgpreview{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.9);
justify-content: center;
align-items: center;
padding: 50px;
}
.slidepreview{
display: none;
align-items: center;
justify-content: center;
.slidep{
display: block;
img{
display: none;
max-height: 85vh;
max-width: 85vw;
}
}
And Javascript:
var slideIndex = [0,0,0,0,0,0,0,0]
function showSlides(){
var aux = slideIndex.length;
var i;
for(i=0; i<aux; i+=2) { slide(i,0); }
}
function slide(n,m){
var i;
var aux = document.getElementsByClassName("slideimg_" + n);
var aux2 = aux.length - 1;
if (slideIndex[n] == 3 && m == 1) slideIndex[n] = -1;
if (slideIndex[n] == 0 && m == -1) slideIndex[n] = 4;
slideIndex[n] += m;
if (slideIndex[n] < 0) slideIndex = aux2;
else if (slideIndex[n] > aux2) slideIndex = 0;
for(i=0; i<aux.length; i++){
aux[i].style.display = "none";
aux[i].parentElement.style.display = 'none';
}
aux[slideIndex[n]].style.display = "block";
aux[slideIndex[n]].parentElement.style.display = 'block';
}
function closepreview(){
$('.imgpreview').css("display" , "none");
$('.slidepreview').css("display" , "none")
}
$(document).ready(function() {
$(".slide img").click(function(){
var id = $(this).attr('id');
var no = $(this).attr('data-no');
var no2 = no + 1;
$(".imgpreview").css("display" , "flex");
$(".no_" + no).css("display" , "flex");
$("img#" + id + ".slideimg_" + no2).css("display" , "block");
slideIndex[no2] = id;
});
}).resize();
The IDs must be unique.
Instead of inline event handlers I would suggest to attach them to the js code (separate html from js code).
I removed all IDs and I changed everything in jQuery using:
.index()
.toggle( display )
.nextAll(), .next(), .prev() and .prevAll()
I used a class: active. This class is used to mark the current active element. Moreover, every time I need to move next or prev I move this class to the corresponding element. This class takes track of which img must be shown.
The snippet:
$(document).ready(function() {
//
// Toggle visibility
//
$('.slide:not(.active), .slide:not(.active) img').toggle(false);
$('.slide.active, .slide.active img').toggle(true);
//
// closing preview....
//
$('.imgpreview .fa.fa-close').on('click', function(e) {
$('.imgpreview, .slidepreview').css("display" , "none");
//
// ...remove active class and toggle visibility
//
$('.imgpreview, .slidepreview').find('.active, .active img').toggleClass(false).removeClass('active');
});
//
// on prev....
//
$(".prev").on('click', function(e) {
//
// get the active element and so the previous one
//
var active = $(this).nextAll('.slide.active');
var prev = active.prev('.slide');
if (prev.length == 0) {
//
// if at the beginning take the last one
//
prev = $(this).nextAll('.slide').last();
}
//
// move active class and toggle visibility
//
active.removeClass('active');
prev.addClass('active').find('img').andSelf().toggle(true);
$('.slide:not(.active), .slide:not(.active) img').toggle(false);
});
$(".next").on('click', function(e) {
//
// get the active element and so the next one
//
var active = $(this).prevAll('.slide.active');
var next = active.next('.slide');
if (next.length == 0) {
//
// if at the end take the first one
//
next = $(this).prevAll('.slide').last();
}
//
// move active class and toggle visibility
//
active.removeClass('active');
next.addClass('active').find('img').andSelf().toggle(true);
$('.slide:not(.active), .slide:not(.active) img').toggle(false);
});
$(".slide img").on('click', function(e) {
//
// take the index of curr element in the parent element
//
var idx = $(this).closest('div.slide').index();
var no = $(this).data('no');
$('.imgpreview, .no_' + no).css('display' , 'flex');
$('.no_' + no).children().eq(idx).addClass('active');
$('.no_' + no).find('.slide:not(.active), .slide:not(.active) img').toggle(false);
$('.no_' + no).find('.slide.active, .slide.active img').toggle(true);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://beta.eduardstefan.com/css/style.css">
<link rel="stylesheet" href="http://beta.eduardstefan.com/css/font-awesome.css">
<div class="portfolio-slideshow">
<a class="prev">❮</a>
<div class="slide active"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_0" data-no="0"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_0" data-no="0"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_0" data-no="0"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_0" data-no="0"></div>
<a class="next">❯</a>
</div>
<div class="portfolio-slideshow">
<a class="prev">❮</a>
<div class="slide active"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_2" data-no="2"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_2" data-no="2"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_2" data-no="2"> </div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_2" data-no="2"></div>
<a class="next">❯</a>
</div>
<div class="imgpreview">
<i class="fa fa-close"></i>
<div class="slidepreview no_0">
<a class="prev" onclick="slide(1,-1)">❮</a>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_1"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_1"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_1"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_1"></div>
<a class="next">❯</a>
</div>
<div class="slidepreview no_2">
<a class="prev">❮</a>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/008.png" class="slideimg_3"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/007.jpg" class="slideimg_3"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/006.jpg" class="slideimg_3"></div>
<div class="slide"> <img src="http://beta.eduardstefan.com/img/dailyui/003.jpg" class="slideimg_3"></div>
<a class="next">❯</a>
</div>
</div>
At least one problem is here:
var no = $(this).attr('data-no');
var no2 = no + 1;
no is a string so if no is "0", then no + 1 is "01", so instead you can do this:
var no = $(this).attr('data-no');
var no2 = Number(no) + 1;
https://codepen.io/anon/pen/MmwdZb?editors=1111
Beyond that, why re-invent the wheel? There are plenty of good slideshow plugins available.

How can I hide one div before opening another?

How can I make it so that only one div can be shown at a time? I've tried adding "document.getElementById(currentID).style.display='none';" in the after the else but that doesn't work.
<h5 onclick="showImage('chair')">Chair</h5>
<h5 onclick="showImage('table')">Table</h5>
<h5 onclick="showImage('long_table')">Meeting Table</h5>
<div id="chair">
<img src="images/1.jpg" height="300px"/>
<h4>Product 1</h4>
</div>
<div id="table">
<img src="images/2.jpg" height="300px"/>
<h4>Product 2</h4>
</div>
<div id="longtable">
<img src="images/3.jpg" height="300px"/>
<h4>Product 3</h4>
</div>
<script type="text/javascript">
var currentID = "";
function showImage(id){
if(currentID == id){
document.getElementById(id).style.display='none';
currentID = "";
}else{
document.getElementById(id).style.display='block';
currentID = id;
}
}
</script>
Better to add a class to your HTML and then grab the divs by their class. You can then loop through the elements to hide them all and then un-hide the one you've clicked.
Example:
var arrProducts = document.getElementsByClassName('product');
for (i = 0; i < arrProducts.length; i++) {
arrProducts[i].style.display = 'none';
}
function showImage(id) {
for (i = 0; i < arrProducts.length; i++) {
if (id == arrProducts[i].id) {
if (document.getElementById(id).style.display === 'none') {
arrProducts[i].style.display = 'block';
} else {
arrProducts[i].style.display = 'none';
}
} else {
arrProducts[i].style.display = 'none';
}
}
}
h5 {
cursor: pointer;
}
.product img {
height: 10px;
width: 10px;
}
<h5 onclick="showImage('chair');">Chair</h5>
<h5 onclick="showImage('table');">Table</h5>
<h5 onclick="showImage('long_table');">Meeting Table</h5>
<div class="product" id="chair">
<img src="images/1.jpg" height="300px" />
<h4>Product 1 (Chair)</h4>
</div>
<div class="product" id="table">
<img src="images/2.jpg" height="300px" />
<h4>Product 2 (Table)</h4>
</div>
<div class="product" id="long_table">
<img src="images/3.jpg" height="300px" />
<h4>Product 3 (Meeting Table)</h4>
</div>
While this won't help you fix things in you current code, you can actually do this without any JavaScript by abusing radiobuttons. This is quite common.
http://jsfiddle.net/mo7yppp8/
Each div needs a radio button above it, and to be enclosed within a label. This way, clicking on the div will trigger the radiobutton, deselecting any other div in the process.
<label>
<input class="divSelector" type="radio" name="divSelector" value="" />
<div>Sample text</div>
</label>
Then, all you need is some CSS to hide the radiobuttons, and some to shrink the divs which aren't right after a checked input.
.divSelector {
display: none;
}
.divSelector:checked + div {
font-size: 12pt;
}
div {
font-size: 0pt;
background-color: blue;
color: white;
overflow: clip;
padding: 2em;
height: 12px;
}
div:hover {
background-color: grey;
}
Try substituting longtable for long_table at "Meeting Table" h5
var showImage = function showImage(id) {
var active = document.getElementById(id);
active.style.display = 'block';
var notActive = document.querySelectorAll("div:not(#" + active.id + ")");
Array.prototype.slice.call(notActive)
.forEach(function(el) {
el.style.display = "none";
})
};
div[id] {
display: none;
}
<h5 onclick="showImage('chair')">Chair</h5>
<h5 onclick="showImage('table')">Table</h5>
<h5 onclick="showImage('longtable')">Meeting Table</h5>
<div id="chair">
<img src="images/1.jpg" height="300px" alt="chair" />
<h4>Product 1</h4>
</div>
<div id="table">
<img src="images/2.jpg" height="300px" alt="table" />
<h4>Product 2</h4>
</div>
<div id="longtable">
<img src="images/3.jpg" height="300px" alt="meeting table" />
<h4>Product 3</h4>
</div>
You need to rethink the logic of your function, I'm guessing this is what you meant:
var currentID = "";
function showImage(id){
if(currentID != id){
if (currentID != "") // added this test in response to JFK's comment
document.getElementById(currentID).style.display='none';
document.getElementById(id).style.display='block';
currentID = id;
}
else { // added after OP clarified the question
document.getElementById(id).style.display='none';
currentID = "";
}
}
If you have the chance to use jQuery, there is a really awesome solution possible. It would work like this:
http://jsfiddle.net/dnf6gsuL/2/
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<h5>Chair</h5>
<div>
<img src="images/1.jpg" height="300px"/>
<h4>Product 1</h4>
</div>
<h5>Table</h5>
<div>
<img src="images/2.jpg" height="300px"/>
<h4>Product 2</h4>
</div>
<h5 id="longtable">Meeting Table</h5>
<div>
<img src="images/3.jpg" height="300px"/>
<h4>Product 3</h4>
</div>
<script>
$("h5").click(function(eve){
$("div").each(function(){
$(this).fadeOut("fast", function(){
$(eve.target).next("div").fadeIn("fast");
});
});
});
</script>

Categories