ЯК зробити розкривається текст :: як зробити випадає текст як вконтакте

Розміщення прихованих блоків тексту покращує візуальне сприйняття сторінки веб-сайту - вона завантажується в браузер саме в тому вигляді, який розробив дизайнер, незалежно від розміщеного обсягу інформації. Крім того, це зручніше відвідувачеві - в пошуках потрібного блоку інформації йому не доводиться переглядати весь масив, а тільки лише невеликі «верхівки айсбергів».

Вам знадобиться

Базові знання мов HTML і javascript.

Інструкція

Використовуйте користувача функцію на мові javascript, щоб організувати в HTML-сторінці приховування і відображення потрібних блоків тексту. Загальна для всіх блоків функція набагато зручніше, ніж додавання коду до кожного з них окремо. У заголовну частину вихідного коду сторінки помістіть відкриває та закриває теги script, а між ними створіть порожню поки функцію з назвою, наприклад, swap і одним обов'язковим вхідним параметром id:

Додайте два рядки javascript-коду в тіло функції - між фігурними дужками. Перший рядок повинна зчитувати поточний стан блоку тексту - включена його видимість або виключена. Таких блоків у документі може бути декілька, тому кожен повинен мати власний ідентифікатор - саме його функція отримує в якості єдиного вхідного параметра id. За цим ідентифікатором вона і розшукує в документі потрібний блок, привласнюючи значення видимості / невидимості (стан властивості display) змінної sDisplay: sDisplay = document.getElementById (id) .style.display-

Другий рядок повинна змінювати властивість display потрібного блоку тексту на протилежне - приховувати, якщо текст бачимо, і відображати, якщо прихований. Це можна робити таким кодом: document.getElementById (id) .style.display = sDisplay == 'none'? '': 'None'-

Помістіть в заголовну частину ще й такий опис стилів: Воно знадобиться для правильного відображення покажчика миші при наведенні курсору на неповний тег посилання. За допомогою таких посилань ви організуєте в сторінці перемикання видимості / невидимості текстових блоків.

Додайте в тексті ці посилання-перемикачі перед кожним прихованим блоком, а в блоки - наприкінці тексту - додайте аналогічну посилання. Невидимий текст укладіть в теги span, у яких в атрибутах style задана невидимість. Наприклад: Розкрийте текст +++ У цьому зразку клацання по посиланню з трьох плюсів буде викликати описану вище функцію по події onclick, передаючи їй ідентифікатор блоку, який потрібно зробити видимим. А всередину блоку поміщена посилання з трьох мінусів з такими ж функціями - клацання по ній буде приховувати текст.

Створіть потрібну кількість текстових блоків, аналогічних описаним в попередньому кроці, не забуваючи при цьому міняти ідентифікатори в атрибуті id тега span і в змінної, переданої функції по події onclick в двох посиланнях.