Как прочитать спрятанный текст в more-link?

Мила · June 3, 2017

Скрытый текст

Делаю сайт http://imbim.ru/. Через страницу http://imbim.ru/Школа-моделей/ выхожу на http://imbim.ru/Визаж-и-макияж/ и размещаю код html, через который хочу часть текста “спрятать“, а при нажатии на “Читать полностью“ - прочитать. Получается, так что сам Текст спрятан, но прочитать спрятанный текст не удается. Подскажите, что нужно дописать и доделать?

Код который использую привожу ниже:


<html>
<head>
<title>Заголовки HTML</title>
</head>
<body>
<h2 align="center" style="color: Red">МАКИЯЖ</h2>
</body>
</html>
<P align="right">Женщину украшает не скромность, а косметика.
<BR>Из афоризмов Дили Еникеевой</P>
<P align="justify">Женщина всегда стремится быть красивой. Женщина счастлива, когда она нравится. Женщина может быть красивой не зависимо от возраста. Можно вспомнить фильм «Москва слезам не верит». В нем главная героиня сказала: «Жизнь после сорока только начинается».
<p> <a href="more-link">Читать полностью </a></p>
<!Женщина, если она настоящая женщина, — хочет быть красивой и нравиться всегда, везде, и всем.
Однако, многие женщины относятся с предубеждением к декоративной косметике. Одни, не зная всех тонкостей нанесения косметики и не стремясь их изучить, в лучшем случае ограничиваются губной помадой и пудрой. Другие доказывают, что у них нет на всю эту ерунду времени. Есть также дамы, которые впадают в другую крайность: они раскрашивают себе лицо, не считаясь ни с правилами макияжа, ни с собственной внешностью.
Надо помнить, что одной не верной нарисованной чертой, проведенной на верхнем веке или под глазами, уничтожается вся женственность, все обаяние, красота и самый ценный дар природы — молодость и свежесть, тогда как умелым макияжем можно их только подчеркнуть.
Некоторые женщины не знают разницы между дневным и вечерним макияж. Это как в одежде - два разных стиля. Вечерний макияж выглядит не хорощо днем. Женщина, которая появляется на работу, в офис в длинном вечернем платье с вырезом на спине, выглядит в лучшем случае, глупо.
Забота о лице, не означает бессмысленное применение косметики. Самые, простые приемы ухода за лицом имеют свои законы. Уметь «краситься» — это искусство. Здесь учитывается время года, возраст и внешность.
Любое женское лицо, в той или иной мере, нуждается в косметике. Чем тщательнее, тоньше и естественнее наложен макияж, тем больше эффект. Умелый мягкий грим подчеркивает естественную красоту лица и помогает скрыть его дефекты. Иногда нескольких штрихов помогают сделать лицо привлекательным, а малейшая ошибка может все испортить. Для этого, надо знать, что и как делать и чего делать нельзя. По этому поводу психотерапевт Диля Еникеева, говорит «Косметика за двадцать минут сделает вас красивой. Но чтобы красота выглядела естественной, вам потребуется не менее двух часов». Если женщина усвоила правила нанесения декоративной косметики, она не допустит ошибок.-->
Надеемся, что наш сайт поможет женщинам научиться правильно «украшать» себя, доставляя тем самым эстетическое удовольствие не только себе, но и другим, помня что нет ничего прекраснее красивой женщины.</P>

Edited June 4, 2017 by Мила
обнаружила у себя некоторые неточности

Svetlana_P · June 3, 2017

Можно на CSS через хак с чекбоксом. Пример разметки https://jsfiddle.net/2cg5y6xg/

Мила · June 4, 2017

Первый раз с этим сталкиваюсь. У меня не получилось. Можно "разжевать"?

Svetlana_P · June 4, 2017

Я посмотрела страницу http://imbim.ru/Визаж-и-макияж/ Вижу, Вы перенесли разметку HTML. Но код CSS тоже нужно перенести к себе на сайт. Вы умеете это делать?

Мила · June 4, 2017

Не умею. Как сделать?

Svetlana_P · June 4, 2017

