0

Tengo clases desde la ic1 hasta el ic7 y cuando doy click para ocultar del ic3 al ic7 el boton que esta en la izquierda se apega hacia el ic1 y ic2 como hago para que se muestre en linea osea no se mueva de su lugar que se quedo estatico.

$(document).ready(function () { }); 
$(function() { 
  $( "#abrir" ).on( "click", function() { 
    $('.ic3').toggleClass('hidden'); 
    $('.ic4').toggleClass('hidden'); 
    $('.ic5').toggleClass('hidden'); 
    $('.ic6').toggleClass('hidden'); 
    $('.ic7').toggleClass('hidden'); 
  }); 
});
4
  • No se que quiere decir inserta el código para poder ayudarte
    – Janpweb
    Commented el 5 feb. 2019 a las 22:22
  • $(document).ready(function () { }); $(function() { $( "#abrir" ).on( "click", function() { $('.ic3').toggleClass('hidden'); $('.ic4').toggleClass('hidden'); $('.ic5').toggleClass('hidden'); $('.ic6').toggleClass('hidden'); $('.ic7').toggleClass('hidden'); }); }); Commented el 5 feb. 2019 a las 22:29
  • 1
    Para agregar código, lo puedes hacer desde la opción editar que aparece bajo la pregunta. No lo agregues como un comentario.
    – DjCrazy
    Commented el 5 feb. 2019 a las 23:13
  • ¿Podrías ponernos el HTML con el que estás trabajando? También estaría bien saber que propiedades CSS tienes encapsuladas en la clase hidden.
    – phpMyGuel
    Commented el 6 feb. 2019 a las 10:31

1 respuesta 1

0

Declara la clase .hidden como:

.hidden {visibility: hidden;}

Esto ocultará los elementos sin destruir el modelo caja.

<style>
  .hidden1 {
    display: none;
  }
  .hidden2 {
    visibility: hidden;
  }
</style>

<section>
  <h2>Botones sin clase hidden</h2>
  <button type="button">Botón 1</button>
  <button type="button">Botón 2</button>
  <button type="button">Botón 3</button>
  <button type="button">Botón 4</button>
  <button type="button">Botón 5</button>
  <button type="button">Botón 6</button>
  <button type="button">Botón 7</button>
</section>

<section>
  <h2>Botones con clase hidden1 (display: none)</h2>
  <button class="" type="button">Botón 1</button>
  <button class="hidden1" type="button">Botón 2</button>
  <button class="hidden1" type="button">Botón 3</button>
  <button class="hidden1" type="button">Botón 4</button>
  <button class="hidden1" type="button">Botón 5</button>
  <button class="hidden1" type="button">Botón 6</button>
  <button class="" type="button">Botón 7</button>
</section>

<section>
  <h2>Botones con clase hidden2 (visibility: hidden)</h2>
  <button class="" type="button">Botón 1</button>
  <button class="hidden2" type="button">Botón 2</button>
  <button class="hidden2" type="button">Botón 3</button>
  <button class="hidden2" type="button">Botón 4</button>
  <button class="hidden2" type="button">Botón 5</button>
  <button class="hidden2" type="button">Botón 6</button>
  <button class="" type="button">Botón 7</button>
</section>

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.