"Read more" displays when there is no more to read (collapsible text element with dataset)

Ask the community
1

I’m using the collapsible text element linked to my dataset. It can pull the right text into the field, but the “Read more” will display even if there’s nothing more to read. Does anyone know what code may work to hide the read more button dynamically if there is no additional text to load?

3

データセットの読み込みが完了したら、.collapse() を使用してそのテキスト要素を非表示にすることができます。最も洗練されたアプローチではありませんが、データセットが利用可能になってから約 3 秒後にテキスト要素が空かどうかを確認し、空の場合は非表示にすることを検討してもよいでしょう。

$w("#yourDataset").onReady( () => {
    setTimeout(()=>{
        const text = $w("#yourTextElem").text;
        if(!text.length) $w("#yourTextElem").collapse();
    },3000);
  } );
4

Thank you, but I wish only to hide the “read more” button. I want to do this if the amount of text is so short that pressing “read more” does not display any additional text (as the button has no purpose in these situations).

5

You might be able to achieve that by either removing the “read more” button or by displaying an empty string like “” on the “read more” button.

$w('#myCollapsibleText').removeReadMoreButton();
$w('#myCollapsibleText').addReadMoreButton('');
6

I could try these, but I only want the button hidden if there is no additional text to display after the “read more” button, not if there is no text at all which I believe is what your code is looking for.

7

Saludos, has esto

paso 1: desconecta temporalmente el texto plegable de la base de datos para que se habilite la opción cambiar texto
paso 2: no me deja adjuntar la imagen pero bueno, pulsas click derecho en el texto plegable, después en vincular y desactivas la vista del botón leer más.
paso 3: vincula el texto plegable con el conjunto de datos.
paso 4: pones el siguiente código en tu página:

                    texcolla($w("#collapsibleText1")); //textos plegables
                    texcolla($w("#collapsibleText2"));

//función para habilitar el botón leer más cuando el texto a alcanzado cierta cantidad de caracteres
function texcolla(param) {

const limite = 144; // cuantos caracteres mínimo debe tener el string para que se active el botón leer más
if (param.text.length >= limite) {
param.readMoreActionType = ‘ExpandOnCurrentPage’; // se cambia el tipo de boton a expandir (antes estaba en vincular para que no muestre el botón)
param.addReadMoreButton() // se habilita el botón leer más

                        }