Блог

Главная - Вопросы по программированию - Как сделать кнопку, при нажатии на которую кнопка исчезнет и появится новый div

Как сделать кнопку, при нажатии на которую кнопка исчезнет и появится новый div

#javascript #html

#javascript #HTML

Вопрос:

Может кто-нибудь помочь мне, как сделать кнопку, при нажатии кнопка исчезнет и вызовет новый div, я все еще новичок и не очень понимаю JavaScript, и я еще не создал кнопку, я использую bootstrap:

[Из этого] https://i.stack.imgur.com/jyQj8.png

[К этому] https://i.stack.imgur.com/TpZ28.png

 <div class="ctg-type">
    <a class="ctg-type-link" href="">Pakaian Wanita</a>
    <a class="ctg-type-link" href="">Atasan</a>
    <a class="ctg-type-link" href="">Outwear</a>
    <a class="ctg-type-link" href="">Dress</a>
    <a class="ctg-type-link" href="">Jumpsuit amp; Overall</a>
    <a class="ctg-type-link" href="">Batik amp; Kebaya</a>
  </div>

Комментарии:

1. вы хотите развернуть div со значениями по щелчку?

2. Не могли бы вы пояснить, пожалуйста?

3. @sergeykuznetsov да

4. @BerkeKaanCetinkaya вот так youtu.be/ZwC6j-MExlc

Ответ №1:

Вы хотите что-то подобное этому?

Нажмите на ссылку-кнопку «показать еще».

 $('.show_more').on('click', function(event) {
  event.preventDefault();
  $('.ctg-type-link.hide').removeClass('hide');
  $(this).addClass('hide');
}); 
 .ctg-type {
  display: flex;
  flex-direction: column;
  background-color: lightgrey;
}

.show_more {
  color: green;
}

.hide {
  display: none;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ctg-type">
    <a class="ctg-type-link" href="">Pakaian Wanita</a>
    <a class="ctg-type-link" href="">Atasan</a>
    <a class="ctg-type-link" href="">Outwear</a>
    <a class="ctg-type-link" href="">Dress</a>
    <a class="ctg-type-link" href="">Jumpsuit amp; Overall</a>
    <a class="ctg-type-link" href="">Batik amp; Kebaya</a>
    <a href="" class="show_more">show more</a>
    <a class="ctg-type-link hide" href="">Pakaian Wanita2</a>
    <a class="ctg-type-link hide" href="">Atasan2</a>
    <a class="ctg-type-link hide" href="">Outwear2</a>
    <a class="ctg-type-link hide" href="">Dress2</a>
    <a class="ctg-type-link hide" href="">Jumpsuit amp; Overall2</a>
    <a class="ctg-type-link hide" href="">Batik amp; Kebaya2</a>
</div>

Ответ №2:

Вот функция javascript, используемая для скрытия кнопки нажатием на эту кнопку

 <!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#hide").click(function(){
    $("button").hide();
  });
});
</script>
</head>
<body>

<p>If you click on the "Hide" button, It will disappear.</p>

<button id="hide">Hide</button>

</body>
</html>

Комментарии:

1. спасибо за помощь, чувак, теперь проблема решена 🙂