table css che si può nascondere

**nikitoz78bs** · 06-03-2012, 10:16

Salve,
sto cercando un css che mi permetta di mostrare e nascondere una tabella posizionata nella parte alta del mio sito. Vorrei che al primo accesso scendesse tipo tendina e che poi l'utente se vuole la nasconde. ho cercato vari css os cript ma è tutta roba vecchia. qualcuno conosce qualcosa? anche di acquistabile. grazie

**Mich_** · 06-03-2012, 16:35

Se vuoi mostrare/nascondere al click del mouse, non puoi farlo con solo CSS: e` necessario un mimimo di JS.

Pero` con il CSS puoi preparare le due condizioni (aperto/chiuso), e poi associare una o l'altra cliccando un bottone (tipo toggle).
Attenzione che prima devi decidere cosa deve accadere se JS non e` abilitato.

La tecnica non e` cambiata negli anni, per cui puo` andar bene anche il JS vecchio almeno come logica di funzionamento, pero` conviene che il JS si limiti ad assegnare una classe al tuo blocco (cosi` come avviene in alcuni menu a tendina)

Con il CSS da solo (ad esempio se non vuoi usare JS), puoi aprire/chiudere la tendina al passaggio del mouse su un link (o su un'area), esattamente come avviene con i menu a tendina.

**nikitoz78bs** · 06-03-2012, 16:39

ok grazie. ne ho trovato uno carino. condivido qui il codice nel caso servisse

----------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Documento senza titolo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
function toggle5(showHideDiv, switchImgTag) {
var ele = document.getElementById(showHideDiv);
var imageEle = document.getElementById(switchImgTag);
if(ele.style.display == "block") {
ele.style.display = "none";
imageEle.innerHTML = '[img]images/plus.png[/img]';
}
else {
ele.style.display = "block";
imageEle.innerHTML = '[img]images/minus.png[/img]';
}
}
</script></head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<table width="100%" cellpadding="0" cellspacing="0">
<tr><td>
<div id="headerDivImg">
<div align="center">[img]images/minus.png[/img]
</div>
</div></td></tr></table>
<div id="contentDivImg" style="display: block;">
<table width="100%" cellpadding="0" cellspacing="0">
<tr>
<td bgcolor="#CCCCCC">Qui mettete il menu o il contenuto che volete nascondere</td>
</tr></table>
</div>
</body>
</html>
----------------

**Mich_** · 06-03-2012, 17:36

La struttura del JS e` corretta.

La struttura HTML e` completamente da rivedere secondo le moderne tecniche (quella struttura e` praticamente HTML2, e potrebbe dare qualche problema, sopratutto nel posizionamento).

Poi io preferirei assegnare due CSS all'elemento, esempio:

codice:

function inizial(showHideDiv) {
  var visibile = 1;      // di default visibile
  var ele = document.getElementById(showHideDiv);
}
  
function toggle5(showHideDiv) {
  if(visibile) {
    ele.style.className = "clHidden";
    visibile = 0;
  } else {
    ele.style.display = "clVisible";
    visibile = 1;
  }
}

dove clVisible e clHidden sono le classi da assegnare al blocco per renderlo visibile o nascosto

e chiaramente inzial() e` da far girare all'evento onload, mentre il toggle e` richiamato dal bottone.

PS: quando posti codice, usa i tag appropriati (ad esempio CODE)

**nikitoz78bs** · 06-03-2012, 18:29

ops eheh ok userò i ltag code.
mi potresti gentilmente mettere questo codice nel mio che ho psotato per vedere coem assegni le variabili ai botton igrazieee

**Mich_** · 07-03-2012, 09:39

mi potresti gentilmente mettere questo codice nel mio

NO, mi spiace. Quel codice HTML e` completamente da rifare e non lo tocco.

Il JS sostituisce completamente quello postato da te.

L'HTML e` da scrivere da zero, associato ad un CSS opportuno.
In particolare:
- la tabella va eliminata (sostituire con tag <div>)
- tutte le formattazioni HTML vanno tolte (sostituirle con formattazioni CSS)
- ci devono essere nel CSS due classi (che io nel js ho chiamato clVisible e clHidden) che vanno applicate al blocco da visualizzare/nascondere.

Discussione: table css che si può nascondere

Strumenti discussione

Ricerca discussione

Visualizza

table css che si può nascondere

Permessi di invio