На мой взгляд, оптимальнее всего добавить в конец файла http://imbim.ru/css/site.css . Тогда Вы сможете применять такую конструкцию для скрытого блока на других страницах тоже. Если не знаете, как добраться до файла, опишите подробней, как редактируете сайт и какая CMS стоит (если стоит).

Вообще, про способы добавления стилей на страницу можно почитать здесь http://htmlbook.ru/samcss/sposoby-dobavleniya-stiley-na-stranitsu

Мила · June 4, 2017

Делаю сайт в конструкторе. Хостинг для редакции предлагает значек/ячейку HTML.

Что касается ссылки http://imbim.ru/css/site.css. Ее якорем можно установить?

Svetlana_P · June 4, 2017

http://imbim.ru/css/site.css эту ссылку не нужно ставить. Пока забудем про это.

Попробуем по-другому. В HTML коде на той же странице добавьте тег style со стилями. Вот так:

<style>
input[type="checkbox"] {
    position: absolute;
    left: -999em;
 }
label {
    display: block;
    margin: 1em 0;
    text-decoration: underline;
    cursor: pointer;
    color: blue;
 }
#hidden {
    max-height:0;
    overflow: hidden;
 }
#cb:checked~#hidden {
    max-height:100%;
 }
#cb:checked~#hidden {
    max-height:100%;
 }
</style>

Чтобы стилизация кнопки "Подробнее" заработала. И отпишитесь тут.

Мила · June 4, 2017

Сделала вот это.

<html>
<head>
<title>Заголовки HTML</title>
</head>
<body>
<h2 align="center" style="color: Red">МАКИЯЖ</h2>
</body>
</html>
<P align="right">Женщину украшает не скромность, а косметика.
<BR>Из афоризмов Дили Еникеевой</P>
<P align="justify">Женщина всегда стремится быть красивой. Женщина счастлива, когда она нравится. Женщина может быть красивой не зависимо от возраста. Можно вспомнить фильм «Москва слезам не верит». В нем главная героиня сказала: «Жизнь после сорока только начинается».
<p> <a href="more-link">Читать полностью </a></p>
<style>
input[type="checkbox"] {
    position: absolute;
    left: -999em;
 }
label {
    display: block;
    margin: 1em 0;
    text-decoration: underline;
    cursor: pointer;
    color: blue;
 }
#hidden {
    max-height:0;
    overflow: hidden;
 }
#cb:checked~#hidden {
    max-height:100%;
 }
#cb:checked~#hidden {
    max-height:100%;
 }
</style>
<!Женщина, если она настоящая женщина, — хочет быть красивой и нравиться всегда, везде, и всем.
Однако, многие женщины относятся с предубеждением к декоративной косметике. Одни, не зная всех тонкостей нанесения косметики и не стремясь их изучить, в лучшем случае ограничиваются губной помадой и пудрой. Другие доказывают, что у них нет на всю эту ерунду времени. Есть также дамы, которые впадают в другую крайность: они раскрашивают себе лицо, не считаясь ни с правилами макияжа, ни с собственной внешностью.
Надо помнить, что одной не верной нарисованной чертой, проведенной на верхнем веке или под глазами, уничтожается вся женственность, все обаяние, красота и самый ценный дар природы — молодость и свежесть, тогда как умелым макияжем можно их только подчеркнуть.
Некоторые женщины не знают разницы между дневным и вечерним макияж. Это как в одежде - два разных стиля. Вечерний макияж выглядит не хорощо днем. Женщина, которая появляется на работу, в офис в длинном вечернем платье с вырезом на спине, выглядит в лучшем случае, глупо.
Забота о лице, не означает бессмысленное применение косметики. Самые, простые приемы ухода за лицом имеют свои законы. Уметь «краситься» — это искусство. Здесь учитывается время года, возраст и внешность.
Любое женское лицо, в той или иной мере, нуждается в косметике. Чем тщательнее, тоньше и естественнее наложен макияж, тем больше эффект. Умелый мягкий грим подчеркивает естественную красоту лица и помогает скрыть его дефекты. Иногда нескольких штрихов помогают сделать лицо привлекательным, а малейшая ошибка может все испортить. Для этого, надо знать, что и как делать и чего делать нельзя. По этому поводу психотерапевт Диля Еникеева, говорит «Косметика за двадцать минут сделает вас красивой. Но чтобы красота выглядела естественной, вам потребуется не менее двух часов». Если женщина усвоила правила нанесения декоративной косметики, она не допустит ошибок.
Надеемся, что наш сайт поможет женщинам научиться правильно «украшать» себя, доставляя тем самым эстетическое удовольствие не только себе, но и другим, помня что нет ничего прекраснее красивой женщины.</P>

