html_decode + substring + JS

[XRS 0]

Boa tarde,

 

Estou com alguns problemas na criação de um uma situação tipo blog onde é mostrado um excerto do texto, aparece um botão de "Show More/Less" que ao carregar apresenta/esconde o restante texto. O texto está a ser guardado como html. Se utilizar a informação como texto simples, funciona perfeitamente, mas as tags HTML aparecem como texto simples. No entanto se efetuar um html_decode ou html_entity_decode o sistema de "Mostrar/Esconder" o texto deixa simplesmente de funcionar. Será que me podem ajudar neste sentido?

O código do JS e PHP sem alterações com o HTML_decode:

    $item->description =  strip_tags($item->description);
    if( strlen( $item->description ) > 70 ) {
        $item->description = substr($item->description, 0, 50 ) .
        '<span class="more-link">... <a href="#"><i class="fa fa-caret-down"></i> ' . t( 'theme_more', 'More' ) . '</a></span>' .
        '<span class="hidden-part">' . substr( $item->description, 50 )  . '</span>' .
        '<span class="less-link"><a href="#"><i class="fa fa-caret-up"></i> ' . t( 'theme_less', 'Less' ) . '</a></span>';
    }

$( '.description .more-link a, .description .less-link a' ).on( 'click', function(e) {
    e.preventDefault();
    var desc = $(this).parents( '.description' );
    var part = desc.find( '.hidden-part' ),
    more = desc.find( '.more-link' ),
    less = desc.find( '.less-link' );
    if( part.is( ':visible' ) ) {
        part.hide();
        more.show();
        less.hide();
    } else {
        part.show();
        more.hide();
        less.show();
    }
});

 

Utilizando o sistema como plain text, funciona perfeitamente:

Ao carregar em More:

 

No entanto se efetuar um html_decode ao texto:

    $item->description =  html_decode($item->description);
    if( strlen( $item->description ) > 70 ) {
        $item->description = substr($item->description, 0, 50 ) .
        '<span class="more-link">... <a href="#"><i class="fa fa-caret-down"></i> ' . t( 'theme_more', 'More' ) . '</a></span>' .
        '<span class="hidden-part">' . substr( $item->description, 50 )  . '</span>' .
        '<span class="less-link"><a href="#"><i class="fa fa-caret-up"></i> ' . t( 'theme_less', 'Less' ) . '</a></span>';
    }

 

Fico com tudo desfigurado:

 

Depois de carregar no More:

Não estou a conseguir ultrapassar esta dificuldade. Alguma ideia ou sugestão de forma a conseguir ultrapassar isto?

Muito obrigado :)

[HappyHippyHippo 1177]

isso é porque estás a quebrar HTML quando fazes substr

já reparaste que nos sites que vês online, eles nunca quebram o texto ? o que acontece é esconder/apresentar uma zona de conteúdo

[XRS 0]

Realmente não me tinha passado isso pela cabeça, mas faz todo o sentido...

Eu via algum texto do <p> e pensava que não parava em nenhum código HTML, portanto não podia dar o break às tags.

A verdade é que ele abre o <p> mas depois não aparece o texto todo e não fecha o respetivo <p>. Faz todo o sentido. Obrigado pela informação :) Vou criar uma função para ler o primeiro paragrafo e fazer o substr aí.