Показать блок по клику в elementor

показать блок по клику в elementor

Простой способ показать блок по клику в elementor можно путем добавления кастомного кода js. Для начало необходимо создать два элемента. Элемент по которому будет происходить нажатие и элемент который будет отображаться.

Вставим кнопку и зададим ей id.

Для скрываемого/показываемого блока тоже зададим id. В нашем случае это форма поиска.

Вставляем код для отображения/скрытия блока. Данный код можно вставить в footer.php, но в таком случае этот код будет выполняться. на всех страницах. Лучше всего его вставить в functions.php по условия для страницы на которой собирайтесь разместить скрываемый блок. Либо воспользоваться плагином для вставки кастомного кода.

<script>
	jQuery(function($){
		$('document').ready(function(){
        $('#btn_search').click(function(){
					$('#btn_search').toggleClass('active');
					$('#hide_search').slideToggle('slow');
//эта часть кода ниже задает тайтл для кнопки
					if($('#btn_search').hasClass('active')){
						 		$('#btn_search .elementor-button-text').text('Скрыть');
						 }else{
							 	$('#btn_search .elementor-button-text').text('Поиск');
						 }
            
      return false;
    });
 });
		});
</script>

В конечном итоге мы получаем отображение блока( в нашем случае это форма поиска).

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.