Show/Hide Header

Question

I have a header with the following structure:

 <header>
    <div class="container-fluid login-div">
        <div class="col-lg-1"></div>
        <div class="col-lg-10"></div>
        <div class="col-lg-1"></div>
    </div>
    <div class="container-fluid register-div">
        <div class="col-lg-1"></div>
        <div class="col-lg-10"></div>
        <div class="col-lg-1"></div>
    </div>
    <div class="container-fluid nav-header middle">
        <div class="col-lg-3"></div>
        <div class="col-lg-1 line-right"></div>
        <div class="col-lg-1"></div>
        <div class="col-lg-2 logo"><img src="images/logo.jpg" alt=" LOGO" id="img_logo"> </div>
        <div class="col-lg-1 line-right"></div>
        <div class="col-lg-1"></div>
        <div class="col-lg-3"></div>
    </div>
</header>

When the page loads, login-div and register-div are hidden. When a user clicks on a certain button, these div's show (well, depending on which button is clicked). The issue I'm having is that I can't get the div to show all content.

I've created a fiddle here, so you can check it out.

Now just before everyone tells me to set a height, I can't because I don't know what the height will be. Depending on what the user selects, the height of the content will change.

Actually what you want? you like to show `register-div` on login click? — ketan, Mar 30 '15 at 05:34
Did you need something like that: http://jsfiddle.net/7wuzzm09/2/ ? — Petroff, Mar 30 '15 at 05:35

Kinburn101 · Accepted Answer · 2015-03-30T05:45:32.457

3

https://jsfiddle.net/schwiegler/7wuzzm09/1/ this is an updated version of your fiddle.

I added the following to your registration class height:100%; let me know if it is working to your liking and up-vote and select as answer if I helped.

edited Mar 30 '15 at 05:45

answered Mar 30 '15 at 05:37

Kinburn101

1,112
2
9
18

This is better than my answer. Kudos. – Bikas Mar 30 '15 at 05:40

score 0 · Answer 2 · answered Mar 30 '15 at 05:37

0

You can programmatically update the .register-div height. See the updated fiddle http://jsfiddle.net/7wuzzm09/7/.

Note, I haven't accounted the padding, you can do it yourself.

answered Mar 30 '15 at 05:37

Bikas

2,709
14
32

score 0 · Answer 3 · answered Mar 30 '15 at 05:38

In your CSS:

Instead of specifying height:0px and overflow:hidden specify display: none; for login and register div.

In their respective .active classes make it display: block;

.login-div,
.register-div {
    z-index:1;
    transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    background:#dbdfe2;
    color:#515151;
    padding: 0;
    display: none;
}

.login-div.active {
    padding:37px;
    display: block;
}

.register-div.active {
    padding:15px;
    display: block;
}

DEMO

Show/Hide Header

3 Answers3