Hidden div's is dit mogelijk?
<div class="container"><div class="date">datum</div>Hier een stukje tekst</div>
<div class="containerExtra">Info1</div>
<div class="containerExtra">Info2</div>
<div class="containerExtra">Info3</div>
<div class="containerExtra">Info4</div>
Het is de bedoeling om de div's 'containerExtra' normaal bij laden van de pagina te verbergen. Zodra er op de 'container' div wordt geklikt moeten de containerExtra div's worden getoond.
Ik ben al aan het rondkijken geweest via google, maar kom niet verder...
Alvast bedankt!
Dan met click en show.
Het wordt dan iets als:
$('.container').click(function () { $('.containerExtra').each(function(i){$(this).show();})});
Zie http://docs.jquery.com voor de uitleg van de functies en hoe je jQuery gebruikt.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<html>
<head>
<script>
function getElementsByClass( searchClass, domNode, tagName)
{
// zie http://www.anyexample.com/webdev/javascript/javascript_getelementsbyclass_function.xml
if (domNode == null) domNode = document;
if (tagName == null) tagName = '*';
var el = new Array();
var tags = domNode.getElementsByTagName(tagName);
var tcl = " "+searchClass+" ";
for(i=0,j=0; i<tags.length; i++) {
var test = " " + tags[i].className + " ";
if (test.indexOf(tcl) != -1)
el[j++] = tags[i];
}
return el;
}
function divs_zichtbaar()
{
var divs = getElementsByClass('containerExtra');
for (var i=0; i<divs.length; i++)
{
divs[i].style.display = 'block';
}
}
</script>
<style>
.containerExtra{display: none;}
.container{cursor: pointer;}
</style>
</head>
<body>
<div class="container" onClick="divs_zichtbaar();"><div class="date">datum</div>Hier een stukje tekst</div>
<div class="containerExtra">Info1</div>
<div class="containerExtra">Info2</div>
<div class="containerExtra">Info3</div>
<div class="containerExtra">Info4</div>
</body>
</html>
<head>
<script>
function getElementsByClass( searchClass, domNode, tagName)
{
// zie http://www.anyexample.com/webdev/javascript/javascript_getelementsbyclass_function.xml
if (domNode == null) domNode = document;
if (tagName == null) tagName = '*';
var el = new Array();
var tags = domNode.getElementsByTagName(tagName);
var tcl = " "+searchClass+" ";
for(i=0,j=0; i<tags.length; i++) {
var test = " " + tags[i].className + " ";
if (test.indexOf(tcl) != -1)
el[j++] = tags[i];
}
return el;
}
function divs_zichtbaar()
{
var divs = getElementsByClass('containerExtra');
for (var i=0; i<divs.length; i++)
{
divs[i].style.display = 'block';
}
}
</script>
<style>
.containerExtra{display: none;}
.container{cursor: pointer;}
</style>
</head>
<body>
<div class="container" onClick="divs_zichtbaar();"><div class="date">datum</div>Hier een stukje tekst</div>
<div class="containerExtra">Info1</div>
<div class="containerExtra">Info2</div>
<div class="containerExtra">Info3</div>
<div class="containerExtra">Info4</div>
</body>
</html>
Gewijzigd op 01/01/1970 01:00:00 door Emmanuel Delay