Click event afhandeling
Wie kan mij helpen met het volgende:
Ik heb een menu gemaakt als je op het LI element klikt dat het child element zichtbaar word.
Klik je op een ander dan word de lijst wat de class show heeft onzichtbaar gemaakt door show te verwijderen hide toe te voegen.
Wat mij niet lukt is als je een tweede keer op de zelfde klikt dat deze dan ook onzichtbaar word.
Ik wil dus eigenlijk een toggle maken op een element en dat de niet geklikte parent daarvan de child elementen onzichtbaar worden gemaakt
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
<div class="parent" data="one">
<div class="child hide" id="one">
test
</div>
</div>
<div class="parent" data="two">
<div class="child hide" id='two'>
test 2
</div>
</div>
<div class="child hide" id="one">
test
</div>
</div>
<div class="parent" data="two">
<div class="child hide" id='two'>
test 2
</div>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
var parent = document.getElementsByClassName("parent");
for (var i = 0; i < parent.length; i++) {
parent[i].addEventListener("click", function () {
var child = document.getElementsByClassName("child");
var attribute = this.getAttribute("data");
var the_element = document.getElementById(attribute);
for (var is = 0; is < child.length; is++) {
child[is].classList.add('hide');
child[is].classList.remove('show');
}
the_element.classList.add('show');
});
}
for (var i = 0; i < parent.length; i++) {
parent[i].addEventListener("click", function () {
var child = document.getElementsByClassName("child");
var attribute = this.getAttribute("data");
var the_element = document.getElementById(attribute);
for (var is = 0; is < child.length; is++) {
child[is].classList.add('hide');
child[is].classList.remove('show');
}
the_element.classList.add('show');
});
}
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var parent = document.getElementsByClassName("parent");
for (var i = 0; i < parent.length; i++) {
parent[i].addEventListener("click", function () {
var child = document.getElementsByClassName("child");
var attribute = this.getAttribute("data");
var the_element = document.getElementById(attribute);
if(this.children[0].classList.contains('show')){
this.children[0].classList.add('hide');
this.children[0].classList.remove('show');
return;
}
for (var is = 0; is < child.length; is++) {
child[is].classList.add('hide');
child[is].classList.remove('show');
}
the_element.classList.add('show');
the_element.classList.remove('hide');
});
}
for (var i = 0; i < parent.length; i++) {
parent[i].addEventListener("click", function () {
var child = document.getElementsByClassName("child");
var attribute = this.getAttribute("data");
var the_element = document.getElementById(attribute);
if(this.children[0].classList.contains('show')){
this.children[0].classList.add('hide');
this.children[0].classList.remove('show');
return;
}
for (var is = 0; is < child.length; is++) {
child[is].classList.add('hide');
child[is].classList.remove('show');
}
the_element.classList.add('show');
the_element.classList.remove('hide');
});
}