HTML page, hidden div show up

Question

I am implementing this effect with HTML, bootstrap2, and JS.

Sorry I don't have a working example yet, and did not find an example could demo anywhere, so I will just describe what I want to do in detail.
It is a plain HTML page visually contains two "cards" aligned vertically. The card could be just a div contains a textbox and a button . Initially only one card is visible and the other one is hidden, and I hope the page size fits only one card. After I click the button on card 1, the page hight should get greater to fit in two cards, and card two shows up.

My uncertain part would be: How do I hide a div initially and show it by clicking a button? (I want the page size fits any number of cards) I am not too familiar with web development, so a working example will be very helpful!

Thank you!

Answer 1

You could rely jQuery to show/hide elements. Set a div element to hidden and onclick event of a button should hide/show your elements.

Take a look at jQuery's api:

http://api.jquery.com/show/

http://api.jquery.com/hide/

http://api.jquery.com/toggle/

Simple example: http://jsfiddle.net/mrkre/KKLZ4/

$('#HideHidden').click(function() {   
    $(".hidden-div").hide();
});

$('#ShowHidden').click(function() {   
    $(".hidden-div").show();
});

You would then need to manipulate the css for height elements.

Answer 2

Here is a nice example I have just cooked up.

You should already have your HTML & CSS set up, but here is what I used.

HTML

<!-- Card 1 -->
<div>
    <textarea></textarea>
    <button id="clickMe">Show second card</button>
</div>

<!-- Card 2 -->
<div style="display: none;" id="newCard">
    <textarea></textarea>
    <button>Do nothing</button>
</div>

CSS:

div{ /* A bit of random styling */
    box-sizing: border-box;
    width: 70%;
    margin: 30px 15%;
    background: skyblue;
    border: 2px solid #EEE;
    text-align:center;
    padding: 50px;
}

Vanilla Javascript

var button = document.getElementById('clickMe');  // 1
var newCard = document.getElementById('newCard'); // 2
button.addEventListener('click', function() {     // 3
   newCard.style.display = 'block';               // 4
});

INFO

1. Get the element that has a ID of clickMe
2. Get the element that has a ID of newCard
3. Listen for when the clickMe element is clicked
4. When clickMe is clicked set the display of newCard to block

Working Demo: http://jsfiddle.net/T4yxz/

Answer 3

On Page load you start out with the div hidden, by setting the css styling for that element as display:none. When you want to show that element, add a .show() event to the button click function.