Показать блок один раз по скрипту

07 ноября 2021, 02:50

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

//Показать Форму заказать звонок 
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>

Answer 1

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>

Answer 2

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

//Показать Форму заказать звонок 
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>

Answer 3

Без 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>