Hide content and change size of other

Question

Hide content and change size of other

Navigation

#1 by (1 votes)

2

What I intend and the following is that when hiding the div from id="content1" the other div increases 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>

javascript html jquery grid

asked by anonymous 31.10.2017 / 23:59

1 answer

How to print the selected database ID? [closed] add lambda expression column

score 1 · Accepted Answer

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

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><divclass="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 indicated html (if different it may not be the best option) you can simplify the clicks using parent and siblings with:

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

The parent navigates from the hide button to the <div> which is what you want to hide, hence the hide . Then with siblings it gets the <div> on the side and it does the class exchange.

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

Example to work:

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