5

tengo varios botones de un menú que deben desplegar información con una pestaña hacia abajo (cada uno individualmente la suya). Como todos hacen lo mismo cree una función (con .toggle) para agregar y quitar una clase y

function desplegar() {
  document.getElementById("meta").classList.toggle("mostrar"),
    document.getElementById("responsive").classList.toggle("mostrar");
}
/*
var opciones =["meta","responsive","catalogo","tienda","blog","diseno","planes"];

function desplegar(){
  
  (no se como seria la identificacion del # donde se cliqueo????').classList.toggle("mostrar");
}*/
main #seccion {
  margin-bottom: 190px;
  margin-top: 10px;
  position: relative;
  top: 0px;
}

main #seccion.sinFooter {
  margin-bottom: 40px;
  top: 250px;
}


/*--boton principal de cada seccion--*/

main nav ol li {
  list-style: none;
}

main nav ol li h2 {
  background: #e6e6e6;
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: #0199f5;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #d2d3d5;
  overflow: hidden;
}

main nav ol li h2:before {
  font-family: 'icomoon';
  content: '\ea0a';
  font-size: .5em;
  position: relative;
  left: -5px;
  top: -3px;
}

main nav ol li h2:hover {
  color: #fbd30c;
  background: #666;
}


/*--desplegable de cada seccion--*/

main nav ol li div.introMenu {
  font-size: .8em;
  display: none;
}

main nav ol li div a {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  cursor: pointer;
  text-align: left;
  color: #000;
}


/*--titulo desplegable--*/

main nav ol li div h3 {
  padding: 3px 0;
}


/*--texto desplegable--*/

main nav ol li div p {
  padding: 5px 0;
}


/*--boton ver mas desplegable--*/

main nav ol li div h4 {
  padding: 5px;
  color: #b5de0a;
  position: relative;
  float: right;
  margin-bottom: 10px;
}


/*--estilo de display para onclick--*/

main nav ol li div#meta.mostrar {
  display: block;
}

main nav ol li div#responsive.mostrar {
  display: block;
}

main nav ol li div#catalogo.mostrar {
  display: block;
}

main nav ol li div#tienda.mostrar {
  display: block;
}

main nav ol li div#blog.mostrar {
  display: block;
}

main nav ol li div#diseno.mostrar {
  display: block;
}

main nav ol li div#precios.mostrar {
  display: block;
}
<main>
  <nav id="seccion">
    <ol>
      <li>
        <h2 onClick="desplegar()">Que hacemos?</h2>
        <div class="introMenu" id='meta'>
          <a href="nuestra_meta.php">
            <h3>No sabes por donde empezar...</h3>
            <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2 onClick="desplegar()">Diseños adaptables</h2>
        <div class="introMenu" id='responsive'>
          <a href="diseno_responsive.php">
            <h3>Nuevas formas de conectarse...</h3>
            <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
    </ol>
  </nav>
</main>

modificar el display de none a block. hasta ahí vamos bien. El problema es que todos responden a la misma función, por lo cual se despliegan todas las pestañas en simultaneo(no importa que botón cliquee)...

Quiero hacer un array para que se identifique el ID del botón que se cliqueo y solo ejecute la función en ese id especifico. Podrian ayudarme con la parte de identificar el id donde se oprime. Paso codigo para orientarlos. Si alguno conoce una mejor forma de lograr lo que necesito será bien recibida Muchas gracias

1
  • No entendí muy bien lo que intentas hacer, o sea, eso de mostrar / ocultar cosas. Pero para identificar el id del elemento que hizo click, solamente con un this.id en la función que escucha los clicks de esos elementos obtendrías el id de cada botón. Ten en cuenta que se pueden agregar listeners por clases, por tipos de elementos, etc. Es cuestión de organizarte y hacer las cosas de la forma más simple posible.
    – A. Cedano
    Commented el 25 feb. 2019 a las 22:07

4 respuestas 4

4

Si usas jQuery es super facil. Para evitar que se trabe el cargado de la pagina, puedes usar CDN como en el siguiente ejemplo:

function desplegar(elemento) {
  $(elemento).next('div').toggleClass("mostrar")  
}
main #seccion {
  margin-bottom: 190px;
  margin-top: 10px;
  position: relative;
  top: 0px;
}

main #seccion.sinFooter {
  margin-bottom: 40px;
  top: 250px;
}

/*--boton principal de cada seccion--*/

main nav ol li {
  list-style: none;
}

main nav ol li h2 {
  background: #e6e6e6;
  display: block;
  width: 100%;
  padding: 15px 0;
  text-align: center;
  color: #0199f5;
  font-family: 'EncodeThin';
  font-size: 1.2em;
  cursor: pointer;
  border-bottom: 1px solid #d2d3d5;
  overflow: hidden;
}

main nav ol li h2:before {
  font-family: 'icomoon';
  content: '\ea0a';
  font-size: .5em;
  position: relative;
  left: -5px;
  top: -3px;
}

main nav ol li h2:hover {
  color: #fbd30c;
  background: #666;
}


/*--desplegable de cada seccion--*/

main nav ol li div.introMenu {
  font-size: .8em;
  display: none;
}

main nav ol li div a {
  width: 100%;
  height: auto;
  padding: 15px 30px;
  cursor: pointer;
  text-align: left;
  color: #000;
}


/*--titulo desplegable--*/

main nav ol li div h3 {
  padding: 3px 0;
}


/*--texto desplegable--*/

main nav ol li div p {
  padding: 5px 0;
}


/*--boton ver mas desplegable--*/

