CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Allan Jiang
Allan Jiang

Reputation: 11331

HTML page, hidden div show up

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!

Upvotes: 0

Views: 4114

Answers (3)

iConnor
iConnor

Reputation: 20189

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/

Upvotes: 1

TechnoBlahble
TechnoBlahble

Reputation: 633

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.

Upvotes: 0

mrkre
mrkre

Reputation: 1548

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.

Upvotes: 1

Related Questions