Направите ХТМЛ хармонику -> Сакриј и откриј садржај без ЈС/ЦСС-а

Да ли сте знали да постоји изворно ХТМЛ5 решење за врло лако креирање дугмета за читање више/мање хармонике да бисте сакрили и открили садржај помоћу БЕЗ ЈаваСцрипта или ЦСС-а. Читајте даље да бисте сазнали како.

ХТМЛ5 ознаке су званично а елемент виџета за откривање, Али упарен са ХТМЛ5 ознаке ће вам дати а чиста ХТМЛ хармоника.

Смисао нема ЈС ИЛИ ЦСС је потребно. Како је то кул!

Ево примера који приказује једноставан елемент са а .

Ево кода:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

а ево како ће то изгледати:

Опширније

Ово је изворна ХТМЛ5 хармоника за скривање и откривање садржаја. Прилично кул, зар не?

Како то функционише? таг служи као омотач за елемент који се може отворити или затворити. Корисник мора да кликне на ознаку која је таг за отварање или затварање елемента.

Шта је са стилом и понашањем?

Стилови

Можете да примените ЦСС стил да бисте прилагодили изглед оквира за текст за откривање. Доле даје стил интерфејса са картицама:

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

Подразумевано, курсор се појављује као стрелица, али ако желите да буде а показујући руком уместо тога онда користите ово:

details {
cursor: pointer;
}

понашања

Постављање понашања је веома ограничено, заиста постоји само једна ствар коју можете да урадите, а то је да направите откривени текст отвори подразумевано.

Да бисте покренули хармонику у њеном отвореном стању, додајте Боолеан часови приписати таг:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

Опширније

Ово је изворна ХТМЛ5 хармоника за скривање и откривање садржаја. Прилично кул, зар не?

Које атрибуте могу да користим?

Доњи атрибути се могу користити за таг:

атрибут	вредност	резиме
часови	часови	Подразумевано је није отворен.
id	вредност	Пружа јединствени идентификатор.
класа	имена класа	Елементу додељује имена класа.
стил	ЦСС-вредности	Додељује ЦСС стилове елементу.

Дакле, која су ограничења? Увек постоји квака, зар не?

Нема подршке за Интернет Екплорер

Ова хармоника само за ХТМЛ5 неће радити ни у једној верзији Интернет Екплорер-а. Ако морате да подржавате ИЕ11, мораћете да користите друго резервно решење користећи ЈКуери. Сви остали претраживачи подржавају .

Нема прилагођених анимација или прелаза

Иако можете да мењате и стилизујете изглед (као што је приказано изнад), нећете моћи да урадите анимације или прелазе који откривају текст. Ако то желите да урадите, биће вам потребно још једно ЦСС/ЈСС решење за хармонику.