En celle der åbner og lukker - hvordan?

Mener du noget i denne stil ???
http://www.jart.dk/jgom/donweb/menu.html

Det kan laves på en del forskellige måder, tabelceller/rækker kan glimrende bruges, men afhængig af dine ønsker kan andre element-typer være bedre !-)

-- og jespers menu-eksempel bruger ikke en teknik, som kan anbefales til dit brug !o]

Jeps jesper-moeller ;-)

Roenving - hvilken metode kan så anbefales?

Hvis det ligner det du leder efter bør du kigge på http://exp.dk/spm/654310
hvor rønvig hjælper mig med min version...der er et par eks. på hvordan det kan gøres.....

roenving første forslag på http://exp.dk/spm/654310 med brug af flere div er nok den "nemmeste" at gå til ???
Min finel har en ekstra linie for at få IEmac med....men den behøves ikke

-- og præcis den teknik kan også bruges med tabelrækker !-)

>> og jespers menu-eksempel bruger ikke en teknik, som kan anbefales til dit brug !o]

Nu ved vi jo ikke helt hvad hun skal bruge det til...*G*..... ;-)

-- næh, men hun plejer at være god til at illustrere sine behov, så jeg tror på hendes eksempel !-)

*S*...regnede også kun med min version kunne bringe hende på sporet af en løsning...

F.eks. sådan, som er meget tæt på illustrationen:

<script type="text/javascript">
var oldElm = null;
function showHide(elm){
  if(oldElm)
    oldElm.style.display = 'none';
  if(typeof elm != 'object')
    oldElm = document.getElementById(elm);
  oldElm.style.display = oldElm.style.display != 'block'? 'block' : 'none';
}
</script>

<style type="text/css">
body{font-family:verdana,sans-serif;font-size:large;}
#minTabel{border-collapse:collapse;width:500px;border:1px solid black;text-align:center;}
#minTabel td{border:1px solid black;cursor:pointer;}
#minTabel .hidTr{background-color:#ccc;display:none;}
</style>

<table id="minTabel">
  <tr>
    <td onclick="showHide('tr1');">Her er et link mere.</td>
  </tr>
  <tr id="tr1" class="hidTr" onclick="showHide(this);">
    <td>Som åbner en celle.</td>
  </tr>
  <tr>
    <td onclick="showHide('tr2');">Se hvordan her.</td>
  </tr>
  <tr id="tr2" class="hidTr" onclick="showHide(this);">
    <td>Her er en forklaring på hvordan.</td>
  </tr>
  <tr>
    <td onclick="showHide('tr3');">En anden tekst som man kan klikke på.</td>
  </tr>
  <tr id="tr3" class="hidTr" onclick="showHide(this);">
    <td>Her er et link mere.</td>
  </tr>
</table>

Tak - tester den lige.

Hvilke browsere virker den mon i?

Foretrækker også tabeller i stedet for layers *S*

Næsten roenving - mangler lige at den lukker igen når jeg klikker på samme link.

-- den virker i alle mine browsere, men jeg har en formodning om at den ternære operator ikke virker i IE/mac, men da det kun er mac-brugere på forældede mac'er og webudviklere, der tror de kan kompatibilitetsteste mod IE på den browser, som overhovedet har den, tror jeg ikke du skal bekymre dig !-)

Hrm, der havde jeg overset en bivirkning ved en ombygning, men så skal scriptet se sådan ud:

<script type="text/javascript">
var oldElm = null;
function showHide(elm){
  if(typeof elm != 'object')
    elm = document.getElementById(elm);
  var state = elm.style.display != 'block';
  if(oldElm)
    oldElm.style.display = 'none';
  if(typeof elm != 'object')
    elm = document.getElementById(elm);
  elm.style.display = state ? 'block' : 'none';
  oldElm = elm;
}
</script>

-- men den ser sjov ud i Opera, og der er nogle mærkværdige bivirkninger i Gecko-browserne, som jeg tidligere har oplevet og kurereret, det vil jeg lige kiggenærmere på ...

Hrm, der skulle snedkereres, fordi både Gecko og Opera insisterer på at bruge de rigtige display-properties, mens IE nægter at benytte dem (de tilhører css2, som M$ benægter eksistensen af i den forstand, at de kalder det en midlertidig og ikke færdig standard !-)

