mostrar y ocultar contenido

[laura_moreno14]

Hola buenas, es la primera vez que escribo en el foro de javascript, ya que me dedico mas al php, pero esta vez necesito usar js para una cosita y no consigo que funcione bien, haber si alguien puede echarme una mano.

Tengo una serie de opciones en un theme wordpress y me gustaria que estas estubieran ocultas hasta hacer click en el titulo de la seccion correspondiente.

Las opciones estan ocultas pero no aparecen cuando hago click. Se que es por que no he echo el css necesario, pero el problema es que no se muy bien como hacerlo. El codigo que tengo lo he sacado de un tutorial pero no se como adaptarlo a mi codigo.

Este es el codigo que tengo hasta el momento.

Código HTML:

<div class="wrap">
    
    <h2>Opciones generales</h2>
    
    
    <form method="POST" action="options.php">
       
      
           <input type='hidden' name='option_page' value='opciones' />
 
<input type="hidden" name="action" value="update" />
<input type="hidden" id="_wpnonce" name="_wpnonce" value="93fdaddfb5" /><input type="hidden" name="_wp_http_referer" value="/pruebasphp/wordpress/wp-admin/admin.php?page=theme-options" /><h3>Generales</h3>
<table class="form-table"><tr valign="top"><th scope="row">Analytics options</th><td>
            <div class="section">
            
                <input type="text" name="general_option[id]"
                 value="UA-35479114-1" 
                  />
                
                <span>add google analytics ID</span>
                
                </div>
  
        
        
            <div class="section">
            
                <input type="radio" name="general_option[position]"
                 value="1" 
                  checked='checked' />
                
                <span>into head</span>
                
                </div>
  
        
        
            <div class="section">
            
                <input type="radio" name="general_option[position]"
                 value="2" 
                  />
                
                <span>into footer</span>
                
                </div>
  
    
    </form>
    
    
    </div>
 

Código Javascript:

jQuery(document).ready(function(){  
        jQuery('.form-table').slideUp();  
          
        jQuery('.wrap h3').click(function(){        
            if(jQuery(this).parent().next('.form-table').css('display')==='none')  
                {   jQuery(this).removeClass('inactive').addClass('active');  
                      
                }  
            else  
                {   jQuery(this).removeClass('active').addClass('inactive');  
                }  
                  
            jQuery(this).parent().next('.form-table').slideToggle('slow');    
        });  
});
 

[rottenp4nx]

Con css dale la propiedad display en none a form-table

Código Javascript:

$(document).ready(function(){
     $(".wrap h3").click(abrirCerrar);
});
 
 
function abrirCerrar(){
   var x = $(this).next('.form-table').first();
   if(x.css("display")=="none"){
       x.slideDown("slow");
   }
   else{
      x.slideUp("slow");
   }
}
 

Creo que hay otra forma más con toogle, no recuerdo bien

http://api.jquery.com/toggle/

Saludos