1

Quiero mostrar algunos elementos al hacer click en un botón, pero quiero que si ya esta mostrando un elemento y doy click en otro botón oculte el elemento previo y muestre el nuevo.

Hice algo como esto:

 $( "#b-compra-venta" ).click(function() {
  $( "#box-compra-venta" ).toggle("show");

  $( "#box-desarrollo" ).hide(400);
  $( "#box-tecnologias" ).hide(400);
});

$( "#b-desarrollo" ).click(function() {
  $( "#box-desarrollo" ).toggle("show");

  $( "#box-compra-venta" ).hide(400);
  $( "#box-tecnologias" ).hide(400);
});

$( "#b-tecnologias" ).click(function() {
  $( "#box-tecnologias" ).toggle("show");

  $( "#box-compra-venta" ).hide(400);
  $( "#box-desarrollo" ).hide(400);
});

Funciona pero quiero tener recomendaciones.

Mi html es algo como esto:

<div class="container">
    <div class="row">
        <div class="col-md-4">
            <button id="b-compra-venta" class="btn btn-default">Compra y Venta</button>
        </div>
        <div class="col-md-4">
            <button id="b-desarrollo" class="btn btn-default">Desarrollo</button>
        </div>
        <div class="col-md-4">
            <button id="b-tecnologias" class="btn btn-default">Tecnologias</button>
        </div>
    </div>  
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div id="box-compra-venta">Contenido compra venta</div>
        </div>
        <div class="col-md-4">
            <div id="box-desarrollo">Contenido desarrollo</div>
        </div>
        <div class="col-md-4">
            <<div id="box-tecnologias">Contenido Tecnologia</div>
        </div>
    </div>  
</div>
3
  • Deberias agregar tu HTML.
    – alanfcm
    el 14 ago. 2018 a las 16:02
  • ¿Quieres mejoras u otra forma de hacerlo? el 14 ago. 2018 a las 18:06
  • @denifersantiagofernandez la idea es aprender a como hacerlo de forma correcta, por que mi ejemplo funciona pero yo mismo sabia que no era lo mas conveniente.
    – Critter236
    el 14 ago. 2018 a las 18:54

1 respuesta 1

0

Si lo que buscas es simplificar tu codigo, puedes hacer algo como esto. Si los selectores son muy genericos, puedes agregar clases mas especificas.

$( "button" ).click(function() {
  var id = $(this).attr('id');
  var div = $( "#box-" + id );
  $('.toggle').not(div, '.row').hide(400);
  div.toggle("show");  
});
.toggle {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-md-4">
            <button id="compra-venta" class="btn btn-default">Compra y Venta</button>
        </div>
        <div class="col-md-4">
            <button id="desarrollo" class="btn btn-default">Desarrollo</button>
        </div>
        <div class="col-md-4">
            <button id="tecnologias" class="btn btn-default">Tecnologias</button>
        </div>
    </div>  
</div>

<div class="container-fluid">
    <div class="row">
        <div class="col-md-4">
            <div id="box-compra-venta" class="toggle">Contenido compra venta</div>
        </div>
        <div class="col-md-4">
            <div id="box-desarrollo" class="toggle">Contenido desarrollo</div>
        </div>
        <div class="col-md-4">
            <div id="box-tecnologias" class="toggle">Contenido Tecnologia</div>
        </div>
    </div>  
</div>

4
  • Todos los "box" comienzan escondidos con un "display:none;" desde css.
    – Critter236
    el 14 ago. 2018 a las 16:40
  • Ya edite mi respuesta.
    – alanfcm
    el 14 ago. 2018 a las 16:49
  • Orale, ya quedo perfecto en lo que estoy haciendo, muchas gra...
    – Critter236
    el 14 ago. 2018 a las 17:31
  • De nada @Critter236 y bienvenido a StackOverflow en Español.
    – alanfcm
    el 14 ago. 2018 a las 17:50

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.