Espandere una riga di testo al clic o passaggio del mouse

[KillerWorm]

Volevo eliminare quella riga vuota che c'era subito dopo la riga contenente la data ecc...e ce l'ho fatta ma si è disattivato l'effetto transizione...
Questo il codice...che cavolata ho combinato? :-)

Sai quando ti ho scritto:

quello che chiedi non è così scontato o semplice come potrebbe sembrare.

Era quello che intendevo dopo che ho provato ad utilizzare la proprietà display più o meno come hai provato a fare tu
Chiaramente display non ha un valore numerico per cui ottenere una variazione da un punto ad un altro. Oltretutto il "display:none" fa sfasciare il layout della tabella (prendilo per buono, non entro nel discorso tecnico).

La strada da prendere, a mio parere, è un'altra.
Lo spazio che rimane sulla riga è dovuto al padding dentro le celle (td). Bisognerebbe agire in qualche modo su quello per azzerarlo quando si chiude la riga.

Nel caso puoi fare qualche altra prova in questo senso.
Faccio qualche prova anche io ma non ti garantisco niente.

[osborn87]

Sai quando ti ho scritto:
Era quello che intendevo dopo che ho provato ad utilizzare la proprietà display più o meno come hai provato a fare tu
Chiaramente display non ha un valore numerico per cui ottenere una variazione da un punto ad un altro. Oltretutto il "display:none" fa sfasciare il layout della tabella (prendilo per buono, non entro nel discorso tecnico).

La strada da prendere, a mio parere, è un'altra.
Lo spazio che rimane sulla riga è dovuto al padding dentro le celle (td). Bisognerebbe agire in qualche modo su quello per azzerarlo quando si chiude la riga.

Nel caso puoi fare qualche altra prova in questo senso.
Faccio qualche prova anche io ma non ti garantisco niente.

Ciao, ho provato a modificare il padding delle celle td ma, oltre ad appiccicare il testo alla tabella, la seconda riga (pur assottigliandosi) non se ne va! (ma farlo come dicevi all'inizio con javascript/jquery è un casino?

Per quanto riguarda lo slide di testo ho trovato questo codice:

$(document).ready(function(){    fixFlexsliderHeight();
});

$(window).load(function() {
    fixFlexsliderHeight();
});

$(window).resize(function() {
    fixFlexsliderHeight();
});

function fixFlexsliderHeight() {
    // Set fixed height based on the tallest slide
    $('.flexslider').each(function(){
        var sliderHeight = 0;
        $(this).find('.slides > li').each(function(){
            slideHeight = $(this).height();
            if (sliderHeight < slideHeight) {
                sliderHeight = slideHeight;
            }
        });
        $(this).find('ul.slides').css({'height' : sliderHeight});
    }); }

Però non saprei dove inserirlo e come...

[KillerWorm]

ma farlo come dicevi all'inizio con javascript/jquery è un casino?

Ciao, ho provato e risulta forse più complicato che risolverlo con css. In genere con jQuery si può usare qualche show() hide() ma in questo caso, quando avviene l'animazione, gli elementi della tabella (che sono di tipo table-qualchecosa) subiscono una momentanea trasformazione in elementi di blocco, il che va a creare problemi collaterali nella visualizzazione.

Ad ogni modo ho fatto qualche altra prova con css e sembra si riesca a risolvere (sostituisci ciò che hai messo prima, con questo codice così com'è):

.gigpress-table tr.gigpress-info{
  background: #b3e7dd;
  -webkit-transition: line-height .5s;
     -moz-transition: line-height .5s;
          transition: line-height .5s;
  line-height: 0%;
}
.gigpress-table tr.gigpress-info>td{
  overflow:hidden;
  -webkit-transition: opacity .5s, padding-top .5s, padding-bottom .5s;
     -moz-transition: opacity .5s, padding-top .5s, padding-bottom .5s;
          transition: opacity .5s, padding-top .5s, padding-bottom .5s;
  padding-top: 0;
  padding-bottom: 0;
  opacity: 0;
}
.gigpress-table tr.gigpress-info:hover, .gigpress-table tr.gigpress-row:hover~tr.gigpress-info{
  line-height: 130%;
}
.gigpress-table tr.gigpress-info:hover>td, .gigpress-table tr.gigpress-row:hover~tr.gigpress-info>td{
  padding-top: 10px;
  padding-bottom: 10px;
  opacity: 1;
}
.gigpress-table tr.gigpress-info>td *{
  height:0;
  margin:0;
}

Ho fatto delle prove direttamente sulla pagina del tuo sito, tramite la console-web, e mi pare funzioni.
Tieni presente alcune cose però, dentro le celle della tua tabella ci sono dei contenuti che impediscono il completo azzeramento della riga. Alcuni elementi comportano anche degli errori di validazione (ho notato dei tag <p>, peraltro inutili, all'interno di <span>). Questo potrebbe generare dei problemi di visualizzazione inaspettati (vedi il discorso sulla validazione).
Ad ogni modo, ho inserito le ultime regole proprio per azzerare tutto ciò che si può azzerare all'interno delle celle, così da permettere la riduzione completa delle righe (è chiaro che questo può comportare il rischio di azzerare altri contenuti che magari non vanno azzerati). Sarebbe quindi opportuno assicurarsi di ripulire al meglio i contenuti che stanno nelle celle, anche i link sulla prima colonna (con le funzioni per aggiungere al calendario, ecc.) che probabilmente non vuoi visualizzare (da quel che mi pare di capire) ma che sono comunque presenti inutilmente. Questo resta comunque un discorso a parte.

Per ora puoi provare così. Fammi sapere.

Per quanto riguarda lo slide di testo ho trovato questo codice:

Si potrebbe mettere in un tag <script> direttamente nell'head della tua pagina.
Gli do comunque uno sguardo.