-- men det bliver til noget principielt rod, når man er nødt til at sætte en en style-attribut på den første række og aflæse den onload ,-(

<script type="text/javascript">
var oldElm = null,rowStyle;
window.onload = function(){
  rowStyle = document.getElementById('minTabel').getElementsByTagName('tr')[0].style.display;
  rowStyle = rowStyle ? rowStyle : 'block';
}
function showHide(elm){
  if(typeof elm != 'object')
    elm = document.getElementById(elm);
  var state = elm.style.display != rowStyle;
  if(oldElm)
    oldElm.style.display = 'none';
  if(typeof elm != 'object')
    elm = document.getElementById(elm);
  elm.style.display = state ? rowStyle : 'none';
  oldElm = elm;
}
</script>

<style type="text/css">
body{font-family:verdana,sans-serif;font-size:large;}
#minTabel{border-collapse:collapse;width:500px;border:1px solid black;text-align:center;}
#minTabel tr{display:table-row;}
#minTabel td{border:1px solid black;cursor:pointer;}
#minTabel .hidTr{background-color:#ccc;display:none;}
</style>

<table id="minTabel">
  <tr style="display:table-row;">
    <td onclick="showHide('tr1');">Her er et link mere.</td>
  </tr>
  <tr id="tr1" class="hidTr" onclick="showHide(this);">
    <td>Som åbner en celle.</td>
  </tr>
  <tr>
    <td onclick="showHide('tr2');">Se hvordan her.</td>
  </tr>
  <tr id="tr2" class="hidTr" onclick="showHide(this);">
    <td>Her er en forklaring på hvordan.</td>
  </tr>
  <tr>
    <td onclick="showHide('tr3');">En anden tekst som man kan klikke på.</td>
  </tr>
  <tr id="tr3" class="hidTr" onclick="showHide(this);">
    <td>Her er et link mere.</td>
  </tr>
</table>

*lol*

-- og så fik jeg gentaget to linjer, den sidste forekomst skal selvfølgelig slettes (det betyder med garanti intet alvorligt !-)

<script type="text/javascript">
var oldElm = null,rowStyle;
window.onload = function(){
  rowStyle = document.getElementById('minTabel').getElementsByTagName('tr')[0].style.display;
  rowStyle = rowStyle ? rowStyle : 'block';
}
function showHide(elm){
  if(typeof elm != 'object')
    elm = document.getElementById(elm);
  var state = elm.style.display != rowStyle;
  if(oldElm)
    oldElm.style.display = 'none';
  elm.style.display = state ? rowStyle : 'none';
  oldElm = elm;
}
</script>

roenving >> Lyder lidt som det problem jeg havde med min men der kun virkerde i IE hvis den stratede åben ...*S*

Så er der lige et problem mere. Lige nu lukker den også når jeg trykker på den celle som åbner sig.

Ja, jeg skal være på tværs *G*

-- lige her var det nu ikke problemet, det største problem var at IE ikke har en display:table-row; og de andre at rendere en tabel-række som en tabel-række, hvis den får andre dispaly-properties end det ,-(

-- men hov, jeg skal da lige teste noget !-)

-- det med at den lukker på cellen er nu lavet med vilje, men hvis du ikke vil have det, fjerner du bare onclicks på de rækker !o]

Ok - se i koden Miss-G - du skal også lave lidt *G*

-- og det er jo heller ikke usandsynligt, at du hellere vil have links end have klik på hele tabelcellen, men der skal være plads til begejstring !-)

-- øeh, forbedring ...

Perfekt - det kunne mig godt finde ud af at fjerne *G*

Læg så lige et svar og jesper-moeller får også en lille bid af kagen, selvom jeg ikke brugte layers *S*

-- velbekomme '-)

Na.... point behøver jeg ikke.... jeg bruger den bare til noget fjollet.... (Så som at plage livet af roenvig med JS spørgsmål...*G*)

Ja roenving er en plaget mand med den viden han render rundt med *G*

-- og det jeg skulle teste resulterede i dette (som bare har nogle andre men principielt mere spiselige irritamenter !-)

<script type="text/javascript">
var oldElm = null;
function showHide(elm){
  if(typeof elm != 'object')
    elm = document.getElementById(elm);
  var state = !elm.style.display;
  if(oldElm)
    oldElm.style.display = 'none';
  elm.style.display = state ? 'none' : '';
  oldElm = elm;
}
</script>

<style type="text/css">
body{font-family:verdana,sans-serif;font-size:large;}
#minTabel{border-collapse:collapse;width:500px;border:1px solid black;text-align:center;}
#minTabel tr{display:table-row;}
#minTabel td{border:1px solid black;cursor:pointer;}
#minTabel .hidTr{background-color:#ccc;}
</style>

<table id="minTabel">
  <tr>
    <td onclick="showHide('tr1');">Her er et link mere.</td>
  </tr>
  <tr id="tr1" class="hidTr" onclick="showHide(this);" style="display:none;">
    <td>Som åbner en celle.</td>
  </tr>
  <tr>
    <td onclick="showHide('tr2');">Se hvordan her.</td>
  </tr>
  <tr id="tr2" class="hidTr" onclick="showHide(this);" style="display:none;">
    <td>Her er en forklaring på hvordan.</td>
  </tr>
  <tr>
    <td onclick="showHide('tr3');">En anden tekst som man kan klikke på.</td>
  </tr>
  <tr id="tr3" class="hidTr" onclick="showHide(this);" style="display:none;">
    <td>Her er et link mere.</td>
  </tr>
</table>

-- og tak for point ;~}

Ja...arme ham...
Og så den slags fjollede ting vi kan finde på at plage ham med......*G*

Behøver jeg den style du har lavet? Kan jeg bare slette den eller går der så kludder i den?

Den volder mig allerede problemer. Kan den ikke klaske sammen, hvis der ligger en tabel inde i cellen?

-- den sidste udgave skulle ikke behøve en speciel style, mens i den anden står display:none; jo i stylesheetet !-)

-- iøvrigt må du gerne placere flere klasser i et element, så f.eks. dette er helt fint:

<htmlElement class="hidTr roedKant fedSkrift">

-- selvfølgelig under forudsætning at de tilsvarende selectorer findes i et stylesheet !o]

Det er nok fordi jeg har gang i fiktive links:

<td colspan="2" class="textmain2"><a href="#" onClick="showHide('tr1');"><strong>En submit knap &aelig;ndres</strong></a></td>

(Det er på multimedie siden jeg prøver at ændre)....

Starter lige forfra og prøver med den sidste kode du smed. Bruger nemlig et andet stylesheet end i eksemplet.

<td colspan="2" onClick="showHide('tr1');" class="textmain2"><strong>
<a href="#">En submit knap &aelig;ndres</a></strong></td>

Så virker det.

Tusind tak for hjælpen *S*

¡Muy bueno !-)