nuevo problema con toggle

hice este microscopico codigo para intentar ocultar un objeto

Código Javascript :

$(document).ready(function(){
$("#button").click(function(){
$("#accordion").toggle("slow");
});

mis problemas son 2:

1 cada que intento agregarle otra linea para que el objeto no salga luego luego, sino que este oculto hasta que se presiona "button" todo se sale de su lugar.

y 2 el explorer no interpreta esas 3 lineas alguien sabe el por que?

La función está bien a excepción de cerrar el $(document).ready.

En el primer problema, deberías ser más específico con lo de que "todo se sale de lugar". Si realmente te pasa algo así es posible que debas ponerle un "stop", de forma que la función toggle te quedaría así: "$("#accordion").stop().toggle("slow");".

EL segundo fallo, ¿Qué versión de IE utilizas?

Muchas gracias por tomarte el tiempo de responderme.

Pues en la primer situacion las piezas de (#accordion) literalmente se dispersan por toda la pantalla al momento de correr el codigo y el IE que ocupo es el 8.

Es posible que no tengas bien encapsuladas las capas/partes del acordeón. Para utilizar los efectos deben estar bien delimitadas por una capa padre que les indique hasta donde deben aparecer u ocultarse. Realmente sin ver el ejemplo no podría ayudarte mucho más.

Respecto a IE8 es posible que se deba también al error mencionado anteriormente. Prueba a realizar, en vez de toggle, un show, y observa los resultados.

Código HTML :

<div align="center" style="padding-top:1em;">
        <button id="button">Más información...</button></div>

<div>

      <link type="text/css" href="css/south-street/jquery-ui-1.8.16.custom.css" rel="stylesheet" />   
      <script type="text/javascript">
         $(function(){

            // Accordion
            $("#accordion").accordion({ header: "h3" });
            
            //hover states on the static widgets
            $('#dialog_link, ul#icons li').hover(
               function() { $(this).addClass('ui-state-hover'); }, 
               function() { $(this).removeClass('ui-state-hover'); }
            );
            
         });
      </script>
      <style type="text/css">
         /*demo page css*/
         body{ font: 62.5% "Trebuchet MS", sans-serif; margin: auto;}
         .demoHeaders { margin-top: 2em; }
         #dialog_link {padding: .4em 1em .4em 20px;text-decoration: none;position: relative;}
         #dialog_link span.ui-icon {margin: auto;position: absolute;left: .2em;top: 50%;margin-top: -8px;}
         ul#icons {margin: auto; padding: 0;}
         ul#icons li {margin: 2px; position: relative; padding: 4px 0; cursor: pointer; float: left;  list-style: none;}
         ul#icons span.ui-icon {margin: auto}
      </style>   
    <div id="accordion">
     <div>
            <h3><a href="#">Atribuciones</a></h3>
            <div>
                
             <p>
                 
                    texto
                 
                 </p>
                 
            </div>
     </div>
         <div>
            <h3><a href="#">Curriculum</a></h3>
            <div>
                <div class="titulo">Nivel máximo de estudios:</div>
               <br />
                <p1 class="texto">Phasellus mattis tincidunt nibh.</p1>
               <br /> 
               <br />
                 <div class="titulo">Áreas de conocimiento:</div> 
               <br />
                    <p2 class="texto">Phasellus mattis tincidunt nibh.</p2>
               <br />
               <br />
                 <div class="titulo">Experiencia laboral:</div>
                  <br />
                    <p3 class="texto">Phasellus mattis tincidunt nibh.</p3>
               <br />
               <br />
                </div>
         </div>
         <div>
            <h3><a href="#">Perfil de puesto</a></h3>
            <div>
                <div class="titulo">Nombre del puesto:</div>
                   <br />
                    <p4 class="texto">Phasellus mattis tincidunt nibh.</p4>
                   <br />
                   <br />
                 <div class="titulo">Objetivo y funciones del puesto:</div>
                   <br />
                    <p5 class="texto">Phasellus mattis tincidunt nibh.</p5>
                   <br />
                   <br />
                <div class="titulo">Escolaridad y/o áreas de conocimiento:</div>
                   <br />
                    <p6 class="texto">Phasellus mattis tincidunt nibh.</p6>
                   <br />
                   <br />
                <div class="titulo">Experiencia laboral requerida:</div>
                   <br />
                    <p7 class="texto">Phasellus mattis tincidunt nibh.</p7>
                   <br />
                   <br />
                </div>
         </div>     
      </div>
          <div>
            <p>beastboy</p>
    </div>
      </div>

ese es el codigo del acordeon la otra funcion la llamo desde un archivo js.
y te agradezco mucho que te tomes el tiempo de ayudarme

En el código que me has facilitado tienes muchos fallos. Empecemos por el principio. Antes de nada, creo que no estaría de más que explicaras exactamente que efecto quieres conseguir. A raíz de tu código sólo puedo sacar que estás cambiando la clase de algunos elementos.

A partir de aquí, tienes muchos fallos de los que no puedo comentarte todos, pero sí algunos, como por ejemplo tener los link, style y script dentro de una capa. Esto es impensable. Deben estar dentro del HEAD salvo excepciones en las que te sea imposible. Utilizas jQuery UI pero no jQuery (aunque no se si lo llamaras en otra parte de la web).
También debes evitar utilizar los BR. Tu web esta llena de ellos y eso no te favorecerá en la aplicación de los efectos.
Las etiquetas p1, p2, p3... no se de donde las habrás sacado, pero ni son estándares ni son necesarias, por lo que yo evitaría usarlas y usaría la etiqueta "p".
Si utilizas como tamaño de fuente principal el valor "62%", notarás que según el navegador este tendrá un tamaño u otro. Utiliza un valor en pixeles como principal, y a raíz de aquí utiliza los porcentajes.

Aparte de esto, y a falta de ver el código al completo, la estructura es muy deficiente. Yo que tú le metía mano antes a la codificación HTML y CSS, y después entraría en materia con JavaScript y jQuery.

$(document).ready(function(){
$("#button").click(function(){ //<<<<<<<<<< ESTO ESTA POR DEMAS
$("#accordion").toggle("slow");
});

El toggle, es como un evento CLick, y ya no tienes x q poner una funcion CLick.

lekofev:
Discrepo.
El elemento #accordion debe mostrarse/ocultarse cuando se haga click en el elemento #button, por lo tanto sí es necesario establecer el evento onClick del elemento #button.

Estoy de acuerdo con DriverOp. Es posible que la función Toogle, por defecto, interprete que debe ser ejecutado con el evento Click. Pero eso no significa que indicarselo sobre, todo lo contrarío, logra que el código este más claro, y sea más fácil entender que se hace, además de seguir una estructura única y, porque no, facilitar a la hora de editar.

Muchas gracias por su tiempo, corregire los errores lo antes posible y pues el efecto es que se mantenga oculto el objeto accordion hasta que presiones el boton de mas informacion y despues el volver a presionarlo se oculte.