Home / Questions / 239994
Accepted
Fernanda
Asked: 2020-02-22 13:36:49 +0800 CST 2020-02-22 13:36:49 +0800 CST

how to activate a display block on click (onclick or other method)

  • 772

I have some stacked buttons and I want a tab between them to be changed to block when clicked. remaining: the button clicked above, the tab that appeared and below the rest of the buttons. I don't know how to do it (since I don't handle much js) and the displays of each button tab should be individualized. I pass the code so that they are oriented`

/*--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;
  display: block;
  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;
}
<main>
  <nav id="seccion">
    <ol>
      <li>
        <h2>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>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>
      <li>
        <h2>Catálogo online</h2>
        <div class="introMenu" id='catalogo'>
          <a href="catalogo_online.php">
            <h3>Llega más lejos aún...</h3>
            <p>Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores? Entonces un catalogo online es lo que estas necesitando!</p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2>Tienda virtual</h2>
        <div class="introMenu" id='tienda'>
          <a href="tienda_virtual.php">
            <h3>Vende a toda hora!</h3>
            <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores? Entonces un catalogo online es lo que estas necesitando!</p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2>Blog</h2>
        <div class="introMenu" id='blog'>
          <a href="blogs.php">
            <h3>Tenes mucho para contar</h3>
            <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores</p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2>Diseño gráfico</h2>
        <div class="introMenu" id='diseno'>
          <a href="diseno_grafico.php">
            <h3>Tu imagen dice mucho de tu negocio</h3>
            <p>bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla</p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
      <li>
        <h2>Nuestros precios</h2>
        <div class="introMenu" id='planes'>
          <a href="planes.php">
            <h3>La unión hace la fuerza...</h3>
            <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores</p>
            <h4>Ver más +</h4>
          </a>
        </div>
      </li>
    </ol>
  </nav>
</main>

javascript

3 Answers

  1. What I did was hide the "li" to only show the tabs you want and with a button to show everything again, I hope it helps you, the JS code is very simple and easy to understand.

    var arrayidbotones_ = new Array('meta_', 'responsive_', 'catalogo_', 'tienda_', 'blog_', 'diseno_', 'planes_');
var arrayidbotones = new Array('meta', 'responsive', 'catalogo', 'tienda', 'blog', 'diseno', 'planes');

function oculta_botones() {

  var boton_seleccionado = event.target.id;
  var boton_seleccionado_ = boton_seleccionado + "_";


  for (var i = 0; i < arrayidbotones.length; i++) {
    document.getElementById(arrayidbotones[i]).style.display = 'none';
    document.getElementById(arrayidbotones_[i]).style.display = 'none';

  }

  for (var i = 0; i < arrayidbotones.length; i++) {

    if (boton_seleccionado == arrayidbotones[i] || boton_seleccionado_ == arrayidbotones_[i]) {

      document.getElementById(boton_seleccionado).style.display = 'block';
      document.getElementById(boton_seleccionado_).style.display = 'block';
    }

  }
}

function mostrar_todo() {
  for (var i = 0; i < arrayidbotones.length; i++) {
    document.getElementById(arrayidbotones[i]).style.display = 'block';
    document.getElementById(arrayidbotones_[i]).style.display = 'none';
  }
}
    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;
  display: block;
  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;
}
    <!DOCTYPE html>
<html>

<head>




</head>

<body>
  <button type="button" onclick="mostrar_todo()"> Regresar </button>
  <main>
    <nav id="seccion">
      <ol>
        <li>
          <h2 id='meta' onclick="oculta_botones()" style="display: block;">Que hacemos?</h2>
          <div class="introMenu" id='meta_' style="display: none;">
            <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 id='responsive' onclick="oculta_botones()" style="display: block;">Diseños adaptables</h2>
          <div class="introMenu" id='responsive_' style="display: none;">
            <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>
        <li>
          <h2 id='catalogo' onclick="oculta_botones()" style="display: block;">Catálogo online</h2>
          <div class="introMenu" id='catalogo_' style="display: none;">
            <a href="catalogo_online.php">
              <h3>Llega más lejos aún...</h3>
              <p>Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores? Entonces un catalogo online es lo que estas necesitando!</p>
              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
        <li>
          <h2 id='tienda' onclick="oculta_botones()" style="display: block;">Tienda virtual</h2>
          <div class="introMenu" id='tienda_' style="display: none;">
            <a href="tienda_virtual.php">
              <h3>Vende a toda hora!</h3>
              <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores? Entonces un catalogo online es lo que estas necesitando!</p>
              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
        <li>
          <h2 id='blog' onclick="oculta_botones()" style="display: block;">Blog</h2>
          <div class="introMenu" id='blog_' style="display: none;">
            <a href="blogs.php">
              <h3>Tenes mucho para contar</h3>
              <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores</p>
              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
        <li>
          <h2 id='diseno' onclick="oculta_botones()" style="display: block;">Diseño gráfico</h2>
          <div class="introMenu" id='diseno_' style="display: none;">
            <a href="diseno_grafico.php">
              <h3>Tu imagen dice mucho de tu negocio</h3>
              <p>bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla</p>
              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
        <li>
          <h2 id='planes' onclick="oculta_botones()" style="display: block;">Nuestros precios </h2>
          <div class="introMenu" id='planes_' style="display: none;">
            <a href="planes.php">
              <h3>La unión hace la fuerza...</h3>
              <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores</p>
              <h4>Ver más +</h4>
            </a>
          </div>
        </li>
      </ol>
    </nav>
  </main>

</body>

</html>

    • 1
  2. Best Answer

    there I got the code I was needing with another programmer. I pass it to whoever needs to do the same

    //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();
}

    Cheers

    • 0

  3. you can do it like this:

    NOTE: it is pure javascript

    // seleccionamos todos los "li" que tengan un hijo directo "h2"
// y hacemos un loop
for (let x of document.querySelectorAll("li > h2")){

    // colocamos un eventlistener para el click a los elementos li > h2
    x.addEventListener("click",(e)=>{
        // del evento seleccionamos el target luego al siguiente elemento
       let target = e.target.nextElementSibling;
       // configuramos el display dependiendo de:
       // target.style.display == none o a nada sera igual a block en caso contrario sera none.
       target.style.display = (target.style.display == "" || target.style.display == "none")  ?  "block" : "none";
    })
}
        /*--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;
      display: block;
      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;
    }
        <main>
      <nav id="seccion">
        <ol>
          <li>
            <h2>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>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>
          <li>
            <h2>Catálogo online</h2>
            <div class="introMenu" id='catalogo'>
              <a href="catalogo_online.php">
                <h3>Llega más lejos aún...</h3>
                <p>Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores? Entonces un catalogo online es lo que estas necesitando!</p>
                <h4>Ver más +</h4>
              </a>
            </div>
          </li>
          <li>
            <h2>Tienda virtual</h2>
            <div class="introMenu" id='tienda'>
              <a href="tienda_virtual.php">
                <h3>Vende a toda hora!</h3>
                <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores? Entonces un catalogo online es lo que estas necesitando!</p>
                <h4>Ver más +</h4>
              </a>
            </div>
          </li>
          <li>
            <h2>Blog</h2>
            <div class="introMenu" id='blog'>
              <a href="blogs.php">
                <h3>Tenes mucho para contar</h3>
                <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores</p>
                <h4>Ver más +</h4>
              </a>
            </div>
          </li>
          <li>
            <h2>Diseño gráfico</h2>
            <div class="introMenu" id='diseno'>
              <a href="diseno_grafico.php">
                <h3>Tu imagen dice mucho de tu negocio</h3>
                <p>bla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla blabla bla bla</p>
                <h4>Ver más +</h4>
              </a>
            </div>
          </li>
          <li>
            <h2>Nuestros precios</h2>
            <div class="introMenu" id='planes'>
              <a href="planes.php">
                <h3>La unión hace la fuerza...</h3>
                <p>(Falta redactar) Tenes muchos que ofrecerle a tus clientes pero no queres perder la atención personalizada que siempre te diferencio de tus competidores</p>
                <h4>Ver más +</h4>
              </a>
            </div>
          </li>
        </ol>
      </nav>
    </main>

    • 0