Посмотрите, что не так?

DivMan · June 4, 2017

<P align="justify">

не надо так делать

Мила · June 4, 2017

4 часа назад, DivMan сказал:
<P align="justify">
не надо так делать

Убрала это. Текст стал по левому краю. Или нужно по другому что-то сделать. У меня не получается открыть скрытый текст.

Edited June 4, 2017 by Мила
обнаружила у себя некоторые неточности

Svetlana_P · June 4, 2017

Мила, попробуйте просто вставить код, который ниже. Разметка HTML и свойства CSS должны быть такими. Ранее Вы добавляли либо только разметку, либо свойства, но в этом нет смысла. Должно быть и то, и другое. Попробуйте. Если не будет работать, я посмотрю, что не так.

<style>
input[type="checkbox"] {
    position: absolute;
    left: -999em;
 }
label {
    display: block;
    margin: 1em 0;
    text-decoration: underline;
    cursor: pointer;
    color: blue;
 }
#hidden {
    max-height:0;
    overflow: hidden;
 }
#cb:checked~#hidden {
    max-height:100%;
 }
#cb:checked~#hidden {
    max-height:100%;
 }
</style>
<p>Женщина всегда стремится быть красивой. Женщина счастлива, когда она нравится. Женщина может быть красивой не зависимо от возраста. Можно вспомнить фильм «Москва слезам не верит». В нем главная героиня сказала: «Жизнь после сорока только начинается».</p>
<p>Женщина, если она настоящая женщина, — хочет быть красивой и нравиться всегда, везде, и всем.</p>
<input id="cb" type="checkbox">
 <label for="cb">
  Подробнее
 </label>
 <div id="hidden">
  <p>Однако, многие женщины относятся с предубеждением к декоративной косметике. Одни, не зная всех тонкостей нанесения косметики и не стремясь их изучить, в лучшем случае ограничиваются губной помадой и пудрой. Другие доказывают, что у них нет на всю эту ерунду времени. Есть также дамы, которые впадают в другую крайность: они раскрашивают себе лицо, не считаясь ни с правилами макияжа, ни с собственной внешностью.</p>...
<p>Любое женское лицо, в той или иной мере, нуждается в косметике. Чем тщательнее, тоньше и естественнее наложен макияж, тем больше эффект. Умелый мягкий грим подчеркивает естественную красоту лица и помогает скрыть его дефекты. Иногда нескольких штрихов помогают сделать лицо привлекательным, а малейшая ошибка может все испортить. Для этого, надо знать, что и как делать и чего делать нельзя. По этому поводу психотерапевт Диля Еникеева, говорит «Косметика за двадцать минут сделает вас красивой. Но чтобы красота выглядела естественной, вам потребуется не менее двух часов». Если женщина усвоила правила нанесения декоративной косметики, она не допустит ошибок.</p>
 </div>

Мила · June 16, 2017

Svetlana_P, спасибо за помощь. Получилось. Текст спрятан и при необходимости его можно прочитать. Код составлен на основе Ваших рекомендаций. Результат можно посмотреть:

Скрытый текст

http://imbim.ru/Визаж-и-макияж/

<html>
<head>
<title>Заголовки HTML</title>
</head>
<body>
<h2 align="center" style="color: Red">МАКИЯЖ</h2>
</body>
</html>
<P align="right">Женщину украшает не скромность, а косметика.
<BR>Из афоризмов Дили Еникеевой</P>
<style>
input[type="checkbox"] {
    position: absolute;
    left: -999em;
 }
