jquery -> toggle personalizado

Que tal gente, quiero hacer un "toggle" el problema es que lo hago con la función "toggle" se esconde el contenido pero, necesito que se remueva y adhiera una clase css como no encontré forma de hacerlo con las funciones predeterminadas intente crear yo la función, salió esto:

Código Javascript :

$(document).ready(function(e){ //declaro la función
   var toolsposition = 0; //declaro la variable (según yo) global para mi función
   $("nav.conten").hide(); //escondo el elemento desde el inicio
   if(toolsposition == false){ // creo mi condicional "si" esta escondido que corresponde a 0
      $("div#button-tools").click(function(){ //al dar un click
         $("nav.conten").show(), //muestro mi contenido
         $(this).removeClass("arrow-inactive").addClass("arrow-active"); //remuevo la clase y adhiero otra 
         return toolsposition++; //aquí necesito regresar algún parametro para poder cerrar el contenido
      });
   }else if(toolsposition != false) {  //si no corresponde mi condicional a 0 
      $("div#button-tools").click(function(){ //al dar un click
         $("nav.conten").hide(); //escondo el contenido (lo cual no pasa)
      });
      var toolsposition = 0; //aquí es otro intento por regresar la variable a su estado inicial de cerrado
   }
});

Ahora, el problema es que cuando abro mi cuadro "nav.conten" no encuentro la forma para cerrarlo, lo intente creciendo la variable y con un return lo cual me parecía lo mas lógico, pero no funciona como se supone que quiero y de la forma de abajo "var toolsposition=0" o "$toolsposition=0" tampoco lo cierra, eh buscado documentación, ejemplos, etc.... pero son cosas que no me han podido solucionar el problema, espero alguien me pueda orientar en que es lo que hago mal, gracias y saludos!

Pon la URL a la página donde has implementado esto.

Así a simple vista, me parece que te estás ahogando en un vaso de agua...

DriverOp escribió:

porque lo dices?? esta es la liga: [url=http://promoimpresos.com.mx/test/test.php][/url]

Tal como lo temía.

Lo digo porque todo lo que necesitas saber es qué valor tiene el atributo display del elemento <nav> con class "conten". Solo para saber si está desplegado o no.

Además tienes dos eventos click para el mismo elemento (div#button-tools ) que de todos modos siempre se ejecuta el primero porque está asignado en el evento load del documento el cual se ejecuta una sola vez. En ese caso la lógica está equivocada.

Creo que lo que quieres hacer es esto:

Código Javascript :

$(document).ready(function() {
  $('div#button-tools').click(
    function () {
      if ($('nav.conten').css('display') == 'block') {
        $('nav.conten').hide();
     } else {
       $('nav.conten').show();
     }
    }
);
});

Puedes reemplazar .show() y .hide() por .animate() y hacer que el elemento se despliegue con una animación.

Ah, y un consejo: Un elemento <nav> no debe ir dentro de un <section> porque <nav> ya es una sección diferente de la página.

Hermano muchas gracias!! Ya probé con la condicional de "display" y funciona excelente, por lo cual entiendo que para ocultar el contenido jQuery modifica la propiedad "display"? y una ultima pregunta para comprender un poco mejor las cosas... comprendí ya que no puedo asociar 2 eventos iguales a un mismo elemento pero también intente de esta forma

Código Javascript :

$(document).ready(function(){
   var toolsposition = 0;
      $("div#button-tools").click(function(){
         if(toolsposition == false){
            $("nav.conten").show();
            var toolsposition = 1;
         }else if(toolsposition == true) {
            $("nav.conten").hide();
            var toolsposition = 0; 
         }
      });
});

y así tampoco funciono, intente conocer el valor de "toolposition" con un "alert" y al principio es indefinido después de dar click da 1 pero no pasa el parámetro al siguiente condicional, porque sucede esto?

Pues sí, JQuery no hace más que modificar las propiedades visuales de los elementos, en este caso "display".

Ese código no te funciona como esperabas porque la variable "toolspositions" solo existe durante la ejecución de .ready(), pero la función que pones en el .click() ocurre después de que .ready() terminó y por lo tanto se crea otra variable "toolsposition" que no es la misma que tienes al inicio del .ready().

Para entender mejor esto deberías estudiar lo que se llama "ámbito de los identificadores" (y JavaScript es bastante confuso en esto).