Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Forum

Categorieën > JavaScript

Divs met daarin antwoordformulier verbergen/tonen (Opgelost)

Ijspegel - 19/12/2007 15:20
Nieuw lid		Op mijn website heb ik een overzicht van vragen staan die door bezoekers zijn gesteld. Onder dit overzicht staat een formulier waar mensen dus daadwerkelijk een vraag kunnen stellen. Nu wil ik de mogelijkheid bieden dat andere bezoekers deze vragen kunnen beantwoorden. Onder elke vraag heb ik daarom nu een formulier geplaatst waarmee mensen de vraag kunnen beantwoorden. Er staan dan echter wel erg veel formulieren in beeld, dus ik wil dat ze in eerste instantie allemaal standaard verborgen zijn. Als er vervolgens bij een vraag op "Geef antwoord" wordt geklikt, dan moet het betreffende antwoordformulier dus getoond worden. Er mag maximaal altijd maar 1 antwoordformulier getoond worden. Zou iemand mij misschien kunnen vertellen hoe ik dit moet doen? Ik had al wat dingen opgezocht en kwam uit bij dingen als document.getElementById('antwoord').style.display = 'block'; document.getElementById('vraag').style.display = 'none'; , maar heb verder echt helaas geen idee hoe dit moet. Alvast bedankt! :-)

7 antwoorden

Gesponsorde links

Koen - 19/12/2007 15:37

PHP expert

javascript code - Bekijk de code zonder highlighting - Klap code in

                var divopen = false;
function toggleDiv(divid) {
   if(divopen == false) {
      if(document.getElementById(divid).style.display == 'none') {
         document.getElementById(divid).style.display = 'block';
         divopen = true;
      }
     } else {
         if(document.getElementById(divid).style.display == 'block') {
           document.getElementById(divid).style.display = 'none';
           divopen = false;
         }
      }
}

            
var divopen = false;
function toggleDiv(divid) {
   if(divopen == false) {
      if(document.getElementById(divid).style.display == 'none') {
         document.getElementById(divid).style.display = 'block';
         divopen = true;
      }
     } else {
         if(document.getElementById(divid).style.display == 'block') {
           document.getElementById(divid).style.display = 'none';
           divopen = false;
         }
      }
}
 

Aanroepen:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<a href="#" onclick="togglediv('div1')">In/Uitklappen</a>
<div id="div1" style="display: none;">
<form>
...
</form>
</div>

<a href="#" onclick="togglediv('div1')">In/Uitklappen</a>
<div id="div1" style="display: none;">
<form>
...
</form>
</div>

Veel plezier

Ijspegel - 19/12/2007 16:04 (laatste wijziging 19/12/2007 16:05)
Nieuw lid		Dank je wel! Ik had er ook wel plezier van, maar het werkt nog niet helemaal zoals het hoort. Als ik namelijk 2 formulieren heb en de eerste daarvan open heb, dan kan ik de tweede niet openen zolang de eerste nog open is. Het moet echter zo worden dat zodra ik op de tweede link klik, dat het tweede formulier getoond wordt en dat het eerste formulier automatisch gesloten wordt. Zou je dat misschien ook nog kunnen maken? :-) Ook nog een ander vraagje trouwens. Het zou ook nog mogelijk moeten zijn dat als het formulier gesloten is er alleen show form staat en zodra het formulier open is dat er hide form staat. Ik heb me rot gezocht, maar kan die js cod daarvoor helaas niet vinden. Weet jij deze toevallig ook?

Koen - 19/12/2007 17:14

PHP expert

javascript code - Bekijk de code zonder highlighting - Klap code in

                var divopen = false;
function toggleDiv(divid) {
   if(divopen == false) {
      if(document.getElementById(divid).style.display == 'none') {
         document.getElementById(divid).style.display = 'block';
         document.getElementById('link'+divid).innerHTML = 'Inklappen';
         divopen = true;
         opendiv = divid;
      }
     } else {
         
         if(document.getElementById(divid).style.display == 'none') {
           document.getElementById(divid).style.display = 'block';
           document.getElementById(opendiv).style.display = 'none';
           document.getElementById('link'+opendiv).innerHTML = 'Uitklappen';
           document.getElementById('link'+divid).innerHTML = 'Inklappen';
           divopen = true;
           opendiv = divid;
         } else {
	       document.getElementById(divid).style.display = 'none';
           document.getElementById(opendiv).style.display = 'none';
           document.getElementById('link'+divid).innerHTML = 'Uitklappen';
           divopen = false;
         }
      }
}

            
var divopen = false;
function toggleDiv(divid) {
   if(divopen == false) {
      if(document.getElementById(divid).style.display == 'none') {
         document.getElementById(divid).style.display = 'block';
         document.getElementById('link'+divid).innerHTML = 'Inklappen';
         divopen = true;
         opendiv = divid;
      }
     } else {
 
         if(document.getElementById(divid).style.display == 'none') {
           document.getElementById(divid).style.display = 'block';
           document.getElementById(opendiv).style.display = 'none';
           document.getElementById('link'+opendiv).innerHTML = 'Uitklappen';
           document.getElementById('link'+divid).innerHTML = 'Inklappen';
           divopen = true;
           opendiv = divid;
         } else {
	       document.getElementById(divid).style.display = 'none';
           document.getElementById(opendiv).style.display = 'none';
           document.getElementById('link'+divid).innerHTML = 'Uitklappen';
           divopen = false;
         }
      }
}
 

