Hide content and change size of other

Question

What I intend and the following is that when hiding the id="content1" div the other div increase to col-lg-12 what I have is the following code:

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

Answer 1

To exchange classes you want you can use the function removeClass to remove the old class and function addClass to add the new.

Something like:

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

Taking advantage of the hierarchy in html

According to the specified html (if different may not be the best option) you can simplify clicks using parent and siblings with:

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

The parent navigate from the button hide up to the <div> which is what you want to hide, hence the hide. Then with siblings catches the <div> alongside and makes the class exchange.

Note also that I have grouped the two functions of click once the navigation is done through the element hierarchy and therefore does not depend specifically on an id or class.

Working example:

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

Documentation:

• parent
• siblings
• addClass
• removeClass