показать скрытое содержание

Question

Можно создать дубликат:
JS/jQuery (Hide div, show div on click)

Я новичок в веб-разработки, и было интересно, что лучший способ, чтобы скрыть элементы был. Я создаю приложение для заметок и хочу иметь простую форму «добавить примечание» html, которая расширяется при нажатии кнопки. Смогу ли я сделать это с помощью CSS или Javascript?

Например

Add Note 

после нажатия будет расширяться на основе HTML-форм что-то вроде этого

Note Title: <form> 

Note Body: <form> 

Спасибо!

Answer 1

Есть несколько способов сокрытия элемента. Вы можете либо установить свойство display на hidden, либо вы можете скрыть его с помощью java-скрипта. Ниже приведено решение с использованием jQuery.

Html

<a href="#" class="clickme" > Add Note</a> 
<div id="addNote"> 
    <!-- Your form goes here --> 
</div> 

Вы кладете форму Note в DIV, имеющего идентификатор addNote. А Javascript для этого

$(document).ready(function() { 
    $('#addNote').hide(); 
    $('.clickme').click(function() { 
     $('#addNote').show(); 
     $('.clickme').hide(); 
     return false; 
    }); 
}); 

При загрузке страницы, во-первых, addNote ДИВ скрыт этим $('#addNote').hide(); и когда кто-то нажимает на ссылку с классом clickme сНу, имеющий форму отображается, и кнопку clickme скрыт.

Вы можете добавить эффекты перехода к $('#addNote').show()

Answer 2

Я бы посоветовал вам использовать библиотеку jQuery, у которой есть много вариантов, чтобы легко показать/скрыть элементы на вашей странице. Вот базовый example, и вы можете найти гораздо больше с помощью крутых эффектов (fadeIn/fadeOut, slideUp/slideDown ...),

Answer 3

Вы должны использовать javascript для прикрепления обработчика события click. Когда выполняется обработчик события клика, вы можете переключиться с помощью свойства отображения javascript элемента из блока в none.

как

document.getElementById('elementID').onclick = function(){ 
var hiddenElement = document.getElementById('elementHidden'); 
if(hiddenElement.style.display=='none') 
hiddenElement.style.display = 'block'; 
else 
hiddenElement.style.display = 'none'; 
} 

 

Answer 4

Если вы используете JQuery здесь быстрое решение:

$(function(){ 
    $("#YOUR ADD NOTE ELEMENT ID").click(function(){ 
     $("#YOUR FORM ID").toggle(); 
    }) 
})