main nav ol li div h4 {
  padding: 5px;
  color: #b5de0a;
  position: relative;
  float: right;
  margin-bottom: 10px;
}


/*--estilo de display para onclick--*/

main nav ol li div#meta.mostrar {
  display: block;
}

main nav ol li div#responsive.mostrar {
  display: block;
}

main nav ol li div#catalogo.mostrar {
  display: block;
}

main nav ol li div#tienda.mostrar {
  display: block;
}

main nav ol li div#blog.mostrar {
  display: block;
}

main nav ol li div#diseno.mostrar {
  display: block;
}

main nav ol li div#precios.mostrar {
  display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<main>
  <nav id="seccion">
    <ol>
      <li>
        <h2 onClick="desplegar(this)">Que hacemos?</h2>
        <div class="introMenu" id='meta'>
          <a href="nuestra_meta.php">
            <h3>No sabes por donde empezar...</h3>
            <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2 onClick="desplegar(this)">Diseños adaptables</h2>
        <div class="introMenu" id='responsive'>
          <a href="diseno_responsive.php">
            <h3>Nuevas formas de conectarse...</h3>
            <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
    </ol>
  </nav>
</main>

1
  • muchas gracias por el aporte, eso es lo que quiero hacer. Ahora, el único problema es que no estoy usando jquery (ya que aun no se como implementarlas) y estaría bueno que si uno selecciona una segunda opción, la primera vuelva a display none.
    – Fernanda
    Commented el 26 feb. 2019 a las 18:11
2

en tu js debes usar esta funcion en el document.ready

$("#ID_BOTON").click(function(){
    TUFUNCION();
});
1
  • hola juan pablo, gracias por tu aporte, pero no se como implementarlo... podrías ampliar un poco mas (estoy recién empezando con js y no estoy utilizando jquery)
    – Fernanda
    Commented el 26 feb. 2019 a las 18:16
1

Conseguí lo que esta buscando con un código bastante simple pero efectivo. Lo paso por si alguien mas necesita hacerlo. Saludos

//despliega info de cada seccion en los botones del menu del index
function desplegar(elemento) {
    $(elemento).next('div').toggle();
    $(".introMenu").not($(elemento).next('div')).hide();
}
1

solo debes pasarle a la funcion a la funcion this ejemplo: desplegar(this)

function desplegar(e){
console.log(e);
}
    main #seccion {
      margin-bottom: 190px;
      margin-top: 10px;
      position: relative;
      top: 0px;
    }

    main #seccion.sinFooter {
      margin-bottom: 40px;
      top: 250px;
    }


    /*--boton principal de cada seccion--*/

    main nav ol li {
      list-style: none;
    }

    main nav ol li h2 {
      background: #e6e6e6;
      display: block;
      width: 100%;
      padding: 15px 0;
      text-align: center;
      color: #0199f5;
      font-family: 'EncodeThin';
      font-size: 1.2em;
      cursor: pointer;
      border-bottom: 1px solid #d2d3d5;
      overflow: hidden;
    }

    main nav ol li h2:before {
      font-family: 'icomoon';
      content: '\ea0a';
      font-size: .5em;
      position: relative;
      left: -5px;
      top: -3px;
    }

    main nav ol li h2:hover {
      color: #fbd30c;
      background: #666;
    }


    /*--desplegable de cada seccion--*/

    main nav ol li div.introMenu {
      font-size: .8em;
      display: none;
    }

    main nav ol li div a {
      width: 100%;
      height: auto;
      padding: 15px 30px;
      cursor: pointer;
      text-align: left;
      color: #000;
    }


    /*--titulo desplegable--*/

    main nav ol li div h3 {
      padding: 3px 0;
    }


    /*--texto desplegable--*/

    main nav ol li div p {
      padding: 5px 0;
    }


    /*--boton ver mas desplegable--*/

    main nav ol li div h4 {
      padding: 5px;
      color: #b5de0a;
      position: relative;
      float: right;
      margin-bottom: 10px;
    }


    /*--estilo de display para onclick--*/

    main nav ol li div#meta.mostrar {
      display: block;
    }

    main nav ol li div#responsive.mostrar {
      display: block;
    }

    main nav ol li div#catalogo.mostrar {
      display: block;
    }

    main nav ol li div#tienda.mostrar {
      display: block;
    }

    main nav ol li div#blog.mostrar {
      display: block;
    }

    main nav ol li div#diseno.mostrar {
      display: block;
    }

    main nav ol li div#precios.mostrar {
      display: block;
    }
<main>
      <nav id="seccion">
        <ol>
          <li>
            <h2 onClick="desplegar(this)">Que hacemos?</h2>
            <div class="introMenu" id='meta'>
              <a href="nuestra_meta.php">
                <h3>No sabes por donde empezar...</h3>
                <p>Tranquilo! Junto a TIMON DIGITAL vas a lograr adaptarte al mundo de hoy y poder conectar con tus clientes, brindandoles lo que necesitan</p>

                <h4>Ver más +</h4>
              </a>
            </div>
          </li>
          <li>
            <h2 onClick="desplegar(this)">Diseños adaptables</h2>
            <div class="introMenu" id='responsive'>
              <a href="diseno_responsive.php">
                <h3>Nuevas formas de conectarse...</h3>
                <p>En la vida de hoy, los teléfonos son una extensión de nosotros, y tu negocio no puede quedar afuera de esta tendencia cada vez mas grande. </p>
                <h4>Ver más +</h4>
              </a>
            </div>
          </li>
        </ol>
      </nav>
    </main>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.