JavaScript проблема с текстом при возвращение

179

29 марта 2022, 01:20

Есть кнопка "Развернуть" при нажатие на кнопку текст должен поменяться на "Свернуть" и при повторном нажатие вернуться в исходное состояние (Развернуть) Вот заготовка

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
img {
    height: 20px;
    width: 300px;
    transition: 3s;
}
.kart {
    height: 300px;
    transition: 3s;
}
</style>
<body>
<img src="1555494_1461016165200_full.jpg">
<button>Показать</button>
</body>
<script>
let btn = document.querySelector('button')
let img = document.querySelector('img')
btn.addEventListener('click', function () {
    img.classList.toggle('kart')
    btn.textContent = 'Свернуть'
})
</script>
</html>

Answer 1

let btn = document.querySelector('button') 
btn.addEventListener('click', function () { 
    btn.textContent = btn.textContent === 'Свернуть' ? 'Развернуть' : 'Свернуть'; 
})

<button>Развернуть</button>

Answer 2

Вот такой есть интересный вариант + дополнительно с картинкой:

$(".toggle").click(function() { 
  $(".hidden").slideToggle("slow"); 
  $(this).html(function(i, html) { 
    if (html.indexOf('Развернуть') != -1) { 
      html = html.replace('Развернуть', 'Свернуть'); 
    } else { 
      html = html.replace('Свернуть', 'Развернуть'); 
    } 
    return html; 
  }).find('img').attr('src', function(i, src) { 
    return (src.indexOf('https://cdn.icon-icons.com/icons2/1812/PNG/64/4213478-action-add-button-more-new-plus-round_115393.png') != -1) ? 'https://icon-icons.com/icons2/1416/PNG/32/arrows-square-minus_97890.png' : 'https://cdn.icon-icons.com/icons2/1812/PNG/64/4213478-action-add-button-more-new-plus-round_115393.png'; 
  }); 
});

.hidden { 
  display: none; 
} 
 
img { 
  width: 15px; 
  vertical-align: middle; 
  margin-right: 10px; 
  float: left; 
} 
 
p { 
  line-height: 15px; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<p class="toggle">Развернуть<img src="https://cdn.icon-icons.com/icons2/1812/PNG/64/4213478-action-add-button-more-new-plus-round_115393.png"></p> 
<div class="hidden">Скрытый текст</div>