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

[JS] show/hide

Door Bas IJzelendoorn op 15-09-2008 13:03
596 views
Beste mensen,

zoals de titel al zegt. ben ik op zoek naar een javascript die tekst kan tonen en verbergen. op js gebied ben ik niet al te goed dus was al op internet aan het zoeken geweest.

Naar het volgende ben ik op zoek:

een javascript die tekst bij het laden verbergt maar alleen een titel weergeeft. door op tonen te klikken word de tekst weergeven. het woordje toon veranderd in verberg. uiteindelijk komen er meerdere teksten en titel op 1 pagina.

Ik heb al op internet gezocht maar kon zo snel niet vinden wat ik zocht.

Iemand een idee?

alvast bedankt
N
Niek Weevers
15-09-2008 16:16
Het is makkelijk te doen met jquery. Wanneer je deze oplossing wilt gebruiken dan moet je wel even deze library in je pagina includen.

html

<ul>
  <li>
    <strong>Titel</strong>
    <span>tekst</span>
  </li>
</ul>


js

$(function() {

$("span").hide();

$("strong").toggle(
  function()
  {
    $("span", this.parentNode).show();
  }
);

});


Ik weet niet zeker of ik goed heb gecode, maar zoiets werkt.
De span verschijnt door te klikken op de titel en verdwijnt door nogmaals te klikken. Je kan het zo ombouwen wanneer je met een knopje toon/verberg wilt maken
N
Niek Weevers
15-09-2008 16:44
Die van mij moet trouwens zijn


$(function() {

$("span").hide();

$("strong").click(
function()
{
	$("span", this.parentNode).toggle(200);
});

});
Jan Koehoorn
15-09-2008 17:13
Ik zou het zo doen:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Toggle Alinea's</title>
	
	<script type="text/javascript" src="mootools/mootools.js"></script>
	<script type="text/javascript">
		window.addEvent ('domready', function () {
			$$('a.toggle').each (function (item) {
				item.addEvent ('click', function (e) {
					new Event (e).preventDefault ();
					if (item.innerHTML == 'toon') {
						item.getParent ().getNext ().setStyle ('display', 'block');
						item.innerHTML = 'verberg';
					}
					else {
						item.getParent ().getNext ().setStyle ('display', 'none');
						item.innerHTML = 'toon';
					}
				});
			});
		});
	</script>
	
	<style type="text/css" media="screen">
		p.toggle_text						{display: none; border: 1px solid #ccc; padding: 0 10px;}
	</style>
</head>

<body>

	<h1>Toon en verberg</h1>

	<h2>Alinea 1</h2>
	<p><a class="toggle" href="">toon</a></p>
	<p class="toggle_text">Alineatekst alineatekst alineatekst alineatekst alineatekst alineatekst</p>

	<h2>Alinea 2</h2>
	<p><a class="toggle" href="">toon</a></p>
	<p class="toggle_text">Alineatekst alineatekst alineatekst alineatekst alineatekst alineatekst</p>

	<h2>Alinea 3</h2>
	<p><a class="toggle" href="">toon</a></p>
	<p class="toggle_text">Alineatekst alineatekst alineatekst alineatekst alineatekst alineatekst</p>

</body>
</html>


Voorbeeld: toggle text
Bas IJzelendoorn
15-09-2008 17:28
Super precies wat ik nodig had:)

dankjewel allemaal!
n
n0xie
15-09-2008 19:14
Kijk ook eens bij jQuery naar de functie .show() en .hide(). Die zijn namelijk precies hiervoor in het leven geroepen...
P
Pim Vernooij
15-09-2008 20:04
@Jan: ik gebruik ook mootools, maar zou in dit geval één css-class aanmaken: active. Vervolgens zet je deze met Element.toggleClass('active'); aan of uit. Het nut hiervan is dat je niet meer hoeft te controleren wat de 'state' van je object is, maar dat mootools dit zelf herkent.

Zie:
http://docs.mootools.net/Element/Element#Element:toggleClass
M
Mohamed nvt
16-09-2008 05:12
hi Jan,

ik heb eerder een topic over dit onderwerp gepost, maar de geboden oplossing werkte niet voor mij...dus mag ik jouw voorbeeld-code gebruiken voor mijn website?

p.s. ik heb liever al mijn scripten apart in een mapje. zo heb ik voor javascript een aparte map aangemaakt en het liefste wil ik die javascript in de header aanroepen via een externe link...hoe kan ik deze code aanroepen?

Reageren

Inloggen om te reageren