Як зробити розкривається текст


 

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



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

Базові знання мов HTML та JavaScript.

Інструкція

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

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

    sDisplay = document.getElementById (id). style.display;
      


  3. Другий рядок повинна міняти властивість display потрібного блоку тексту на протилежне - приховувати, якщо текст бачимо, і відображати, якщо прихований. Це можна робити таким кодом:

    document.getElementById (id). style.display = sDisplay == 'none'? '': 'None';
      


  4. Помістіть в заголовну частину ще й такий опис стилів:

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


  5. Додайте в тексті ці посилання-перемикачі перед кожним прихованим блоком, а в блоки - в кінці тексту - додайте аналогічну посилання. Невидимий текст укладіть в теги span, у яких в атрибутах style задана невидимість. Наприклад:

    Розкрийте текст + + +

    В цьому зразку клацання по посиланню з трьох плюсів буде викликати описану вище функцію по події onClick, передаючи їй ідентифікатор блоку, який потрібно зробити видимим. А всередину блоку поміщена посилання з трьох мінусів з такими ж функціями - клацання по ній буде приховувати текст.
      


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