Pergunta sobre como corrigir o WordPress do WordPress: Mostrar/ocultar DIv não está funcionando

Um usuário perguntou ?

Olá,

Ao clicar no botão “Reserve sua reserva”, gostaria de ver o conteúdo no DIV abaixo.

Coloquei isso na página:

<div id="show" class="align-link link">Book Your Reservation</div>
<div id="book-form" style="display: none;">
Booking form here...
</div>

Eu coloquei isso em functions.php

function wpb_hook_javascript() {
    ?>
      <script>
		$(document).ready(function(){
			$('#show').click(function() {
			$('#book-form').toggle("slide");
		  });
		});
      </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

O conteúdo não é exibido. Acho que o javascript não está funcionando, mas não sei por que.

Obrigado!

Este tópico foi modificado 11 meses atrás, uma semana atrás por. Motivo: movido para configurar o WordPress, este não é o conteúdo do WordPress Todo o resto

(@sterndata)

Moderador do Fórum e Voluntário da Equipe de Suporte

11 meses, 1 semana atrás

mudar o primeiro $(document) para jQuery(document). O jq que começa com o WordPress funciona no modo livre de conflitos.

Além disso, enfileirar o script e certificar-se de que é baseado em ‘jquery’.

(@myworldz)

11 meses atrás

Muito obrigado. Achei que funcionou, exceto que corri com outra edição e esperava um pouco mais de ajuda.

Eu tenho várias instâncias do código HTML abaixo na página (aproximadamente 4). Apenas o primeiro funciona, eu assumi que é por causa do ID=”show” então mudei para CLASS=”show”, atualizei o script para corresponder, mas ainda não funciona.

Eu queria saber como editar o script para trabalhar com o ID ou alguma ideia de por que a classe não está funcionando. Estou basicamente procurando ajuda para fazer isso funcionar.

Obrigado! Respeite isso.

(@myworldz)

11 meses atrás

Eu tentei o seguinte, mas só consigo encontrar um formulário para exibir na página. Devo mover o script para outro lugar, talvez? Está no arquivo functions.php.

function wpb_hook_javascript() {
    ?>
      <script>
		jQuery( document ).ready( function( $ ) {
			$('.show').click(function() {
			$('.booking-form').toggle("slide");
		  });
		});
      </script>
    <?php
}
add_action('wp_head', 'wpb_hook_javascript');

HTML

<div class="show align-link link">Book Your Reservation</div>
<div class="booking-form">
[booking-form]
</div>

CSS
.booking-form { display: none; }

Não vejo porque não funciona ?

Esta resposta foi modificada há 11 meses por.