2

O que eu pretendo e o seguinte é que ao esconder a div de id="content1" a outra div aumente para col-lg-12 o que tenho é o seguinte código:

<div class="row">
         <div class="col-lg-6" id="content"> 
               <button id="hide"><i class="fa fa-minus"></i></button> 
               tabela 
         </div>
         <div class="col-lg-6" id="content1">
                <button id="hide1"><i class="fa fa-minus"></i></button>  
                 panel 
         </div> 
</div>
<script>
        $(document).ready(function(){
            $("#hide").click(function(){
                $("#content").hide();
            });
            $("#show").click(function(){
                $("#content").show();
            });
        });
        $(document).ready(function(){
            $("#hide1").click(function(){
                $("#content1").hide();
            });
            $("#show1").click(function(){
                $("#content1").show();
            });
        });
</script>
1
  • Já tentou remover a classe col-lg-6 e adicionar a col-lg-12 com as funções removeClass e addClass?
    – Woss
    Commented 31/10/2017 às 23:13

1 Resposta 1

1

Para fazer as trocas de classes que pretende pode utilizar a função removeClass para remover a classe antiga e a função addClass para adicionar a nova.

Algo como:

$("#hide").click(function() {
  $("#content").hide(); 
  $("#content1").removeClass("col-lg-6").addClass("col-lg-12");
});

$("#hide1").click(function() {
  $("#content1").hide();
  $("#content").removeClass("col-lg-6").addClass("col-lg-12");
});
.col-lg-6 {
  background-color: green;
}

.col-lg-12 {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-6" id="content">
    <button id="hide"><i class="fa fa-minus"></i></button> tabela
  </div>
  <div class="col-lg-6" id="content1">
    <button id="hide1"><i class="fa fa-minus"></i></button> panel
  </div>
</div>

Tirando proveito da hierarquia no html

De acordo com o html indicado (se for diferente poderá não ser a melhor opção) pode simplificar os clicks utilizando parent e siblings com:

$("#hide, #hide1").click(function(){
  $(this).parent().hide().siblings().removeClass("col-lg-6").addClass("col-lg-12");
});

O parent navega do botão hide até ao <div> que é o que quer esconder, dai o hide. Depois com siblings apanha o <div> ao lado e faz a troca de classes.

Repare também que agrupei as duas funções de click numa só uma vez que a navegação é feita através da hierarquia de elementos e por isso não depende especificamente de um id ou classe.

Exemplo a funcionar:

$("#hide, #hide1").click(function() {
  $(this).parent().hide().siblings().removeClass("col-lg-6").addClass("col-lg-12");
});
.col-lg-6 {
  background-color: green;
}

.col-lg-12 {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
  <div class="col-lg-6" id="content">
    <button id="hide"><i class="fa fa-minus"></i></button> tabela
  </div>
  <div class="col-lg-6" id="content1">
    <button id="hide1"><i class="fa fa-minus"></i></button> panel
  </div>
</div>

Documentação:

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .