1

Всем привет. Помогите пожалуйста. Хочу сделать чтоб при нажатии на кнопку открывался скрытый блок, а на кнопле менялся текст. Нашел в сети давний код (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>

1

1 ответ 1

0

$(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>

1

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.