DW-Блок "hide & show"

DW-Блок : HIDE & SHOW

1. Техническое задание на создание скрипта "hide & show"
2. Условия для работы скрипта "hide & show"
3. Пример работы скрипта "hide & show"
4. Блок №2 не закрывать
5. Вторая часть алгоритма.
6. Скачать можно здесь

Скопировать ссылку



Техническое задание на создание скрипта "hide & show"

Нужен универсальный скрипт, который будет выполнять задачу по определенному алгоритму:


Описание алгоритма скрипта "hide & show"

Первая часть алгоритма :

При нажатии на блок №1, должен открыться блок №1.1.

При следующем клике есть несколько вариантов развития :

Если нажать на блок №1, то блок №1.1 должен закрыться.

Если нажать на блок №1.1, то :

Блок может закрыться.

Или по условию не закрываться!

Если нажать на любую точку страницы, блок №1.1 должен закрыться.

Если нажать на блок №2, то :

Блок №1.1 должен закрыться.

Блок №2.1 должен открыться.

После нажатия на блок №2, возвращаемся к началу алгоритма и весь алгоритм должен повторится с изменением на произвольный номер блока.


Вторая часть алгоритма :

Требуется(в некоторых случаях) :

Внутри блока №1 написать некоторый текст, например(ключ) "Открыть".

После нажатия на блок №1 открывается блок №1.1.

И текст в внутри блока №1 меняется на(значение) "Закрыть"

Набор слов(ключ => значение) можно добавлять. Например...

Показать.

Скрыть.

Количество вариаций(ключ => значение) неограниченно.

При нажатии на любую точку страницы - "значение" должно вернуться в первый нажатый блок.

Скопировать ссылку



Условия для работы скрипта "hide & show"

Первое сам скрипт:

Вы можете его подключить, как подключают любой внешний скрипт

<script src="https://dwweb.ru/js/dw_hide_show.js"></script>

Либо :

Скачать можно здесь

Стили css:

На страницу/сайт требуется добавить пару строк стилей css :

Либо с помощью тега style - на одну, несколько страниц(пример кода ниже).

Если нужно поставить на весь сайт, то нужно найти главный файл file css, и стили нужно поместить туда(естественно без тега <style>):

<style>

  div[data-display=none] {

  display: none;

  }

  div[data-display=block] {

  display: block;

  }

</style>

Html код:

Перейдем к html коду:

Блок номер 1(видимый), нужно добавить два атрибута :

Атрибут id:

id="first"

Атрибут data, с id второго блока:

data-openmore="second"

Блок номер 1 должен получиться вот такой:

<div id="first" data-openmore="second">Блок номер 1</div>

Блок номер 2(невидимый), нужно добавить два атрибута :

Атрибут id второго блока:

id="second"

Атрибут data, что он скрыт:

data-display="none"

Второй блок должен получиться:

<div id="second" data-display="none">Скрытый текст</div>

Соберем весь html код в одно целое:

<div id="first" data-openmore="second">Блок номер 1</div>
<div id="second" data-display="none">Блок номер 2</div>

Выведем код прямо здесь:
Блок номер 1
Блок номер 2
Скопировать ссылку



Пример работы скрипта "hide & show"

Выше я уже привел первый пример работы скрипта, в единственном числе, теперь давайте приведенный пример повторим два раза :

Блок два:

<div id="first_1" data-openmore="second_1">Блок номер 1_1</div>
<div id="second_1" data-display="none">Блок номер 2_1</div>


Блок три:

<div id="first_2" data-openmore="second_2">Блок номер 1_2</div>
<div id="second_2" data-display="none">Блок номер 2_2</div>


И вы можете протестировать, поочередно/случайно нажимая на:

На блок 1(см. выше пунктом).

На блок 2.

На блок 3.

На пустое местно на странице.

Блок два:
Блок номер 1_1
Блок номер 2_1
Блок три:
Блок номер 1_2
Блок номер 2_2
Скопировать ссылку



Блок №2 не закрывать

Как вы уже наверное протестировали, но при нажатии на второй блок... он закрывается.

Как сделать, чтобы он не закрывался? Для этого нам опять понадобится четвертый код html.

Добавим еще один атрибут во второй блок:

data-click="no_close"

И чтобы увидеть края блока 2 добавим border

style="border: 1px solid;"

Весь код:

<div id="first_3" data-openmore="second_3">Блок номер 1_3</div>
<div id="second_3" data-display="none" data-click="no_close" style="border: 1px solid;">Блок номер 2_3</div>

Блок четыре :
Блок номер 1_3
Блок номер 2_3
Скопировать ссылку



Вторая часть алгоритма.

Как работает вторая часть алгоритма, описание в первом пункте.


Сейчас массив заменяемых слов состоит из:

var hide_open_arr = {
'показать' : 'скрыть' ,
'Показать еще :' : 'Скрыть :' ,
'Показать еще' : 'Скрыть',
'подробнее...' : 'закрыть',
'Изменить' : 'Отменить',
'Посмотреть ответ :': 'Скрыть ответ.'
};


Обращаю ваше внимание! Если вы захотите добавить свой ключ и значение... Ключ и значение должно быть уникальным и к ключам и значенням... иначе может не работать...

Как это работает?

Внутрь блока №1 помещаем ключ из массива(текст слева, массив смотри выше)... пример... вот три блока с разным текстом(ключем) внутри тега.

При нажатии на блок №1, ключ будет заменяться на "значение ключа"(текст справа).

При любом следующем нажатии ключ вернется в первоначальное состояние!


Блок 5:
  <div id="first_4" data-openmore="second_4">показать</div>
  <div id="second_4" data-display="none">Блок номер 2_4</div>
Блок 6:
  <div id="first_5" data-openmore="second_5">подробнее...</div>
  <div id="second_5" data-display="none">Блок номер 2_5</div>
Блок 7:
  <div id="first_6" data-openmore="second_6">Посмотреть ответ :</div>
  <div id="second_6" data-display="none">Блок номер 2_6</div>

Выведем данный пример:

Понажимайте и вы получите результат!

Блок 5:
показать
Блок номер 2_4
Блок 6:
подробнее...
Блок номер 2_5
Блок 7:
Посмотреть ответ :
Блок номер 2_6

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---