label {
    display: block;
    margin: 1em 0;
    text-decoration: underline;
    cursor: pointer;
    color: blue;
 }
#hidden {
    max-height:0;
    overflow: hidden;
 }
#cb:checked~#hidden {
    max-height:100%;
 }
#cb:checked~#hidden {
    max-height:100%;
 }
</style>
<p align="justify">Женщина всегда стремится быть красивой. Женщина счастлива, когда она нравится. Женщина может быть красивой не зависимо от возраста. Можно вспомнить фильм «Москва слезам не верит». В нем главная героиня сказала: «Жизнь после сорока только начинается».</p>
<input id="cb" type="checkbox">
 <label for="cb">
  Подробнее
 </label>
 <div id="hidden">
 <p align="justify">Женщина, если она настоящая женщина, — хочет быть красивой и нравиться всегда, везде, и всем.</p>
 <p align="justify">Однако, многие женщины относятся с предубеждением к декоративной косметике. Одни, не зная всех тонкостей нанесения косметики и не стремясь их изучить, в лучшем случае ограничиваются губной помадой и пудрой. Другие доказывают, что у них нет на всю эту ерунду времени. Есть также дамы, которые впадают в другую крайность: они раскрашивают себе лицо, не считаясь ни с правилами макияжа, ни с собственной внешностью.</p>
 <p align="justify">Надо помнить, что одной не верной нарисованной чертой, проведенной на верхнем веке или под глазами, уничтожается вся женственность, все обаяние, красота и самый ценный дар природы — молодость и свежесть, тогда как умелым макияжем можно их только подчеркнуть.</p>
 <p align="justify">Некоторые женщины не знают разницы между дневным и вечерним макияж. Это как в одежде - два разных стиля. Вечерний макияж выглядит не хорощо днем. Женщина, которая появляется на работу, в офис в длинном вечернем платье с вырезом на спине, выглядит в лучшем случае, глупо.</p>
 <p align="justify">Забота о лице, не означает бессмысленное применение косметики.     Самые, простые приемы ухода за лицом имеют свои законы. Уметь «краситься» — это искусство. Здесь учитывается время года, возраст и внешность.</p>
 <p align="justify">Любое женское лицо, в той или иной мере, нуждается в косметике. Чем тщательнее, тоньше и естественнее наложен макияж, тем больше эффект. Умелый мягкий грим подчеркивает естественную красоту лица и помогает скрыть его дефекты. Иногда нескольких штрихов помогают сделать лицо привлекательным, а малейшая ошибка может все испортить. Для этого, надо знать, что и как делать и чего делать нельзя. По этому поводу психотерапевт Диля Еникеева, говорит «Косметика за двадцать минут сделает вас красивой. Но чтобы красота выглядела естественной, вам потребуется не менее двух часов». Если женщина усвоила правила нанесения декоративной косметики, она не допустит ошибок.</p>
 <p align="justify">Надеемся, что наш сайт поможет женщинам научиться правильно «украшать» себя, доставляя тем самым эстетическое удовольствие не только себе, но и другим, помня что нет ничего прекраснее красивой женщины.</p>
 </div>

Edited June 16, 2017 by Мила
небольшие неточности

DivMan · June 16, 2017

2 часа назад, Мила сказал:

Svetlana_P, спасибо за помощь. Получилось. Текст спрятан и при необходимости его можно прочитать. Код составлен на основе Ваших рекомендаций. Результат можно посмотреть:

всё таки на js это сделать намного лучше и проще

https://jsfiddle.net/4hpx7wby/

Переменная link в неё записывается элемент с классом link, в нашем случае, это элемент a.

Переменная hidden, в неё записывается элемент с классом hidden.

Этот код означает

