0

Как показать блок только один раз, руководствуясь скриптом ниже?
Обе кнопки призваны показать класс, в случае щелчка по ним, но нужно, чтобы выполнялось условие: если блок уже показан, то скрывать при нажатии на кнопку не надо.

//Показать Форму заказать звонок
jQuery(document).ready(function($) {
    $(".callmeform").click(function() {
       var element = document.querySelector(".call-form-wrap");
       if(element.classList.contains("show-block")) {
          element.classList.remove("show-block");
       } else {
          element.classList.add("show-block");
       }
    });
});
.show-block {
  display: block !important;
}
<button class="callmeform">Показать</button>
<div class="call-form-wrap" style="display: none">
   Теперь меня видно, чувак. 
</div>

<button class="callmeform">Показать 2</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

3 ответа 3

0

jQuery(document).ready(function($) {
    $(".callmeform").click(function() {
       var element = document.querySelector(".call-form-wrap");
       if(element.classList.contains("show-block")) {
         } else {
          element.classList.add("show-block");
       }
    });
});
.show-block {
  display: block !important;
}
<button class="callmeform">Показать</button>
<div class="call-form-wrap" style="display: none">
   Теперь меня видно, чувак. 
</div>

<button class="callmeform">Показать 2</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

Или так красивше:

 jQuery(document).ready(function($) {
 $(".callmeform").click(function() {
  var element = document.querySelector(".call-form-wrap");
  element.classList.contains("show-block") ? "" : element.classList.add("show-block");      
});
});
.show-block {
  display: block !important;
}
<button class="callmeform">Показать</button>
<div class="call-form-wrap" style="display: none">
   Теперь меня видно, чувак. 
</div>

<button class="callmeform">Показать 2</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

0

Если без хитрых замыслов, то можно так!

//Показать Форму заказать звонок
jQuery(document).ready(function($) {
    $(".callmeform").click(function() {
       var element = document.querySelector(".call-form-wrap");
       const isShow = element.classList.contains("show-block");
       if (isShow) return;
       if(isShow) {
          element.classList.remove("show-block");
       } else {
          element.classList.add("show-block");
       }
    });
});
.show-block {
  display: block !important;
}
<button class="callmeform">Показать</button>
<div class="call-form-wrap" style="display: none">
   Теперь меня видно, чувак. 
</div>

<button class="callmeform">Показать 2</button>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>

0

Без Jquery

const btns = document.querySelectorAll('.callmeform')
const div = document.querySelector('.call-form-wrap')

btns.forEach(btn => btn.addEventListener('click', () => 
  div.style.display != 'none' ? false : div.style.display = 'block'
));
<button class="callmeform">Показать</button>
<div class="call-form-wrap" style="display: none">
   Теперь меня видно, чувак. 
</div>
<button class="callmeform">Показать 2</button>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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