html4strict code - Bekijk de code zonder highlighting - Klap code in

<a href="#" onclick="toggleDiv('div1')" id="linkdiv1">Uitklappen</a><br />
<div id="div1" style="display: none;">
<form></form>
</div><br />
<a href="#" onclick="toggleDiv('div2')" id="linkdiv2">Uitklappen</a><br />
<div id="div2" style="display: none;">
<form></form>
</div><br />
<a href="#" onclick="toggleDiv('div3')" id="linkdiv3">Uitklappen</a><br />
<div id="div3" style="display: none;">
<form></form>
</div><br />
<a href="#" onclick="toggleDiv('div4')" id="linkdiv4">Uitklappen</a><br />
<div id="div4" style="display: none;">
<form></form>
</div><br />

<a href="#" onclick="toggleDiv('div1')" id="linkdiv1">Uitklappen</a><br />
<div id="div1" style="display: none;">
<form></form>
</div><br />
<a href="#" onclick="toggleDiv('div2')" id="linkdiv2">Uitklappen</a><br />
<div id="div2" style="display: none;">
<form></form>
</div><br />
<a href="#" onclick="toggleDiv('div3')" id="linkdiv3">Uitklappen</a><br />
<div id="div3" style="display: none;">
<form></form>
</div><br />
<a href="#" onclick="toggleDiv('div4')" id="linkdiv4">Uitklappen</a><br />
<div id="div4" style="display: none;">
<form></form>
</div><br />

Alsjeblieft

Ijspegel - 19/12/2007 17:25
Nieuw lid		Ik heb het even snel getest en het werkt perfect! Super bedankt hiervoor! Ik ga het vanavond of morgen in mijn eigen script proberen te verwerken. Mocht het niet lukken, dan hoor je nog van me.

Koen - 19/12/2007 17:25
PHP expert		Oké!

Ijspegel - 19/12/2007 22:19
Nieuw lid		Ik heb alleen toch nog een vraagje. Het werk in principe goed, maar als ik nu op een van de links klik, dan ga ik wel helemaal naar de bovenkant van de pagina. Dit moet juist nie. Als ik dus op de link klik, dan moet ik gewoon op dezelfde hoogte blijven en dus niet helemaal naar de bovenkant van de pagina gaan. Weet jij hoe dit te verhelpen is?

Koen - 20/12/2007 18:47

PHP expert

kijk:

html4strict code - Bekijk de code zonder highlighting - Klap code in

<a href="#linkdiv1" onclick="toggleDiv('div1')" id="linkdiv1" name="linkdiv1">Uitklappen</a><br />
<div id="div1" style="display: none;">
<form></form>
</div><br />
<a href="#linkdiv2" onclick="toggleDiv('div2')" id="linkdiv2" name="linkdiv2">Uitklappen</a><br />
<div id="div2" style="display: none;">
<form></form>
</div><br />
<a href="#linkdiv3" onclick="toggleDiv('div3')" id="linkdiv3" name="linkdiv3">Uitklappen</a><br />
<div id="div3" style="display: none;">
<form></form>
</div><br />
<a href="#linkdiv4" onclick="toggleDiv('div4')" id="linkdiv4" name="linkdiv4">Uitklappen</a><br />
<div id="div4" style="display: none;">
<form></form>
</div><br />

<a href="#linkdiv1" onclick="toggleDiv('div1')" id="linkdiv1" name="linkdiv1">Uitklappen</a><br />
<div id="div1" style="display: none;">
<form></form>
</div><br />
<a href="#linkdiv2" onclick="toggleDiv('div2')" id="linkdiv2" name="linkdiv2">Uitklappen</a><br />
<div id="div2" style="display: none;">
<form></form>
</div><br />
<a href="#linkdiv3" onclick="toggleDiv('div3')" id="linkdiv3" name="linkdiv3">Uitklappen</a><br />
<div id="div3" style="display: none;">
<form></form>
</div><br />
<a href="#linkdiv4" onclick="toggleDiv('div4')" id="linkdiv4" name="linkdiv4">Uitklappen</a><br />
<div id="div4" style="display: none;">
<form></form>
</div><br />

Dit moet werken.

Gesponsorde links

Dit onderwerp is gesloten.

Actiefste leden van de maand

Actieve forumberichten