Menu desplegable (Ver / Ocultar)

[andre___5025]

BUenos dias amigos. Tengo un menu desplegable en donde en cada menu principal tiene la opcion de dar clic para ver u ocultar sus subenlaces. Lo que pasa es que cuando abro la pagina el menu aparece de una vez con sus sublinks mostrados y lo que quiero es que aparezcan ocultos a primera vista. Ya si el usuario quiere visualizarlos entonces debe darle clic en la opcion de ver u ocultar.

Este es el js que realiza la función:

Código Javascript:

//  Andy Langton's show/hide/mini-accordion @ http://andylangton.co.uk/jquery-show-hide
 
// this tells jquery to run the function below once the DOM is ready
$(document).ready(function() {
 
// choose text for the show/hide link - can contain HTML (e.g. an image)
var showText='Ver';
var hideText='Ocultar';
 
// initialise the visibility check
var is_visible = false;
 
// append show/hide links to the element directly preceding the element with a class of "toggle"
$('.toggle').prev().append(' <a href="#" class="toggleLink">'+hideText+'</a>');
 
// hide all of the elements with a class of 'toggle'
$('.toggle').show();
 
// capture clicks on the toggle links
$('a.toggleLink').click(function() {
 
// switch visibility
is_visible = !is_visible;
 
// change the link text depending on whether the element is shown or hidden
if ($(this).text()==showText) {
$(this).text(hideText);
$(this).parent().next('.toggle').slideDown('slow');
}
else {
$(this).text(showText);
$(this).parent().next('.toggle').slideUp('slow');
}
 
// return false so any link destination is not followed
return false;
 
});
});
 

Este es el menu:

Código HTML:

<aside id="sidebar" class="column">
        <hr/>
        <h3>Configuraci&oacute;n b&aacute;sica</h3>
        <ul class="toggle">
            <li class="icn_categories"><a href='../basicas/tipo_ident.php' target="principal">Tipo de identificaci&oacute;n</a></li>
            <li class="icn_categories"><a href='../basicas/tipo_anexo.php' target="principal">Tipo de anexo</a></li>
            <li class="icn_categories"><a href='../basicas/dependencias.php' target="principal">Dependencias</a></li>
            <li class="icn_categories"><a href='../basicas/estado_doc.php' target="principal">Estado del documento</a></li>
            <li class="icn_categories"><a href='../basicas/departamentos.php' target="principal">Departamentos de Colombia</a></li>
            <li class="icn_categories"><a href='../basicas/municipios.php' target="principal">Municipios de Colombia</a></li>
            <li class="icn_categories"><a href='../basicas/tipos_usuario.php' target="principal">Perfiles de usuarios</a></li>
            <li class="icn_categories"><a href='../basicas/estado_tramite.php' target="principal">Estado del tr&aacute;mite</a></li>
            <li class="icn_categories"><a href='../basicas/tipo_documento.php' target="principal">Tipo de tr&aacute;mite</a></li>
            <li class="icn_categories"><a href='../basicas/zona_viv.php' target="principal">Zona de residencia</a></li>
            <li class="icn_categories"><a href='../basicas/barrios_veredas.php' target="principal">Barrios y veredas de residencia</a></li>
            <li class="icn_categories"><a href='../basicas/prioridad.php' target="principal">Prioridad del tr&aacute;mite</a></li>
            <li class="icn_categories"><a href='../basicas/nivel.php' target="principal">Nivel de usuarios</a></li>
        </ul>
        <h3>Usuarios</h3>
        <ul class="toggle">
            <li class="icn_add_user"><a href='../usuarios/externo.php' target="principal">Crear usuario externo</a></li>
            <li class="icn_add_user"><a href="#">Crear funcionarios</a></li>
            <li class="icn_view_users"><a href="#">Visualizar usuarios</a></li>
            <!--  <li class="icn_profile"><a href="#">Your Profile</a></li>-->
        </ul>
        <h3>Documentos</h3>
        <ul class="toggle">
            <li class="icn_folder"><a href="#">Crear documentos</a></li>
            <li class="icn_photo"><a href="#">Gallery</a></li>
            <li class="icn_audio"><a href="#">Audio</a></li>
            <li class="icn_video"><a href="#">Video</a></li>
        </ul>
        <h3>Admin</h3>
        <ul class="toggle">
            <li class="icn_settings"><a href="#">Options</a></li>
            <li class="icn_security"><a href="#">Security</a></li>
            <li class="icn_jump_back"><a href="http://www.forosdelweb.com/f13/inicio_sesion/logout1.php" target="_top">Cerrar sesi&oacute;n</a></li>
        </ul>
        
        <footer>
            <hr />
        
        </footer>
    </aside><!-- end of sidebar -->
 

Esta es una imagen de como me aparece el menu a primera vista.
http://www.subirimagenes.net/i/140524053723155132.png

Bueno espero me puedan colaborar. Se los agradecería mucho

[caricatos]

Hola:

Tener visible los enlaces es lo normal si quieres tener la página "accesible"... se ocultan al producirse el evento de carga de la página. Imagínate que tus visitantes tienen desactivado javascript... estando los enlaces ocultos, nunca se mostrarán.

Saludos

[Alexis88]

Pues, previamente debiste ocultarlos desde la hoja de estilos y el efecto del despliegue lo hacías ya sea con CSS o con JS.

Aunque es offtopic, te dejo este ejemplo de menú desplegable que hice hace un tiempo con CSS: http://jsfiddle.net/7Q9mJ/

Saludos