1

Тема: Згортанний блок

У себе на блозі описуючі якусь тему я часто генерую рисунки. Але код для генерації вставляти не завжди хочеться, бо він би відтіняв основну тему статті. Отже, потрібен код елемента "показати/сховати".

За посиланням можна глянути на загальний дизайн блогу -- стаття.

Це мій css, який я вже маю в блозі. Наводжу, щоб було ліпше видно, який дизайн буде найпідходящим.

.termin,
.terminology{
    color : #25a2ea;
}

.def_block,
.thm_block,
.exr_block {
  border-radius: 10px;
  box-shadow: 3px 3px 2px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  text-align: left;
  background: rgb(235, 235, 255);
}
 
.def_block dd,
.thm_block dd,
.exr_block dd {
  margin-left: 5px;
}
 
.def_block dt {
  background: green;
}
 
.thm_block dt {
  background: blue;
}
 
.exr_block dt {
  background: DarkTurquoise ;
}

.def_block dt,
.thm_block dt,
.exr_block dt {
  color: white;
  margin-top: 0;
  margin-bottom: 0px;
  text-indent: 5px;
}
 
.thm_block proof:before {
  margin-left: 5px;
  content: "Доведення:";
  font-weight: bold;
}

.exr_block solution:before {
  margin-left: 5px;
  content: "Розв'язання:";
  font-weight: bold;
}

2

Re: Згортанний блок

element.style.display

або можна взагалі обійтись без js використавши тег <details>

Подякували: Yola, leofun01, Engineer, Сергій784