Как скрыть часть описания и показывать по нажатию на ссылку?

[alinalessioYandex]

Есть описание товара в карточке товара. Можно ли сделать так, чтобы через определенное количество строк описание скрывалось и добавлялась ссылка "Показать все описание". При нажатии на эту ссылку, описание разворачивается полностью. Подскажите пожалуйста как это называется (не акордеон) и как реализуется? Предполагаю, что тут надо менять классы через js, а классы описывают скрытие и раскрытие. Может есть что-то готовое?

[Dimasscus]

48 минут назад, alinalessioYandex сказал:

Есть описание товара в карточке товара. Можно ли сделать так, чтобы через определенное количество строк описание скрывалось и добавлялась ссылка "Показать все описание". При нажатии на эту ссылку, описание разворачивается полностью. Подскажите пожалуйста как это называется (не акордеон) и как реализуется? Предполагаю, что тут надо менять классы через js, а классы описывают скрытие и раскрытие. Может есть что-то готовое?

и суток не прошло как подобное обсуждалось https://opencartforum.com/topic/158459-svernut-razvernut-tekst-na-stranice-tovara/?do=findComment&comment=1558841

[AUSS]

Ограничиваешь блок по высоте к примеру в 200 px

в конце добавляешь кнопку и фон с белым градиентом 

прозрачность -> белый

Ну и по тоглу кнопки меняешь высоту

[warezinspector]

if ($(".description").length > 0) {
        if ($(".description")[0].scrollHeight > 300) {
            $(".description").addClass("text-collapse");
            $(".des-collapse").addClass("hide");
            $(".read-all").on("click", function () {
                $(this).parent().removeClass("text-collapse");
                $(this).addClass("hide");
                $(".description>span").removeClass("toggle");
                $(".des-collapse").removeClass("hide")
            })
        } else {
            $(".description>span").remove()
        }
    }
    $(".des-collapse").on("click", function () {
        $(this).addClass("hide");
        $(".read-all").removeClass("hide").addClass("toggle");
        $(this).parent().addClass("text-collapse")
    });

 

Вот вам скрипт готовый))) разбирайтесь

[alinalessioYandex]

2 часа назад, warezinspector сказал:

if ($(".description").length > 0) {
        if ($(".description")[0].scrollHeight > 300) {
            $(".description").addClass("text-collapse");
            $(".des-collapse").addClass("hide");
            $(".read-all").on("click", function () {
                $(this).parent().removeClass("text-collapse");
                $(this).addClass("hide");
                $(".description>span").removeClass("toggle");
                $(".des-collapse").removeClass("hide")
            })
        } else {
            $(".description>span").remove()
        }
    }
    $(".des-collapse").on("click", function () {
        $(this).addClass("hide");
        $(".read-all").removeClass("hide").addClass("toggle");
        $(this).parent().addClass("text-collapse")
    });

 

Вот вам скрипт готовый))) разбирайтесь

Я вставил код в шаблон catalog/view/theme/perfdec/template/product/product.tpl вместо <?php echo $tab_description; ?>. Код поместил внутрь <?php ?>. Но страница вообще не загружалась. Видимо какая-то ошибка.

[warezinspector]

3 часа назад, alinalessioYandex сказал:

Я вставил код в шаблон catalog/view/theme/perfdec/template/product/product.tpl вместо <?php echo $tab_description; ?>. Код поместил внутрь <?php ?>. Но страница вообще не загружалась. Видимо какая-то ошибка.

Зачем вам самим ломать голову? давайте я сделаю, всего то за 300 руб

[alinalessioYandex]

Попытался сделать сам. Вышло так: https://jsfiddle.net/bpvuos4y/

Текст скрыт. При нажатии на ссылку, текст открывается полностью. Сделано стилями + жс. Но есть недостаток, который я не знаю как исправить. Раскрыть получается, а как сделать, чтобы можно было по нажатию на ту же ссылку (которая переименовывается в "скрыть"), текст снова возвращался в исходное положение, не знаю. Кто может подсказать, как дополнить код, чтобы текст снова сворачивался и текст ссылки переименовывался?