CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AngularDoubts
AngularDoubts

Reputation: 499

Auto adjust width of divs on show/hide of one div in bootstrap html

I am trying make a responsive page with three div(each div is a column), where one column is sometimes hidden.What I aim to implement is:

1.When three divs are shown, width should be 100%.

  1. When one div is hidden, the others needs to adjust the width and fit the external div(that is, 2 divs total width 100%) automatically.

I tried do it like this, but the width is fixed as I have given col-lg so. It is not auto adjusting:

<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="row col-lg-12">
    <div class="col-lg-4">
      <h3>Column 1</h3>
    </div>
    <div class="col-lg-4">
      <h3>Column 2</h3>
    </div>
    <div class="col-lg-4" hidden>
      <h3>Column 3</h3>        
    </div>
  </div>
</div>

</body>
</html>

Then I tried to give style as follows:

#whole
{
  width:100%;
}

.myfix 
{
    display:table;
    width: 100%;    
}

.myfix > .myfix1 
{
    display:table-cell;  
    border: 1px solid black;
}
<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <div class="row col-lg-12  myfix" id="whole">
    <div class="myfix1">      <h3>Column 1</h3>        </div>
    <div class="myfix1">      <h3>Column 2</h3>    </div>
    <div class="myfix1" hidden>      <h3>Column 3</h3>      </div>
</div>

</body>
</html>

But hidden is not working... Is there any mistake in my code? Please help... Solutions using jquery are also welcome.. Thanks in advance...

Upvotes: 2

Views: 5531

Answers (5)

RRR
RRR

Reputation: 1084

here is a jQuery solution... kindly check http://www.bootply.com/Swb3i8Henf

HTML

<button class="btnShowHide">Show</button> 
<div class="row col-lg-12">
    <div class="col-lg-6">
      <h3>Column 1</h3>
    </div>
    <div class="col-lg-6">
      <h3>Column 2</h3>
    </div>
    <div class="col-lg-6 hidden">
      <h3>Column 3</h3>        
    </div>
  </div>

CSS

.hidden{
  display:none;
  }

 .row div{
  border:1px red solid;
    }

jQuery

$(document).ready(function(){
  $('.btnShowHide').on('click', function(){
    $('.row div').toggleClass('col-lg-4').toggleClass('col-lg-6');
    $('.row div:last-child').toggleClass('hidden');
  });
});

Upvotes: 1

Jai
Jai

Reputation: 74738

The hidden html5 attribute is not recommended to use it like this. That attribute represents an element which is not relevant for the current process or the element is not yet in here.

Better to read it here at MDN:

hidden

The hidden global attribute is a Boolean attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. Browsers won't render elements with the hidden attribute set.

The hidden attribute must not be used to hide content that could legitimately be shown in another presentation. For example, it is incorrect to use hidden to hide panels in a tabbed dialog, because the tabbed interface is merely a kind of overflow presentation — one could equally well just show all the form controls in one big page with a scrollbar. It is similarly incorrect to use this attribute to hide content just from one presentation — if something is marked hidden, it is hidden from all presentations, including, for instance, screen readers.

Hidden elements shouldn't be linked from non-hidden elements and elements that are descendants of a hidden element are still active, which means that script elements can still execute and form elements can still submit.

Although the solution is the display property. 

<div class="myfix1" style="display:none;"><!-- see here -->      
   <h3>Column 3</h3>      
</div>

Another solution is to create a css attribute class such as: 

.myfix1[hidden] {
  display: none;
}


#whole {
  width: 100%;
}
.myfix {
  display: table;
  width: 100%;
}
.myfix > .myfix1 {
  display: table-cell;
  border: 1px solid black;
}

.myfix1[hidden] {
  display: none;
}
/*  <<<<<<<<<<<<< this is here **/
<!DOCTYPE html>

<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>


  <div class="container">
    <div class="row col-lg-12  myfix" id="whole">
      <div class="myfix1">
        <h3>Column 1</h3> 
      </div>
      <div class="myfix1">
        <h3>Column 2</h3> 
      </div>
      <div class="myfix1" hidden>
        <h3>Column 3</h3> 
      </div>
    </div>

</body>

</html>

Upvotes: 0

Rajshekar Reddy
Rajshekar Reddy

Reputation: 18987

You just had to use style="display:none;" instead of hidden

Below is the working demo.

#whole
{
  width:100%;
}

.myfix 
{
    display:table;
    width: 100%;    
}

.myfix > .myfix1 
{
    display:table-cell;  
    border: 1px solid black;
}
<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>


<div class="container">
  <div class="row col-lg-12  myfix" id="whole">
    <div class="myfix1">      <h3>Column 1</h3>        </div>
    <div class="myfix1">      <h3>Column 2</h3>    </div>
    <div class="myfix1" style="display:none;">      <h3>Column 3</h3>      </div>
</div>

</body>
</html>

Upvotes: 4

Mohammad Usman
Mohammad Usman

Reputation: 39322

Use Bootstrap's hidden class to hide any element. Further you can use different media specific utilities like hidden-xs, hidden-sm as per your need.

#whole {
  width:100%;
}

.myfix {
    table-layout: fixed;
    display:table;
    width: 100%;    
}

.myfix > .myfix1 {
    display:table-cell;  
    border: 1px solid black;
}
<!DOCTYPE html>
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <div class="row col-lg-12  myfix" id="whole">
    <div class="myfix1">
        <h3>Column 1</h3>
    </div>
    <div class="myfix1">
        <h3>Column 2</h3>
    </div>
    <div class="myfix1 hidden">
        <h3>Column 3</h3>
    </div>
</div>

</body>
</html>

For Complete Responsive Utilities

Upvotes: 0

Ganbin
Ganbin

Reputation: 2064

With bootstrap you can tell to hide a div when the window is in a special size.

You have 4 size : extra small (xs), small (sm), medium (md) and large (lg)

My example show how to hide one div when the page is medium or xs, that mean the column 2 will be show only when the page is large.

So you can write :

.border{
  border : 1px solid green;
 }
<!DOCTYPE html>
<html lang="en">
<head>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="row col-lg-12">
    <div class="col-lg-4 col-xs-6 border">
      <h3>Column 1</h3>
    </div>
    <div class="col-lg-4 hidden-md hidden-sm hidden-xs border">
      <h3>Column 2</h3>
    </div>
    <div class="col-lg-4 col-xs-6 border">
      <h3>Column 3</h3>        
    </div>
  </div>
</div>

</body>
</html>

Upvotes: 1

Related Questions