PHPhulp.nl PHPhulp.nl
35k+ leden Over PHPhulp Offerte opdracht Contact
O

jQuery showhide

Door Onbekend Onbekend op 29-11-2008 19:07
285 views
Ik wil met blokken gaan werken, ieder blok heeft een kopje (een h1). Ik wil dat als er op de h1 geklikt wordt, dat dan het blok wordt verborgen. Ik zal dit misschien iets duidelijker maken met een voorbeeld van hoe ik denk dat ik het beste de HTML code kan opbouwen.


<div class="showhide">
  <h1>Title</h1>
  <div class="content">
    content hier van het blok
  </div>
</div>


De CSS wil ik zo doen:

div.showhide h1 {
	background: url(); /* voor een pijltje dat de status van het blok aan geeft (open of dicht) */
}

div.hidden h1 {
	background: url(); /* nu een omgekeerd pijltje */
}

div.hidden div.content {
	display: none;
}

Valt ie een beetje? Dus als div.showhide alleen de class showhide heeft, ie div.content zichtbaar, als die ook nog de class hidden heeft, is ie verborgen.

Nu wil ik dus dat als er op div.showhide(.hidden) h1 geklikt wordt, de parent-div (div.showhide) de class hidden toggled. Ik gebruik jQuery, dus wat is de makkelijkste manier om dit te doen? Thx. Thomas.
Jesper Diovo
29-11-2008 19:19
Geef je parent div een id en gebruik dan document.getElementsById(id).
O
Onbekend Onbekend
29-11-2008 19:21
Nee, je snapt niet wat ik bedoel. Lees nog eens goed.

Ik dacht te beginnen met een click te herkennen aan:
div.showhide h1
M
Mitchell
29-11-2008 19:29
Zoiets? 


$(".showhide h1").click(function () {
  $(".showhide .content").slideToggle("slow");
});
O
Onbekend Onbekend
29-11-2008 20:30
De bedoeling is dus dat er meerdere van dit soort blokken op een pagina kunnen voorkomen en dat alleen het blok waarin de h1 zit waar op geklikt is de class hidden krijgt/verwijderdt. Dat is wel op de goeie weg.
J
Julian
29-11-2008 23:20
Probeer is iets als dit:


$(".showhide h1").toggle(function(){
  $(this).next().hide('slow');
}, function(){
  $(this).next().show('slow');
});


mocht het niet werken.. kijk dan even naar de functies next() en find().
O
Onbekend Onbekend
29-11-2008 23:33
Dus next() pakt het eerstvolgende element? Dat is eigenlijk niet de bedoeling.

Maar ja. Is er niet iets als $(this).parent().toggleClass('hidden'); Want dat zou helemaal perfect zijn.
P
PHP Newbie
30-11-2008 00:13
Mootools:


$$('#div h1').each(function(el){
    el.addEvent('click', function() {
		var schuiven = new Fx.Slide(el.getParent());
		
		schuiven.slideIn();
	});
});
P
PHP Newbie
30-11-2008 13:18
Dat had ik ook wel door, maar ik gebruik geen jQuery dus draag je een andere oplossing aan.
O
Onbekend Onbekend
30-11-2008 13:26
Maar de rest van al mijn 'apps' maakt ook gebruik van jQuery dus is het niet zo'n goeie optie om nu te switchen. Maar toch bedankt.

Reageren

Inloggen om te reageren