Сокрытие части контента на web-странице с открытием по требованию

Информация, представленная на этой странице ориентирована в первую очередь для начинающих web-мастеров.

В этой статье мы рассмотрим сокрытие части контента, но не от поисковых роботов, как это можно предположить, прочитав название, а от глаз посетителя сайта, визуально тем самым якобы уменьшая размер страницы. Думаю, что данный эффект не требует особого описания и долгих объяснений. Посмотрите, пожалуйста, демо-пример и решите для себя, пригодится ли это на вашем сайте.

Если эффект нравится, добро пожаловать к изучению.

Получив архив с материалом, распакуйте его в папку на компьютере. В папке concealment_of_the_text находятся папка img с изображениями, папки css с файлом стилей и js с файлами common.js и jquery.js, а также файл demo.html, который при открытии в браузере демонстрирует данный эффект.

В процессе реализации эффекта следите за тем, чтобы файл страницы с эффектом и все папки находились в одной директории, например, в «корне» сайта или какой-либо другой папке, в которой Вы решите расположить ваш файл с контентом.

Эти коды, указывающие пути к файлу стилей и файлам .js, прописываем в head:

<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/common.js"></script>

В этом коде между тегами <p> и </p> вставляем абзацы текста и необходимые изображения и весь код размещаем в нужном месте в body:

<div id="container">		
<h1>Тексты иностранных песен</h1>

<div class="cut_content">	

<h3>1. Celine Dion - My Heart Will Go On</h3>

<p>
Текст песни Celine Dion - My Heart Will Go On.
</p>

<p><img border="0" align="left" src="адрес картинки" vspace="20" hspace="0" alt="Celine Dion"><br></p> 

<h3>2.BACKSTREET BOYS-Never Gone Incomplete</h3>

<p>
Текст песни BACKSTREET BOYS-Never Gone Incomplete.
</p>

<p><img border="0" align="left" src="адрес картинки" vspace="20" hspace="0" alt="BACKSTREET BOYS"><br></p>  

<h3>3.James Blunt - You are beautifull</h3>

<p>
Текст песни James Blunt - You are beautifull.
</p>

<p><img border="0" align="left" src="адрес картинки" vspace="20" hspace="0" alt="James Blunt"><br></p> 

<h3>4.Reamonn – tonight</h3>

<p>
Текст песни Reamonn – tonight.
</p>

<p><img border="0" align="left" src="адрес картинки" vspace="20" hspace="0" alt="Reamonn"><br></p> 


<div class="toggle_view"><a href="/" onclick="return toggle_view(this, 'Свернуть')">Читать далее...</a></div> 

</div> 
</div>

Это всё о сокрытии контента. Спасибо за внимание. Будьте здоровы. Всего Вам доброго. До встречи! С уважением, L.M.