Как убрать текст под <cut> или readmore

[bowandtie]

Добрый день, уважаемые форумчане!

 

Заинтересовал блок с текстом на главной странице сайта wildberries (см. чуть выше footer).

 

 

Получается, что текст скрывается градиентом и при желании раскрывается по кнопке "Читать далее". Если css стили можно вытащить через просмотр кода, то скрипт кнопки достать не удалось.

 

Как думаете, как заставить кнопку переключать свойства css, чтобы убирался градиент и открывался полный текст?

[Гість]

а зачем кнопка... а если по hover сделать?

[bowandtie]

Кнопкой выглядит привычней что-ли....хотя hover - идея неплохая.

[bowandtie]

В общем, отвечаю на свой же вопрос.

 

Вставляем исходный код в модуле "Приветствие"

<div class="text_block-wrapper">
<div class="text_block" id="box2" style="height: 170px;">
<h2 style="margin-bottom: 10px;">Заголовок</h2>

<p style="text-align: justify; margin-bottom: 10px;">Текст</p>

</div>

<div class="text_block-overlay" id="box" style="display: block;"> </div>
<a href="#" id="toggler">Читать далее</a> </div>

Чуть ниже в этом же тексте или в отдельном файле нужно вставить скрипт:

<script type="text/javascript">
window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('box', this);
        downbox('box2', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
		toggler.innerHTML = 'Закрыть';
	}
	else {
		div.style.display = 'block';
		toggler.innerHTML = 'Читать далее';
	}
}
function downbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.height == '170px') {
		div.style.height = 'auto';
		toggler.innerHTML = 'Закрыть';
	}
	else {
		div.style.height = '170px';
		toggler.innerHTML = 'Читать далее';
	}
}
</script>

В css файле шаблона вставляем свойства:

.text_block-wrapper {
    margin: 25px auto 25px;
}
.text_block {
    padding: 3px 9px 3px 0;
    font-size: 12px;
    height: 170px;
    overflow: hidden;
}
.text_block-overlay {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffffff');
    background: -webkit-linear-gradient(rgba(255,255,255,0),#fff);
    background: -o-linear-gradient(rgba(255,255,255,0),#fff);
    background: linear-gradient(rgba(255,255,255,0),#fff);
    height: 145px;
    margin: -145px 9px 5px 0;
    position: relative;
    z-index: 10;
}

Думаю, можно сделать изящнее код, но у меня работает и так.

 

В итоге, мы получаем описание магазина, как на главной странице wildberries c эффектом градиента и скрытия текста. Полезно для SEO и удобно для пользователя.

[btrotsky]

В 17.11.2015 в 13:43, bowandtie сказал:

В общем, отвечаю на свой же вопрос.

 

Вставляем исходный код в модуле "Приветствие"

<div class="text_block-wrapper">
<div class="text_block" id="box2" style="height: 170px;">
<h2 style="margin-bottom: 10px;">Заголовок</h2>

<p style="text-align: justify; margin-bottom: 10px;">Текст</p>

</div>

<div class="text_block-overlay" id="box" style="display: block;"> </div>
<a href="#" id="toggler">Читать далее</a> </div>

Чуть ниже в этом же тексте или в отдельном файле нужно вставить скрипт:

<script type="text/javascript">
window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('box', this);
        downbox('box2', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
		toggler.innerHTML = 'Закрыть';
	}
	else {
		div.style.display = 'block';
		toggler.innerHTML = 'Читать далее';
	}
}
function downbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.height == '170px') {
		div.style.height = 'auto';
		toggler.innerHTML = 'Закрыть';
	}
	else {
		div.style.height = '170px';
		toggler.innerHTML = 'Читать далее';
	}
}
</script>

В css файле шаблона вставляем свойства:

.text_block-wrapper {
    margin: 25px auto 25px;
}
.text_block {
    padding: 3px 9px 3px 0;
    font-size: 12px;
    height: 170px;
    overflow: hidden;
}
.text_block-overlay {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffffff');
    background: -webkit-linear-gradient(rgba(255,255,255,0),#fff);
    background: -o-linear-gradient(rgba(255,255,255,0),#fff);
    background: linear-gradient(rgba(255,255,255,0),#fff);
    height: 145px;
    margin: -145px 9px 5px 0;
    position: relative;
    z-index: 10;
}

Думаю, можно сделать изящнее код, но у меня работает и так.

 

В итоге, мы получаем описание магазина, как на главной странице wildberries c эффектом градиента и скрытия текста. Полезно для SEO и удобно для пользователя.

 

 

попробовал по вашему примеру но что-то не получается, не открывается текст далее, поможете?

[Allaur]

В 17.11.2015 в 13:43, bowandtie сказал:

В общем, отвечаю на свой же вопрос.

 

Вставляем исходный код в модуле "Приветствие"

<div class="text_block-wrapper">
<div class="text_block" id="box2" style="height: 170px;">
<h2 style="margin-bottom: 10px;">Заголовок</h2>

<p style="text-align: justify; margin-bottom: 10px;">Текст</p>

</div>

<div class="text_block-overlay" id="box" style="display: block;"> </div>
<a href="#" id="toggler">Читать далее</a> </div>

Чуть ниже в этом же тексте или в отдельном файле нужно вставить скрипт:

<script type="text/javascript">
window.onload= function() {
	document.getElementById('toggler').onclick = function() {
		openbox('box', this);
        downbox('box2', this);
		return false;
	};
};
function openbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.display == 'block') {
		div.style.display = 'none';
		toggler.innerHTML = 'Закрыть';
	}
	else {
		div.style.display = 'block';
		toggler.innerHTML = 'Читать далее';
	}
}
function downbox(id, toggler) {
	var div = document.getElementById(id);
	if(div.style.height == '170px') {
		div.style.height = 'auto';
		toggler.innerHTML = 'Закрыть';
	}
	else {
		div.style.height = '170px';
		toggler.innerHTML = 'Читать далее';
	}
}
</script>

В css файле шаблона вставляем свойства:

.text_block-wrapper {
    margin: 25px auto 25px;
}
.text_block {
    padding: 3px 9px 3px 0;
    font-size: 12px;
    height: 170px;
    overflow: hidden;
}
.text_block-overlay {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff',endColorstr='#ffffffff');
    background: -webkit-linear-gradient(rgba(255,255,255,0),#fff);
    background: -o-linear-gradient(rgba(255,255,255,0),#fff);
    background: linear-gradient(rgba(255,255,255,0),#fff);
    height: 145px;
    margin: -145px 9px 5px 0;
    position: relative;
    z-index: 10;
}

Думаю, можно сделать изящнее код, но у меня работает и так.

 

В итоге, мы получаем описание магазина, как на главной странице wildberries c эффектом градиента и скрытия текста. Полезно для SEO и удобно для пользователя.

Отлично всё работает
Спасибо