Блог

Главная - Вопросы по программированию - скрыть элемент на странице загрузки и показать его при нажатии

скрыть элемент на странице загрузки и показать его при нажатии

#javascript #html

Вопрос:

здравствуйте, я использую javascript для отображения и скрытия элемента. он работает, но при загрузке страницы элемент все еще виден, пока я не нажму на кнопку, после чего он будет скрыт. в моем случае мне нужно обратное ( элемент не должен быть виден на странице загрузки, пока я не нажму на кнопку) это мой код :

 <input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>

 
 
(function($){


$(document).ready(function(){
$('#hideshow').click(function(){
    $('.price-rules-table-wrapper').toggle('show');
  });
});


})(jQuery);

я что-то пропустил ?

Ответ №1:

Применять display:none :

 (function($) {
  $(document).ready(function() {
    $('#hideshow').click(function() {
      $('.price-rules-table-wrapper').toggle('show');
    });
  });
})(jQuery); 
 div {
  display: none;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>

В качестве альтернативы вы можете скрыть его программно при загрузке страницы:

  $('.price-rules-table-wrapper').hide();
(function($) {
  $(document).ready(function() {
    $('#hideshow').click(function() {
      $('.price-rules-table-wrapper').toggle('show');
    });
  });
})(jQuery); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='button' id='hideshow' value='Sélectionnez la quantité'>
<div class="price-rules-table-wrapper">test test </div>

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

1. @omayma Рад помочь 🙂

Метки: