show / hide

[thomas BE 68]

Hallo iedereen,

Ik heb het volgend probleem, het lijkt eenvoudig maar ik krijg het niet (helemaal) aan de praat. Ik heb JQuery vannacht pas ontdekt, dat moet ik er eerlijk bij vermelden
Op een pagina wil ik ervoor zorgen dat een klik op een link twee dingen doet: 1) opent de link in een nieuw venster of i-frame, en 2) toont een tot op dan verborgen gedeelte (bv. een div) die een link naar de volgende stap bevat.
Samengevat: stap 1: onclick opent link, en toont stap2
Dit werkt allemaal, ik gebruik een div ID die standaard niet getoond wordt, en die wel wordt getoond onclick, eenvoudig.
MAAR: "stap 1" mag niet langer zichtbaar zijn, die link moet dus worden verborgen. En dat lukt niet! Wanneer ik aan de click/function een lijn hide toevoeg om de a tag te verbergen onclick, dan wordt de verborgen div meteen getoond.
Iemand schreef me in een ander forum dat dit kan komen doordat een a tag een inline element is (doch dat is chinees voor mij), en stelde voor dat ik daar eveneens een div met ID van zou maken, en dat ik dan die hele div (waarin de a tag ook staat) zou hiden. Maar dat geeft hetzelfde resultaat: de verborgen div wordt gewoon getoond, en de 'huidige' div verdwijnt niet onclick.

Ik zit hier nu niet op mijn computer, dus ik kan de code zelf voorlopig niet copypasten, maar is er iemand die me hiermee kan helpen? Het lijkt op zich eenvoudig, niet?

Groeten,

Thomas (België)

 

[ScorpionX]

moet vrij simpel kunnen.
Post je scriptje hier zodra je er bij kan, dan kunnen we je vast helpen.

ik denk dat je die "a" tag een id moet meegeven en op id moet hiden.

 

[thomas BE 68]

ScorpionX,
bedankt voor je reactie, je schrijft 'moet simpel kunnen' en dat stemt me alvast hoopvol

De eerste code die ik heb geprobeerd is deze:

$(document).ready(function () {  
$('#showhidetarget').hide(); 

$('a#showhidetrigger').click(function () {  
$('#showhidetarget').show(200);  
[B][I]$('a#showhidetrigger').hide();[/I][/B]
});  
});

Het vette cursieve gedeelte bij click[function bevat de lijn code waar het 'misloopt', maw als die lijn er NIET staat, dan werkt alles perfect, dwz als er wordt geklikt op de 'href' van de a showhidetrigger dan wordt de showhidetarget getoond. (De eigenlijke link zit in een CFoutput, en gebruikt eveneens een javascript om een popup te tonen).
MAAR: van zodra ik het vette cursieve gedeelte (?showhidetrigger?).hide') toevoeg, werkt er eigenlijk niets meer: dan wordt de hidden target meteen getoond onload, en het hiden van de trigger werkt evenmin.

Iemand merkte op dat dit zou kunnen komen omdat ik de a tag probeer te hiden, en dat is een inline element of zoiets (daar ken ik niets van). Dus heb ik rond het gedeelte waarin de a trigger zich bevindt, een div gezet, en die heb ik div ID hideafterclick genoemd. In de hoop dat de trigger dus op zijn beurt onzichtbaar wordt na de klik...

Dit was dan de code (weet niet zeker of de syntax juist is, of er accolades, puntkomma's of haakjes ontbreken):

$(document).ready(function () {  
$('#showhidetarget').hide();  

$('a#showhidetrigger').click(function () {  
$('#showhidetarget').show(200);  
[B][I]$('#hideafterclick').hide();[/I][/B]
});  
});

Het vette cursieve gedeelte is dus een beetje aangepast, en verwijst naar de extra div ID die ik heb aangemaakt. Is dat correct gedaan (ik heb het nooit eerder gedaan)? Maar ook dat levert helemaal niets op :-(

Ik kan je ook het hele bestand in txt-formaat posten als bijlage (is eigenlijk een cfmbestand), als je denkt dat dit voor inzicht kan zorgen? Ik merk er nog wel bij op dat ik geen programmeur ben, ik kan met notepad een beetje werken met code, maar ik ken ColdFusion niet...

Ik kijk alvast hoopvol uit naar je antwoord, bedankt voor je aandacht!

Groeten,

Thomas

 

[ScorpionX]

Hai,

ik wil je graag helpen, maar ben niet echt thuis in die Jquery afkortingen etc. Ik doe het liever op de 'Old School' manier.

de onderstaande code doet volgens mij precies wat je wilt. Ik heb hem hier getest. Hij opent een nieuw window en hij geeft op dat moment een extra divje weer. Als je nog vragen hebt dan hoor ik het wel.

<html>
	<head>
	<title>Test</title>
	</head>
	<body>
		<script type="text/javascript">
		function fixdiespul(){
			window.open('http://www.pageresource.com/jscript/jex5.htm','mywindow','width=400,height=200');
			document.getElementById('div2').style.display = 'block';
		}

		</script>

		<div id="div1" style="width:100px;height:100px;border:1px solid black;">
			<a href="#" onclick="fixdiespul();">ga naar 2</a>
		</div>
		<div id="div2" style="width:100px;height:100px;border:1px solid black;display:none;">
			blablabla
		</div>

	</body>
</html>

 

[thomas BE 68]

ScorpionX,

hartelijk dank voor je hulp en deskundigheid, je hebt me erg verdergeholpen!

Groeten,

Thomas

 

[ScorpionX]

goed om te horen!

als je nog meer vragen over html/css/php/javascript hebt dan hoor ik het wel.