script.js код, реализующий кнопку «Подробнее» для просмотра статьи

Question

я совсем ещё зеленый в этой теме,подскажите пожалуйста.Как реализовать кнопку подробнее через js ,я хочу сделать так: overflow: hidden; при нажатии заменить на overflow: visible;
Возможно ли это как то сделать через js?

var info=document.getElementsByClassName("button_info")
var text_info=document.getElementsByClassName("text_none")
info.onclick = function ()
{
    document.getElementByClassName('text_none').style.overflow="visible"; 
}   (Этот код не работает,возможно я неправильно обращаюсь,или же вообще так делать нельзя?)C

Есть HTML код:

<div class="button_info       ">Показать всё содержимое статьи:
</div>
<div class="text_none       "    > Текст,который будет не вмещаться  в рамки <br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
</div>

CSS-код:

.text_none 
{
max-height: 150px;
max-width: 300px;
overflow: hidden; 
border: 1px solid black;
}             
.button_info
{
background-color:  darkcyan;
color: white;
padding: 12px 16px;
font-size: 18px;
font-weight: bold;
border: none;
cursor: pointer;
width: 120px;
}

Answer 1

Не очень понял, что это "Текст,который будет не вмещаться в рамки". Но в остальном можно использовать класс модификатор, к примеру "more". Который по кнопке будет добавлять необходимые вам стили и при повторном клике возвращать обратно. Надеюсь правильно понял вопрос.

let info=document.querySelector(".button_info")
let text_info=document.querySelector(".text_none")
info.onclick = function ()
{
   text_info.classList.toggle('more')   
}

.text_none {
  max-height: 150px;
  max-width: 300px;
  overflow: hidden; 
  border: 1px solid black;
}         
.text_none.more {
  max-height: none;  
  overflow: visible;
  
}  

.button_info {
  background-color:  darkcyan;
  color: white;
  padding: 12px 16px;
  font-size: 18px;
  font-weight: bold;
  border: none;
  cursor: pointer;
  width: 120px;
}

<div class="button_info">Показать всё содержимое статьи:</div>
<div class="text_none">
  Текст,который будет не вмещаться  в рамки <br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который вмещается в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
  Текст,который  не вмещался в рамки<br>
</div>

БЛОГ НА HUSL

script.js код, реализующий кнопку «Подробнее» для просмотра статьи

Ответы (1 шт):