login  Naam:   Wachtwoord: 
Registreer je!
 Forum

text verbergen en laten verschijnen met 1 link (Opgelost)

Offline monkey25 - 19/04/2008 18:21 (laatste wijziging 19/04/2008 18:22)
Avatar van monkey25Nieuw lid ik wou mijn text tijdelijk laten verbergen met javascript en weer laten terugkomen, dat is nu gelukt maar nu heb ik 2 links die dat doen.

ik wil eigenlijk een link hebben die zorgt dat ik met javascript mijn tekst kan laten verdwijnen en verschijnen.
dus als de pagina net is gelaten moet er staan:
<a href="javascript:.show()">show</a>
en als je erop geklikt heb:
<a href="javascript:hide()">hide</a>
en de functies moeten het natuurlijk doen maar ik snap niet hoe dat precies kan.
dit is wat ik tot nu toe hebt
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2. 	<head>
  3. <script type="text/javascript">
  4. function show() {
  5. document.getElementById('hidden').style.display='block';
  6. }
  7. function hide() {
  8. document.getElementById('hidden').style.display='none';
  9. }
  11. <style type="text/css">
  12. div#hidden	{
  13. 	display: none;
  14. 		}
  16. 	</head>
  18. hide / show : <a href="javascript:show()">show</a> / <a href="javascript:hide()">hide</a>
  19. <div id="hidden">
  20. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sem mi, malesuada sed, laoreet eu, feugiat nec, quam. Nunc porttitor felis nec quam hendrerit ultricies. Mauris aliquet elit et eros. Nulla ac metus. Vestibulum purus urna, congue eget, consectetuer sed, interdum ut, mi. Maecenas et metus non enim venenatis ornare. Suspendisse eget erat. Praesent gravida. Mauris tempor elementum justo. Morbi vitae quam nec lorem commodo fringilla. Duis ac dolor non nulla lobortis tristique. Phasellus in est a dolor malesuada volutpat. 
  21. </div>
  22. </body>
  23. </html>

4 antwoorden

Gesponsorde links
Offline Koen - 19/04/2008 19:03 (laatste wijziging 19/04/2008 20:30)
Avatar van Koen PHP expert
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.     <head>
  3. <script type="text/javascript">
  4. function toggle(id) {
  5. if(document.getElementById(id).style.display=='block')
  6. {
  7.     document.getElementById(id).style.display='none';
  8.     document.getElementById('link'+id).innerHTML = 'show';
  9. } else
  10. {
  11.     document.getElementById(id).style.display='block';
  12.     document.getElementById('link'+id).innerHTML = 'Hide';
  13. }
  14. }
  16.     </head>
  18. hide / show : <a id="linkhidden" href="javascript:toggle('hidden')">show</a>
  19. <div id="hidden" style="display: none;">
  20. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sem mi, malesuada sed, laoreet eu, feugiat nec, quam. Nunc porttitor felis nec quam hendrerit ultricies. Mauris aliquet elit et eros. Nulla ac metus. Vestibulum purus urna, congue eget, consectetuer sed, interdum ut, mi. Maecenas et metus non enim venenatis ornare. Suspendisse eget erat. Praesent gravida. Mauris tempor elementum justo. Morbi vitae quam nec lorem commodo fringilla. Duis ac dolor non nulla lobortis tristique. Phasellus in est a dolor malesuada volutpat. 
  21. </div>
  22. </body>
  23. </html>


Gebruik:
aanroepen met toggle('idvandediv');
Het id van de bijhorende link moet "link+het id van het te verbergen ding.." heten.

Edit: Ik moet wel m'n else'jes sluiten 
Offline monkey25 - 19/04/2008 19:15 (laatste wijziging 19/04/2008 19:28)
Avatar van monkey25 Nieuw lid ik vrees dat ik het niet helemaal snap, hij doet het niet. dit is de code:
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.     <head>
  3. <script type="text/javascript">
  4. function toggle(hidden) {
  5. if(document.getElementById(hidden).style.display=='block')
  6. {
  7.     document.getElementById(hidden).style.display='none';
  8.     document.getElementById('link'+id).innerHTML = 'show';
  9. } else
  10. {
  11.     document.getElementById(hidden).style.display='block';
  12.     document.getElementById('link'+hidden).innerHTML = 'Hide';
  13. }
  15.     </head>
  17. hide / show : <a id="linkhidden" href="javascript:toggle('hidden')">show</a>
  18. <div id="hidden" style="display: none;">
  19. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sem mi, malesuada sed, laoreet eu, feugiat nec, quam. Nunc porttitor felis nec quam hendrerit ultricies. Mauris aliquet elit et eros. Nulla ac metus. Vestibulum purus urna, congue eget, consectetuer sed, interdum ut, mi. Maecenas et metus non enim venenatis ornare. Suspendisse eget erat. Praesent gravida. Mauris tempor elementum justo. Morbi vitae quam nec lorem commodo fringilla. Duis ac dolor non nulla lobortis tristique. Phasellus in est a dolor malesuada volutpat. 
  20. </div>
  21. </body>
  22. </html>
Offline Koen - 19/04/2008 20:30
Avatar van Koen PHP expert
html4strict code - Bekijk de code zonder highlighting - Klap code in 
  2.     <head>
  3. <script type="text/javascript">
  4. function toggle(hidden) {
  5. if(document.getElementById(hidden).style.display=='block')
  6. {
  7.     document.getElementById(hidden).style.display='none';
  8.     document.getElementById('link'+id).innerHTML = 'show';
  9. } else
  10. {
  11.     document.getElementById(hidden).style.display='block';
  12.     document.getElementById('link'+hidden).innerHTML = 'Hide';
  13. }
  14. }
  16.     </head>
  18. hide / show : <a id="linkhidden" href="javascript:toggle('hidden')">show</a>
  19. <div id="hidden" style="display: none;">
  20. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sem mi, malesuada sed, laoreet eu, feugiat nec, quam. Nunc porttitor felis nec quam hendrerit ultricies. Mauris aliquet elit et eros. Nulla ac metus. Vestibulum purus urna, congue eget, consectetuer sed, interdum ut, mi. Maecenas et metus non enim venenatis ornare. Suspendisse eget erat. Praesent gravida. Mauris tempor elementum justo. Morbi vitae quam nec lorem commodo fringilla. Duis ac dolor non nulla lobortis tristique. Phasellus in est a dolor malesuada volutpat. 
  21. </div>
  22. </body>
  23. </html>


Foutje, functie haakje niet afgesloten 
Offline monkey25 - 19/04/2008 21:01 (laatste wijziging 20/04/2008 10:19)
Avatar van monkey25 Nieuw lid hartstikke bedankt, hij doet het nu perfect.
maar ik heb nog een vraag, als je op show drukt en dan weer op hide, kan je dan ook zorgen dat er daarna weer show komt te staan want na 2 keer klikken blijft de hide de hele tijd staan

Edit:
ik snap het al, bedankt voor je hulp
Gesponsorde links
Dit onderwerp is gesloten.
Actieve forumberichten
© 2002-2024 Sitemasters.be - Regels - Laadtijd: 0.39s