Как сделать контейнер div показывать какой-то контент при нажатии, чтобы показать весь контент?

Мне было интересно, как я могу сделать это так, чтобы контейнер div отображал части его содержимого в небольшом текстовом поле, и в нижней части текстового поля будет стрелка, указывающая вниз, и при нажатии будет сделана текстовое поле больше и показать весь его контент? Можно ли это сделать с помощью html/css, без необходимости использовать javascript и jQuery или это вещь jQuery?Как сделать контейнер div показывать какой-то контент при нажатии, чтобы показать весь контент?

<div class="society3" style="overflow:auto"> 
    <p>Description:<p> 
    <p><?php echo $description; ?></p> 
    </div>

Переменная описание содержит только абзац текста, так что я хотел бы, Div контейнер, чтобы показать часть текста, и когда кто-то хочет, чтобы прочитать полное описание, они могут нажать на кнопку, и окно будет чтобы показать весь контент тега div.

источник

2015-03-14 FangXIII

Вы смотрели в детали HTML5 и сводные теги? http://blog.teamtreehouse.com/use-details-summary-elements –

что я имею в виду, когда я сказал, что какой-то контент показывает большую часть текста, а затем кнопку внизу, чтобы показать весь контент. – FangXIII

Плохая новость заключается в том, что вам нужно будет использовать jQuery или подобное для чего-то подобного, но хорошей новостью является то, что он относительно прямолинейный. После того, как вы загрузили его на свою страницу, все, что вам нужно сделать, это указать id, который вы хотели бы показать/скрыть (или как он называется в jQuery toggle) и сделать событие onClick().

Например, что-то вроде этого должно работать.

<script> 
$(document).ready(function(){ 
    $("button").click(function(){ 
     $("#toggle").toggle(); 
    }); 
}); 
</script> 

<div id="button" class="society3" style="overflow:auto"> 
    <p>Description:<p> 
    <p id="toggle" style="display: none">[content]</p> 
</div>

источник

2015-03-14 19:17:25 cchapman

спасибо, однако, я еще не использовал jQuery, но у меня есть один раз, но он не работает успешно. Что еще мне нужно в моем коде, чтобы это работало – FangXIII

Самый похожий из ваших целей - использование html5, но это работает в google chrome, иногда в firefox.

<html> 
 
\t <head><meta charset="UTF-8"></head> 
 
\t <style type="text/css"> 
 
\t .expand{ 
 
\t \t padding:10px; 
 
\t } 
 
\t </style> 
 
\t <div class="expand"> 
 
\t <details> 
 
\t  <summary>OPEN</summary> 
 
\t  <p>Some text</p> 
 
\t </details> 
 
\t </div> 
 
</html>

источник

2015-03-14 19:38:39

Как сделать контейнер div показывать какой-то контент при нажатии, чтобы показать весь контент?

ответ

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