link.addEventListener('click', function(e) {

При клике на элемент link,

e.preventDefault();

Отменить действие ссылки по умолчанию, ссылка по умолчанию, куда-то посылает, теперь она типа мёртвая (не рабочая).

hidden.classList.toggle('hidden');

проверить, есть ли у элемента с классом hidden, класс hidden, если есть, то убрать этот класс, если нету, то добавить.

В принципе, если вам сложно разобраться в JS, то блок if и else, можно вообще убрать и также будет скрывать и показывать и можно ещё убрать e.preventDefault();

Вот этот код, можно поместить в 1 файл.html

<style>
	.hidden {
		display: none;
}

</style>

<div class="main">
  <p align="justify">Женщина всегда стремится быть красивой. Женщина счастлива, когда она нравится. Женщина может быть красивой не зависимо от возраста. Можно вспомнить фильм «Москва слезам не верит». В нем главная героиня сказала: «Жизнь после сорока только начинается».</p>
  
  <a href="#" class="link">Подробнее</a>
  <div class="hidden block">
    <p align="justify">Женщина, если она настоящая женщина, — хочет быть красивой и нравиться всегда, везде, и всем.</p>
 <p align="justify">Однако, многие женщины относятся с предубеждением к декоративной косметике. Одни, не зная всех тонкостей нанесения косметики и не стремясь их изучить, в лучшем случае ограничиваются губной помадой и пудрой. Другие доказывают, что у них нет на всю эту ерунду времени. Есть также дамы, которые впадают в другую крайность: они раскрашивают себе лицо, не считаясь ни с правилами макияжа, ни с собственной внешностью.</p>
 <p align="justify">Надо помнить, что одной не верной нарисованной чертой, проведенной на верхнем веке или под глазами, уничтожается вся женственность, все обаяние, красота и самый ценный дар природы — молодость и свежесть, тогда как умелым макияжем можно их только подчеркнуть.</p>
 <p align="justify">Некоторые женщины не знают разницы между дневным и вечерним макияж. Это как в одежде - два разных стиля. Вечерний макияж выглядит не хорощо днем. Женщина, которая появляется на работу, в офис в длинном вечернем платье с вырезом на спине, выглядит в лучшем случае, глупо.</p>
 <p align="justify">Забота о лице, не означает бессмысленное применение косметики.     Самые, простые приемы ухода за лицом имеют свои законы. Уметь «краситься» — это искусство. Здесь учитывается время года, возраст и внешность.</p>
 <p align="justify">Любое женское лицо, в той или иной мере, нуждается в косметике. Чем тщательнее, тоньше и естественнее наложен макияж, тем больше эффект. Умелый мягкий грим подчеркивает естественную красоту лица и помогает скрыть его дефекты. Иногда нескольких штрихов помогают сделать лицо привлекательным, а малейшая ошибка может все испортить. Для этого, надо знать, что и как делать и чего делать нельзя. По этому поводу психотерапевт Диля Еникеева, говорит «Косметика за двадцать минут сделает вас красивой. Но чтобы красота выглядела естественной, вам потребуется не менее двух часов». Если женщина усвоила правила нанесения декоративной косметики, она не допустит ошибок.</p>
 <p align="justify">Надеемся, что наш сайт поможет женщинам научиться правильно «украшать» себя, доставляя тем самым эстетическое удовольствие не только себе, но и другим, помня что нет ничего прекраснее красивой женщины.</p>
  </div>
</div>

<script>

var link = document.querySelector('.link');
var hidden = document.querySelector('.hidden');
var block = document.querySelector('.block');


link.addEventListener('click', function(e) {
	e.preventDefault();
	hidden.classList.toggle('hidden');
	
	if(block.classList.contains('hidden')) {
		link.textContent = 'Подробнее';
	}
	
	else {
		link.textContent = 'Скрыть';
	}
})

</script>

Edited June 16, 2017 by DivMan

Мила · June 17, 2017

DivMan, предложенный Вами код разместила

Скрытый текст

http://imbim.ru/Визаж-и-макияж/

Получилось хорошо. Для посетителей сайта будет понятнее. Но, как пользоваться https://jsfiddle.net/4hpx7wby/, не понимаю. В этом придется разбираться.

Edited June 17, 2017 by Мила
дополнение

DivMan · June 17, 2017

там разбираться, особо не в чем;

Мила · June 21, 2017

Возвращаюсь к вопросу о том, что не читается скрытый текст.

DivMan, предложенный Вами код работает здесь https://jsfiddle.net/4hpx7wby/ и в браузере через Notepad++. Но когда выкладываю его на сайт, скрытый текст не раскрывается и не читается.

Выкладываю копию этого кода с сайта. Посмотрите, пожалуйста. Что не так?

<html>
<head>
<title>Заголовки HTML</title>
</head>
<body>
<h2 align="left" style="color: Red">КРАСОТА И ДЕКОРАТИВНАЯ КОСМЕТИКА</h2>
<br>
</body>
</html>
<P align="right">Женщину украшает не скромность, а косметика.
<BR>Из афоризмов Дили Еникеевой</P>
<style>
	.hidden {
		display: none;
}

</style>

<div class="main">
  <p align="justify">Женщина всегда стремится быть красивой. Она счастлива, когда она нравится. Женщина может быть красивой не зависимо от возраста. Можно вспомнить фильм «Москва слезам не верит». В нем главная героиня сказала: «Жизнь после сорока только начинается».</p>
  
  <a href="#" class="link">Подробнее</a>
  <div class="hidden block">
    <p align="justify">Женщина, если она настоящая женщина, — хочет быть красивой и нравиться.</p>
 <p align="justify">Но, многие женщины к декоративной косметике относятся не серьезно. Одни, пренебрегают тонкостями нанесения косметики и используют лишь губную помаду и пудру,чем показывают, что это все ерунда. Другие дамы, впадают в крайность. Они свое лицо раскрашивают, не пользуясь правилами макияжа.</p>
 <p align="justify">Надо понимать, что одной не верной нарисованной чертой,например, проведенной на верхнем веке или под глазами, можно показать женственность, обаяние, красоту и даже молодость и свежесть.</p>
 <p align="justify">Встречаются женщины, кто не знает разницы между дневным и вечерним макияж.Вечерний макияж выглядит плохо днем. Женщина, которая явилась на деловую встречу или в офис в вечернем платье, выглядит в лучшем случае, не серьезно.</p>
 <p align="justify">Внимание и забота к своему лицу, это не бессмысленное применение косметики. Даже самые, простые приемы ухода за лицом подчиняются определенным законы. Уметь пользоваться  косметикой — это искусство. Здесь учитывается и время года,и возраст и внешнии данные.</p>
 <p align="justify">Каждое женское лицо, в разной степени, нуждается в косметике. Тщательное, тонкое и естественное наложение макияжа, придает большой эффект лицу. Правильным и мягким гримом можно выделить красоту лица и скрыть дефекты. Часто бывает, что нанесение нескольких правильных штрихов придают лицу привлекательность, а маленькие не точности могут испортить всю привлекательность лица. Для того, чтобы это не произошло надо понималь, что и как делать, а чего не делать. При таких обстоятельствах,психотерапевт Диля Еникеева, говорит «Косметика за двадцать минут сделает вас красивой. Но чтобы красота выглядела естественной, вам потребуется не менее двух часов». Если женщина усвоила правила нанесения декоративной косметики, она не допустит ошибок.</p>
 <p align="justify">Надеемся, что наши статьи помогут женщинам научиться правильно пользоваться декоративной косметикой и  накладывать макияж, чем доставите эстетическое удовольствие не только себе, но и другим. Помните, что в жизни самое прекрасное - это красивая женщина,которой может стать каждая. Это просто. Нужно только узнать правила нанесения макияжа и ими пользоваться при  нанесении декоративной косметики.</p>
  </div>
</div>

<script>

var link = document.querySelector('.link');
var hidden = document.querySelector('.hidden');
var block = document.querySelector('.block');


link.addEventListener('click', function(e) {
	e.preventDefault();
	hidden.classList.toggle('hidden');
	
	if(block.classList.contains('hidden')) {
		link.textContent = 'Подробнее';
	}
	
	else {
		link.textContent = 'Скрыть';
	}
})

</script>

Нажимаю на ссылку "Подробнее" выкидывает на главную страницу.

Edited June 21, 2017 by Мила
уточнения

Sign In

Как прочитать спрятанный текст в more-link?

Question

Link to comment

Share on other sites

16 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information