Не работает плавное появление блока в jQuery

219

19 апреля 2022, 00:30

Всем привет. Помогите пожалуйста. Хочу сделать чтоб при нажатии на кнопку открывался скрытый блок, а на кнопле менялся текст. Нашел в сети давний код (2012 года) но что то он не так как надо работает, вродь все правильно реализовал. Почему то кнопка сразу скрывается. (вместо скачаного архива jQuery установил потом ссылку). Код в песочнице

$(document).ready(function() {
  $('#s').toggle(function() {
    $('#t').show(500);
    $('#s').text('Свернуть');
  }, function() {
    $('#t').hide(500);
    $('#s').text('Більше фото');
  });
});

.t_btn {
  display: flex;
  flex-direction: column;
  height: 300px;
  align-items: center;
  border: 2px solid red;
  position: absolute;
}
.t_btn__block_button {
  overflow: hidden;
  border-radius: 24px;
}
.t_btn__block_button p {
  padding: 10px 20px;
  background-image: linear-gradient(#e6ca2e, #f3f36a);
  font-size: 24px;
  font-weight: 900;
}
#t {
  margin-top: 50px;
  height: 200px;
  width: 300px;
  display: none;
}

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>button</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
  </header>
  <main>
    <div class="t_btn">
      <a>
        <div class="t_btn__block_button">
          <p id="s">Більше фото</p>
        </div>
      </a>
    </div>
    <div id="t">
      <img src="https://ki.ill.in.ua/m/670x450/24472749.jpg">
    </div>
  </main>
  <footer>
  </footer>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

Answer 1

$(document).ready(function() {
  $('#s').click(function() {
    $('#t').toggle(500);
    $('#s').text($('#s').text() == 'Свернуть'? 'Більше фото' : 'Свернуть');
  });
});

.t_btn {
  display: flex;
  flex-direction: column;
  height: 300px;
  align-items: center;
  border: 2px solid red;
  position: absolute;
}
.t_btn__block_button {
  overflow: hidden;
  border-radius: 24px;
}
.t_btn__block_button p {
  padding: 10px 20px;
  background-image: linear-gradient(#e6ca2e, #f3f36a);
  font-size: 24px;
  font-weight: 900;
}
#t {
  margin-top: 50px;
  height: 200px;
  width: 300px;
  display: none;
}

<!doctype html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>button</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
  </header>
  <main>
    <div class="t_btn">
      <a>
        <div class="t_btn__block_button">
          <p id="s">Більше фото</p>
        </div>
      </a>
    </div>
    <div id="t">
      <img src="https://ki.ill.in.ua/m/670x450/24472749.jpg">
    </div>
  </main>
  <footer>
  </footer>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>