So I looked at other questions and I found an answer that was chosen on this link: Toggle (show/hide) element with javascript This below was the following function that works in the answer to change the display.
I tried that in my code, but it’s not working. I’ve attached a link to the JSFiddle at the end or this post. I have a parent div with the id of #activities. It contains multiple children, but the important ones are the li,p, and div which has an id as #suggestion_input. Below is the HTML. HTML
When the user clicks the last li in the ul called «Your Suggestions», then the p will have display set to none and the #suggestion_input will have display of inline-block. Currently, their css is set to inline-block and none respectively. CSS
#activities p < display:inline-block; width:500px; vertical-align:top; margin-top:20px; margin-left:20px; background:#FFFDA1; >#suggestion_input
And then this is my javascript which I think reflects the answer in the link except that it isn’t a function. Javascript — This code is part of an addEventListener. Event is a «click».
if(e.target.innerText === 'Your Suggestions') < var para = document.getElementById('activities').querySelector('p'); var display = para.style.display; /* if you uncomment this, then the following code will work outside of the if display == 'inline-block' condition para.style.display = 'none'; suggestion_input.style.display = 'inline-block'; */ if(display == 'inline-block')< // This code will not work para.style.display = 'none'; suggestion_input.style.display = 'inline-block'; console.log('works'); >>else < if(display == 'none')< display = "inline-block"; >> >
The display property sets or returns the element’s display type.
Elements in HTML are mostly «inline» or «block» elements: An inline element has floating content on its left and right side. A block element fills the entire line, and nothing can be displayed on its left or right side.
The display property also allows the author to show or hide an element. It is similar to the visibility property. However, if you set display:none , it hides the entire element, while visibility:hidden means that the contents of the element will be invisible, but the element stays in its original position and size.
Tip: If an element is a block element, its display type can also be changed with the float property.
Browser Support
Syntax
Return the display property:
Property Values
Value
Description
block
Element is rendered as a block-level element
compact
Element is rendered as a block-level or inline element. Depends on context
flex
Element is rendered as a block-level flex box. New in CSS3
inline
Element is rendered as an inline element. This is default
inline-block
Element is rendered as a block box inside an inline box
inline-flex
Element is rendered as a inline-level flex box. New in CSS3
inline-table
Element is rendered as an inline table (like
), with no line break before or after the table
list-item
Element is rendered as a list
marker
This value sets content before or after a box to be a marker (used with :before and :after pseudo-elements. Otherwise this value is identical to «inline»)
none
Element will not be displayed
run-in
Element is rendered as block-level or inline element. Depends on context
table
Element is rendered as a block table (like
), with a line break before and after the table
table-caption
Element is rendered as a table caption (like )
table-cell
Element is rendered as a table cell (like
and
)
table-column
Element is rendered as a column of cells (like )
table-column-group
Element is rendered as a group of one or more columns (like )
table-footer-group
Element is rendered as a table footer row (like )
table-header-group
Element is rendered as a table header row (like )
table-row
Element is rendered as a table row (like
)
table-row-group
Element is rendered as a group of one or more rows (like )
initial
Sets this property to its default value. Read about initial
inherit
Inherits this property from its parent element. Read about inherit
Technical Details
Default Value:
inline
Return Value:
A String, representing the display type of an element
CSS Version
CSS1
More Examples
Example
Difference between the display property and the visibility property:
function demoDisplay() < document.getElementById(«myP1»).style.display = «none»; >
function demoVisibility() document.getElementById(«myP2»).style.visibility = «hidden»; >
Example
Toggle between hiding and showing an element:
function myFunction() < var x = document.getElementById(‘myDIV’); if (x.style.display === ‘none’) < x.style.display = ‘block’; > else < x.style.display = ‘none’; > >
Example
Difference between «inline», «block» and «none»:
function myFunction(x) < var whichSelected = x.selectedIndex; var sel = x.options[whichSelected].text; var elem = document.getElementById(«mySpan»); elem.style.display = sel; >
Свойство display имеет много разных значений. Обычно, используются только три из них: none , inline и block , потому что когда-то браузеры другие не поддерживали.
Но после ухода IE7-, стало возможным использовать и другие значения тоже. Рассмотрим здесь весь список.
Значение none
Самое простое значение. Элемент не показывается, вообще. Как будто его и нет.
Невидимый div (
Я - невидим!
) Стоит внутри скобок
Значение block
Блочные элементы располагаются один над другим, вертикально (если нет особых свойств позиционирования, например float ).
Блок стремится расшириться на всю доступную ширину. Можно указать ширину и высоту явно.
Это значение display многие элементы имеют по умолчанию: , заголовок , параграф
.
Блоки прилегают друг к другу вплотную, если у них нет margin .
Значение inline
Элементы располагаются на той же строке, последовательно.
Ширина и высота элемента определяются по содержимому. Поменять их нельзя.
Например, инлайновые элементы по умолчанию: , .
Если вы присмотритесь внимательно к примеру выше, то увидите, что между внутренними и есть пробел. Это потому, что он есть в HTML.
Если расположить элементы вплотную – его не будет:
Содержимое инлайн-элемента может переноситься на другую строку.
При этом каждая строка в смысле отображения является отдельным прямоугольником («line box»). Так что инлайн-элемент состоит из объединения прямоугольников, но в целом, в отличие от блока, прямоугольником не является.
Это проявляется, например, при назначении фона.
Например, три прямоугольника подряд:
. Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля Ля .
Если инлайн-элемент граничит с блоком, то между ними обязательно будет перенос строки:
Значение inline-block
Это значение – означает элемент, который продолжает находиться в строке ( inline ), но при этом может иметь важные свойства блока.
Во всём остальном – это блок, то есть:
Это значение display используют, чтобы отобразить в одну строку блочные элементы, в том числе разных размеров.
Свойство vertical-align позволяет выровнять такие элементы внутри внешнего блока:
Как и в случае с инлайн-элементами, пробелы между блоками появляются из-за пробелов в HTML. Если элементы списка идут вплотную, например, генерируются в JavaScript – их не будет.
Значения table-*
Современные браузеры (IE8+) позволяют описывать таблицу любыми элементами, если поставить им соответствующие значения display .
Для таблицы целиком table , для строки – table-row , для ячейки – table-cell и т.д.
Важно то, что это действительно полноценная таблица. Используются табличные алгоритмы вычисления ширины и высоты элемента, описанные в стандарте.
Это хорошо для семантической вёрстки и позволяет избавиться от лишних тегов.
Очень подробно об алгоритмах вычисления размеров и отображении таблиц рассказывает стандарт CSS 2.1 – Tables.
Вертикальное центрирование с table-cell
Внутри ячеек свойство vertical-align выравнивает содержимое по вертикали.
Это можно использовать для центрирования:
div
Элемент С неизвестной Высотой
CSS не требует, чтобы вокруг table-cell была структура таблицы: table-row и т.п. Может быть просто такой одинокий DIV , это допустимо.
При этом он ведёт себя как ячейка TD , то есть подстраивается под размер содержимого и умеет вертикально центрировать его при помощи vertical-align .
Значения list-item, run-in и flex
У свойства display есть и другие значения. Они используются реже, поэтому посмотрим на них кратко:
Этот display по умолчанию используется для элементов списка. Он добавляет к блоку с содержимым ещё и блок с номером(значком) списка, который стилизуется стандартными списочными свойствами:
Если после run-in идёт block , то run-in становится его первым инлайн-элементом, то есть отображается в начале block .
Если ваш браузер поддерживает это значение, то в примере ниже h3 , благодаря display:run-in , окажется визуально внутри div :
Про пчёл.
Пчёлы - отличные создания, они делают мёд.
Если же вы видите две строки, то ваш браузер НЕ поддерживает run-in .
Вот, для примера, правильный вариант отображения run-in , оформленный другим кодом:
Про пчёл.
Пчёлы - отличные создания, они делают мёд.
Если этот вариант отличается от того, что вы видите выше – ваш браузер не поддерживает run-in . На момент написания этой статьи только IE поддерживал display:run-in .
Flexbox позволяет удобно управлять дочерними и родительскими элементами на странице, располагая их в необходимом порядке. Официальная спецификация находится здесь: CSS Flexible Box Layout Module
Change display style property of a div using Javascript
I’m trying to display a div onclick of a btn by changing the style property of the div. But I can’t read the display property of that div. I read somewhere that the code doesn’t work because the script tries to get the value before the div has loaded so the script should be triggered after window.onload. How do I make the script work after window has loaded but only when the button has been clicked ?
#hidden-div + clicking here should display the checkboxes
Check 1 Check 2 Check 3
2 Answers 2
Something to note: == is for comparison, = is for assignment. Also, there are no closing input tags. Here’s the finished snippet:
+ clicking here should display the checkboxes
Check 1 Check 2 Check 3
I also changed some logic. If the display is none, and the button is clicked, toggle the visibility. If display is not none, then make it none.
The thing is element.style. is only accessible if the style is set inline.
@MikeRobinson — I agree, it’s good to answer JS questions without jQuery (when the OP doesn’t mention jQuery), but it really would make this so much easier!
you write connects onclick ,How you connect without showing in your html ! You had set display none all in your css is can’t handle onclick [without display]
3 Answers 3
To use javascript to change the style, you can do it like this:
// hide an element document.getElementById("hide_0").style.display = "none"; // show a block element document.getElementById("hide_1").style.display = "block"; // to go back to the default or CSS specified value document.getElementById("hide_2").style.display = "";
So, if you wanted to hide all and show one, you could do that with this function:
function showOneHideOthers(base, len, numToShow) < // objects must have ids like base_0, base_1, etc. for (var i = 0; i < len; i++) < if (i != numToShow) < document.getElementById(base+i).style.display = "none"; >> document.getElementById(base+numToShow).style.display = "block"; > showOneHideOther("hide_", 6, 2);
P.S. normal is not a valid value for the display property. The typical values are block , none and inline and there are others like inline-block , table , etc.