Mouseclick -> Uitschuiven?

Status
Niet open voor verdere reacties.
I

indexspelen

Gebruiker
Lid geworden
17 mei 2008
Berichten
90
Ik weet niet zeker of dit met javascript te doen is.
Maar ik zoek dit ongeveer:

Als je op een pijltje klikt onderaan in een tabel,
Dat er dan 5 zinnen komen
En als je dan opnieuw op het pijltje klikt,
Dat ze dan weer verdwijnen.


-> Is dit mogelijk met javascript?
-> Tips zijn altijd welkom :) ( Ik ben niet goed in javascript.. )
 
Bedankt voor je snelle reactie,
Maar een iets specifiekere site zou ook handig zijn ^^
 
Het kan zeker, ik zou jQuery gebruiken. jQuery heeft geloof ik de beste animatie library. Ik weet het alleen niet zeker aangezien ik nooit animaties maak met javascript (zal geen discussie beginnen dit keer :P ). Maargoed, er zijn te veel jQuery plugins gemaakt om te tellen, er moet er ook een tussen zitten die precies doet wat jij wilt :)
 
Ik heb nu een vrij goed script,
Maar het werkt toch nog niet 100% naar behoren..

Code: 
<html>
<head>
<script type="text/javascript">
function sw(y,x){
t=document.getElementById(x).style
t.visibility=(y=='on')?'visible':'hidden'
}
</script>

<style type="text/css">
#div1,#div2 {visibility:hidden;}
</style>
</head>
<body>
<div id=div1>
Text of div1
<button onclick=sw('off','div1')>Hide</button>
</div>
<button onclick=sw('on','div1')>Show</button>

<div id=div2>
Text of div2
<button onclick=sw('off','div2')>Hide</button>
</div>
<button onclick=sw('on','div2')>Show</button>
</body>
</html>

Wat werkt er nu nog niet goed?
De tekst is gewoon ontzichtbaar.
Maar zo is de table waarin ik dit script wil gebruiken ook veel langer dan ik wil.
Heeft er iemand een oplossing :l?
 
Ah, dat is lekker simpel (simpel is goed). Om je probleem te verhelpen moet je switchen tussen display:none en display:block in plaats van visibility:hidden en visibility:visible.

dus deze lijn aanpassen:
Code: 
t.visibility=(y=='on')?'visible':'hidden'

Naar dit:
Code: 
t.display = (y == 'on') ? 'block' : 'none';
 
Het ziet er wel leuk uit :p
Maar werkt helaas niet.

Nu zie je dus wel nog 2 lege lijnen boven de button, ( hetzelfde als ervoor )
Maar als je er op klikt gebeurt er nu nietsmeer.
Ik wou dat ik je kon helpen, maar ik ben meer een php mens^^
 
Dit werkt :eek:
HTML: 
<html>
<head>
<script type="text/javascript">
function sw(y,x)
{
  document.getElementById(x).style.display = (y == 'on') ? 'block':'none';
}
</script>

<style type="text/css">
#div1,#div2
{
  display:none;
}
</style>
</head>
<body>
<div id="div1">
Text of div1
<button onclick=sw('off','div1')>Hide</button>
</div>
<button onclick=sw('on','div1')>Show</button><br />

<div id="div2">
Text of div2
<button onclick=sw('off','div2')>Hide</button>
</div>
<button onclick=sw('on','div2')>Show</button><br />
</body>
</html>
 
Nice :D
Ik zou het zeker niet kunnen hebben gedaan ;)
Duidelijk dat je een echte js prof bent :)
 
ehm, nouja, dankjewel :p Dit valt overigens nog wel mee.

Blij in ieder geval dat ik je kon helpen :)
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan