[dhtml] Content op zelfde plaats afhankelijk van radiobutton

[a3konijn]

Ik wil het volgende doen:

Afhankelijk van een geselecteerde radiobutton from-elementen of andere content tonen of verbergen.

Daarbij heb ik heb de volgende tabel:

code:

<table>
  <tr>
    <td>
      <input type="radio" name="x" value="optie A" onclick="showelement(true,'optiea');showelement(false,'optieb')"/>
      <input type="radio" name="x" value="optie B" onclick="showelement(true,'optieb');showelement(false,'optiea')"/>
    </td>
  </tr>
  <tr>
    <td>
      <table id="optiea" style="visibility:hidden">
           <!-- inhoud behorende bij optie a --//>
      </table>
      <table id="optieb" style="visibility:hidden">
           <!-- inhoud behorende bij optie b --//>
      </table>
    </td>
  </tr>
</table>

Waarbij de volgende javascriptcode hoort

code:

<script type="text/javascript">
function showelement(show,elmnt)
{
  if(show) {
    document.all[elmnt].style.visibility="visible"
  }
  else {

    document.all[elmnt].style.visibility="hidden"
  }
}
</script>

Het probleem is echter dat op deze manier de items niet op dezelfde plaats verschijnen maar dat de tabel met id="optieb" onder die met optiea verschijnt.

Echter ik wil ook geen absolute positionering gebruiken omdat de pagina's waarop dit gebruikt gaat worden geresized moeten kunnen worden.

Ik wil dus als het ware de contentpositie relatief ten opzichte van een tag aangeven.

Iemand een idee hoe ik dit op kan lossen?

[ Voor 35% gewijzigd door a3konijn op 13-03-2003 21:43 . Reden: Typo's en ander foutjes ]

[Glimi]

HTML, JavaScript en Flash topics *13-01*

De specialisten op het gebied van DHTML en JavaScript wonen niet in /14, maar in /13, vandaar de kick richting /13 dus
Succes ermee

[Verwijderd]

code:

function showelement(show,elmnt) {
  if(show) {
    document.getElementById(elmnt).style.display="block";
  }
  else {
    document.getElementById(elmnt).style.display="none";
  }
}

Paar opmerkingen:

• Vergeet de ;'s achter je javascript regels niet. Ze zijn niet verplicht maar weglaten is slordig
• Gebruik getElementById i.p.v. document.all wegens standaard-support
• Probeer je layout zo min mogelijk met TABLEs te bouwen. Gebruik DIVs, SPANs en CSS.

Nog even een uitleg:
Jouw methode werkt niet, omdat style.visibility het object niet uit de renderflow haalt, maar het alleen onzichtbaar maakt. Wat jij zocht was dat het hele document zich gedraagt alsof het element er uberhaupt niet is. Daar zorgt die style.display voor.

[ Voor 3% gewijzigd door Verwijderd op 13-03-2003 21:55 . Reden: RSI-typo ]

[a3konijn]

Klopt het dat dit niet met <table> tags werkt??

Maar met <div> werkt het perfect!!

Thanxs!!!!!!!!!!!!!!!

[Verwijderd]

Voor tables kun je waarschijnlijk display="table"; gebruiken...maar dat heb ik nog nooit getest.