HTML-страница, скрытый div показать

Я реализую этот эффект с помощью HTML, bootstrap2 и JS.

Извините, у меня пока нет рабочего примера, и нигде не было примера, где можно было бы демонстрацию, поэтому я просто опишу, что я хочу сделать подробно.
Это простая HTML-страница визуально содержит две «карты», выровненные по вертикали. Карта может быть только div содержит textbox и button. Первоначально только одна карта видна, а другая скрыта, и я надеюсь, что размер страницы подходит только для одной карты. После того, как я нажимаю кнопку на карточке 1, высота страницы должна быть больше, чтобы поместиться в две карты, а вторая карта появляется.HTML-страница, скрытый div показать

Моя неопределенная часть: Как скрыть div сначала и показать его, нажав кнопку? (Я хочу, чтобы размер страницы соответствовал количеству карточек). Я не очень хорошо знаком с веб-разработкой, поэтому рабочий пример будет очень полезен!

Спасибо!

источник

2013-08-20 Allan Jiang

Это все сводится к манипуляции CSS 'hidden' атрибутов. Вы можете добавить обработчик события для события click на двух div и включить и выключить этот атрибут. Взгляните на jQuery.show() и jQuery.hide() –

Вот хороший пример, который я только что приготовил.

У вас уже должен быть HTML & CSS настроен, но вот что я использовал.

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

Получить элемент, который имеет ID из clickMe

Получить элемент, который имеет ID из newCard

Слушайте, когда clickMe элемент clicked

Когда clickMe является clicked установите отображение newCard на block

Рабочая Демо: http://jsfiddle.net/T4yxz/

источник

2013-08-20 22:39:43 iConnor

Вы можете использовать jQuery для отображения/скрытия элементов. Установите элемент div в скрытое, а событие onclick кнопки должно скрывать/показывать ваши элементы.

Посмотрите на API JQuery в:

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

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

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

Простой пример: http://jsfiddle.net/mrkre/KKLZ4/

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

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

Затем вам нужно будет управлять css для элементов высоты.

источник

2013-08-20 06:02:50 mrkre

На странице загрузки вы начинаете с скрытого div, устанавливая стиль css для этого элемента как отображение: none. Когда вы хотите показать этот элемент, добавьте событие .show() в функцию нажатия кнопки.

источник

2013-08-20 22:24:13 TechnoBlahble

HTML-страница, скрытый div показать

ответ

Смежные вопросы