tr a comparsa al click

**fabiovergotti** · 17-06-2013, 20.04.27

Salve a Tutti
nel mio sito ho una pagina (impaginazione con tabella) nella quale ho all'interno di un td un testo....volevo creare una cosa del tipo...al click sul testo compare un c'erto tr....se clicco su un'altra parola del testo ne compare un altro e così via....come posso fare? grazie 1000 in anticipo

22-06-2013, 19.08.59

hai già abbozzato qualcosa se si postamelo che vedo ... ciao

**fabiovergotti** · 24-06-2013, 11.35.38

no...non ho la più pallida idea di come io possa fare :)

24-06-2013, 11.48.45

Non voglio fare spam, ma prova a vedere sul mio sito nella sezione meteo, se è quello che cerchi.

PS. non metto il link per non generare spam.

**fabiovergotti** · 24-06-2013, 15.42.19

Originalmente inviato da australiafever

Non voglio fare spam, ma prova a vedere sul mio sito nella sezione meteo, se è quello che cerchi.

PS. non metto il link per non generare spam.

non proprio...ma una cosa più simile a questa (in alto a destra dove c'è la freccia con scritto espandi) solo che invece di una immagine ho una scritta

24-06-2013, 16.14.04

Prova a cercare su Google ad esempio "div a comparsa" e poi quello che trovi lo adatti alla tabella.

**alemoppo** · 24-06-2013, 16.38.15

Se vuoi comprimere/espandere del contenuto, è conveniente mostrarlo per default, e renderlo invisibile. Poi, quando lo vuoi mostrare, cambi proprietà css tramite js: così, anche chi non ha javascript, può vedere il contenuto. Una cosa del tipo:

Codice HTML:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>prova</title>
</head>
<body>
<button onClick="toggla()">mostra/nascondi</button>
<div id="contenuto">
contenuto che si vedrà solo se si preme il pulsante...
</div>
<script type="text/javascript">
window.onload = function()
{
		document.getElementById('contenuto').style.display="none";
}
function toggla()
{
	var elemento = document.getElementById('contenuto');
	if(elemento.style.display == 'none')
	{
		//l'elemento è nascosto. Lo mostriamo!
		elemento.style.display = 'block';
	}
	else
	{
		//l'elemento è visibile: lo nascondiamo!
		elemento.style.display = 'none';
	}
}
</script>
</body>
</html>

Non usare le tabelle per i contenuti!

Ciao!

24-06-2013, 23.23.07

e se vuoi usare ancora meno codice per mostrare e nascondere un elemento (ma non utilizzare il tr della tabella come gia ti anno suggerito) utilizza la libreria jquery:

Codice HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});
</script>
</head>
<body>

<p>ciao mondo</p>
<button>mostra/nascondi</button>

</body>
</html>

**alemoppo** · 24-06-2013, 23.43.45

Meno codice, ma includendo un file di alcuni kB

.
Se si include jQuery, a questo punto forse è più bello usare .animate().

Ciao!

25-06-2013, 20.21.23

con la speranza che in internet non girino ancora pentium I, jquery non dovrebbe essere troppo pesante neanche con dispositivi mobile... cmq volevo solo dare un'alternativa.

**alemoppo** · 25-06-2013, 22.40.27

no ma hai fatto benissimo!

Ciao!

**fabiovergotti** · 18-07-2013, 13.55.50

ok grazie a tutti

Discussione: tr a comparsa al click

LinkBack

Strumenti discussione

Display

tr a comparsa al click

Regole di scrittura