Show div while hiding others (jquery)

Question

Show div while hiding others (jquery)

Navigation

#1 by (0 votes)

1

I want to show some elements by doing click in a botón , but I want that if you are already showing one element and I give click in another botón hide the previous element and show the new one.

I did something like this:

 $( "#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);
});

It works but I want to have recommendations.

My html is something like this:

<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>

javascript jquery html5 div

asked by Critter236 14.08.2018 в 18:00

source

1 answer

pyodb package connects to SQLSERVER 2008 and does not get data Error saving data in MySQL

score 0 · Accepted Answer

If you're looking to simplify your code, you can do something like this. If the selectors are very generic, you can add more specific classes.

$( "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>