Как изменить display block через javascript

This post will discuss how to change an element’s display to none or block using JavaScript and jQuery.

1. Using JavaScript

In pure JavaScript, you can control the rendering of the container elements using the display attribute. Setting the display to none will not render the element or any of its children, and setting it to block, the browser will render the element.

JS

document.getElementById(«hide»).onclick = function() {

document.getElementById(«register»).style.display = «none»;

}

document.getElementById(«show»).onclick = function() {

document.getElementById(«register»).style.display = «block»;

}

CSS

form {

padding: 20px;

margin: 10px;

border: 1px solid lightgray;

}

#toggle {

padding: 20px;

margin: 10px;

}

HTML

<html>

<head>

href=«https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css» />

</head>

<body>

<label for=«email»>Email address</label>

</div>

<label for=«password»>Password</label>

</div>

<button type=«submit» class=«btn btn-primary»>Submit</button>

</form>

</div>

</body>

</html>

Edit in JSFiddle

2. Using jQuery

In jQuery, you can use the .hide() and .show() methods to hide or show an element. This is demonstrated below:

$(document).ready(function() {

$(«#hide»).click(function() {

$(«#register»).hide();

});

$(«#show»).click(function() {

$(«#register»).show();

});

Edit in JSFiddle

Alternatively, you can use the .css() method to modify the display attribute, which controls the rendering of container elements.

$(document).ready(function() {

$(«#hide»).click(function() {

$(«#register»).css(«display», «none»);

});

$(«#show»).click(function() {

$(«#register»).css(«display», «block»);

});

Edit in JSFiddle

That’s all about changing the element’s display to none or block using JavaScript and jQuery.

Thanks for reading.

Please use our online compiler to post code in comments using C, C++, Java, Python, JavaScript, C#, PHP, and many more popular programming languages.

Like us? Refer us to your friends and help us grow. Happy coding

Источник

I’m trying to change the display CSS property of a <div> tag when the user changes the value of a <select>.

Here is my HTML code :

<select type="text" name="category" onblur="display_hidden_fields();">
    <option><!-- Content --></option>
    <option><!-- Content --></option>
</select>

<div id="hidden" style="display:none;">
    <label for="test">Label</font></label>
    <select type="text" name="test">
        <option value="1">Default</option>
        <option value="2">Value1</option>
        <option value="3">Value2</option>
    </select>
</div>

(note that’s a simplified version of my code. Actually, every <label> and <select> are in <td>. I think it doesn’t matter)

Now, my JS code :

function display_hidden_fields()
{
    alert("JS Function");
    document.getElementById("hidden").style.display = "block";
}

Well. When I select a new <option> in the first <select> named «category», I get the alert «JS Function». So my display_hidden_fields() function is correctly executed.
But the second line of this function does… nothing ! My <div> named «hidden» is not displayed

It seems to me there is nothing wrong in my code. Moreover, I tried many variants.
— Like specifying style="display:block" in the <div> properties, and changing it to «none» in the JS.
— Or trying to use other properties like «inline», «inline-block», …
— Or using «visibility» instead of «display»
— Or not specifying any property at all in the HTML.

Does anyone can help me ?

[EDIT] Important observation

I think I found something interesting. It seems that a <div> with display:none; mixed with <tr> and <td> is completely nonfunctional. Here is my real code :

<tr>
    <div id="hidden" style="display:none;">
        <td class="depot_table_left">
            <label for="sexe">Sexe</label>
        </td>
        <td>
            <select type="text" name="sexe">
                <option value="1">Sexe</option>
                <option value="2">Joueur</option>
                <option value="3">Joueuse</option>
            </select>
        </td>
    </div>
</tr>

The content of the <div> is still displayed. And I can try to change it in any way in JS, it doesn’t work.
I also tried to remove the <table>, <tr> and <td> tags, and it works fine. But I need this table…

Источник

I’m trying to change the display CSS property of a <div> tag when the user changes the value of a <select>.

Here is my HTML code :

<select type="text" name="category" onblur="display_hidden_fields();">
    <option><!-- Content --></option>
    <option><!-- Content --></option>
</select>

<div id="hidden" style="display:none;">
    <label for="test">Label</font></label>
    <select type="text" name="test">
        <option value="1">Default</option>
        <option value="2">Value1</option>
        <option value="3">Value2</option>
    </select>
</div>

(note that’s a simplified version of my code. Actually, every <label> and <select> are in <td>. I think it doesn’t matter)

Now, my JS code :

function display_hidden_fields()
{
    alert("JS Function");
    document.getElementById("hidden").style.display = "block";
}

Does anyone can help me ?

[EDIT] Important observation

I think I found something interesting. It seems that a <div> with display:none; mixed with <tr> and <td> is completely nonfunctional. Here is my real code :

<tr>
    <div id="hidden" style="display:none;">
        <td class="depot_table_left">
            <label for="sexe">Sexe</label>
        </td>
        <td>
            <select type="text" name="sexe">
                <option value="1">Sexe</option>
                <option value="2">Joueur</option>
                <option value="3">Joueuse</option>
            </select>
        </td>
    </div>
</tr>

Источник

Вы здесь: Главная » JavaScript » Видимость элемента в JavaScript и CSS. Свойство display: none и block

Довольно часто возникает необходимость узнать, является ли какой-либо объект видимым на странице. Как правило, решение упирается в получение информации о css-свойстве объекта display. Обычно мы проверяем на соответствие этого свойства значению block или none, однако, сейчас появились другие значения этого свойства, например, inline-block, flex, grid.

Проверка на стилевое свойство display: none

Если у вас для элемента явно назначено стилевое свойство display: none, то вы можете легко изменять это свойство на display: block или flex, или grid по необходимости. Что значит «явно назначено стилевое свойство»? Это подразумевает наличие атрибута style="display: none" непосредственно в том теге, который вы хотите впоследствии отображать, как правило при клике на другом элементе, расположенном в непосредственной близости от скрытого.

Например, у вас есть такой код:

<h3 id=«what-lorem-ipsum-header»>Кликните, чтобы узнать, что такое Lorem Ipsum?</h3>

<p style=«display: none»>Lorem Ipsum — это текст—«рыба», часто используемый в печати и вэб—дизайне. ...

Lorem Ipsum не только успешно пережил без заметных изменений пять веков, но и перешагнул в электронный дизайн..... в шаблонах которых используется Lorem Ipsum.</p>

let h3 = document.getElementById(‘what-lorem-ipsum-header’);

h3.onclick = function(){

this.nextElementSibling.style.display = this.nextElementSibling.style.display == ‘none’ ? ‘block’ : ‘none’ ;

}

</script>

В этом коде для изменения стилевого свойства display для элемента мы используем тернарный оператор вместо конструкции if...else.

Рабочий пример:

Минусом такого подхода является то, что явное назначение стилевого свойства в виде атрибута style="display: none" бывает крайне редко в верстке. Чаще оно добавляется в коде JavaScript, и им же потом и удаляется.

Определяем свойство display, описанное во внешнем css-файле

Если же display: none установлен в css-стилях во внешнем файле или общих тегах <style> для данной страницы, то нужно использовать метод window.getComputedStyle(), который позволяет добраться до стилевых свойств определенного элемента, которые описаны не в нем самом. А затем используем для переключения видимости спрятанного элемента код, похожий на предыдущий вариант.

<h3 id=«find-lorem-ipsum»>Где взять Lorem ipsum</h3>

<p class=«hide-me»>Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые ... середине абзаца.

Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. Это делает предлагаемый здесь генератор единственным настоящим Lorem Ipsum генератором. Он использует словарь из более чем 200 латинских слов, а также набор моделей предложений. В результате сгенерированный Lorem Ipsum выглядит правдоподобно, не имеет повторяющихся абзацей или «невозможных» слов.</p>

let findH3 = document.getElementById(‘find-lorem-ipsum’);

findH3.onclick = function(){

let p = this.nextElementSibling;

let display = window.getComputedStyle(p, null).getPropertyValue(«display»);

//console.log(display);

p.style.display = p.style.display ==‘none’ || display ==‘none’ ? ‘block’: ‘none’;

}

</script>

Примечание: вместо display: block вы можете использовать display: flex или grid.

Проверяем работоспособность примера:

Где взять Lorem ipsum

Есть много вариантов Lorem Ipsum, но большинство из них имеет не всегда приемлемые модификации, например, юмористические вставки или слова, которые даже отдалённо не напоминают латынь. Если вам нужен Lorem Ipsum для серьёзного проекта, вы наверняка не хотите какой-нибудь шутки, скрытой в середине абзаца. Также все другие известные генераторы Lorem Ipsum используют один и тот же текст, который они просто повторяют, пока не достигнут нужный объём. В результате сгенерированный Lorem Ipsum выглядит правдоподобно, не имеет повторяющихся абзацей или «невозможных» слов. Можно сгенерировать текст Lorem ipsum с помощью плагина Emmet, доступного для большинства современных редакторов кода.

Добавление/удаление класса со свойством display: none

Для работы с последующими примерами нам понадобится описать ряд css-правил для различных классов, чтобы понимать, какие изменения происходят при добавлении/удалении какого-либо класса.

CSS-стили

.hide-me {display: none; }

.hidden-block {

display: none !important;

}

.d-flex {

display: flex;

justify-content: space-between;

}

.block {

flex: 0 0 30%;

border: 1px solid #3f9ed0;

padding: 10px;

}

.test dt, h3 {

cursor: pointer;

font-size: 1.2em;

color: #3f9ed0;}

.test dd {

margin: 10px;

color: #999;

}

.orange {color: #f90 !important;}

Пример с переключением класса со свойством `display: none !important`

Когда в любое css-свойство вы добавляете !important, это означает, что оно переопределяет даже те свойства, которые назначены в атрибуте style, повышая таким образом приоритет данного свойства для атрибута class. Поэтому здесь имеет смысл использовать такое JavaScript-свойство, как classList, которое содержит псевдомассив из всех классов, назначенных для данного элемента. Свойство classList имеет в своем арсенале замечательный метод toggle('имя_класса'), который работает, как переключатель классов: если указанный в скобках класс назначен данному элементу, он его убирает, если нет — добавляет. Именно им мы и воспользуемся в примере ниже для переключения видимости спрятанных изначально элементов списка <dd class="hidden-block">:

<dt class=«lorem-header»><span>Показать</span> абзац 1 с Lorem ipsum</dt>

<dd class=«hidden-block»>Lorem ipsum dolor sit amet, ... magnam harum, hic quas sint odit, facilis.</dd>

<dt class=«lorem-header»><span>Показать</span> абзац 2 с Lorem ipsum</dt>

<dd class=«hidden-block»>Delectus, repellendus, quaerat? ... quae dolores.</dd>

<dt class=«lorem-header»><span>Показать</span> абзац 3 с Lorem ipsum</dt>

<dd class=«hidden-block»>Natus culpa voluptas velit unde ... quam quae!</dd>

<dt class=«lorem-header»><span>Показать</span> абзац 4 с Lorem ipsum</dt>

<dd class=«hidden-block»>Dolorem ab, expedita est ducimus ... veritatis laboriosam porro corporis eos.</dd>

<dt class=«lorem-header»><span>Показать</span> абзац 5 с Lorem ipsum</dt>

<dd class=«hidden-block»>Quas quam, facere. Itaque,... illum esse sint eligendi, incidunt impedit.</dd>

</dl>

let allDT = document.querySelectorAll(‘.test dt’);

allDT.forEach( dt => dt.onclick = function(){

this.firstElementChild.textContent = this.firstElementChild.textContent==‘Показать’ ?

‘Спрятать’: ‘Показать’;

this.nextElementSibling.classList.toggle(‘hidden-block’);

this.classList.toggle(‘orange’);

})

</script>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo eveniet possimus, esse nihil tenetur vitae fugit repellendus quisquam neque provident numquam impedit a magnam harum, hic quas sint odit, facilis.

Delectus, repellendus, quaerat? Fugiat non repellat voluptas in, ea neque impedit hic voluptatum dicta molestias illum beatae inventore quos blanditiis assumenda autem ad nobis sint mollitia doloremque nulla quae dolores.

Natus culpa voluptas velit unde consequatur voluptatum consequuntur sed quibusdam! Nulla consectetur aperiam rem iure, illum, commodi ut earum enim totam. Tenetur numquam fugit totam ipsam debitis cupiditate quam quae!

Dolorem ab, expedita est ducimus voluptatibus, debitis eveniet architecto perferendis, porro maiores eos. Inventore nisi nesciunt magni vero deleniti recusandae velit! Repellat natus aspernatur, et veritatis laboriosam porro corporis eos.

Quas quam, facere. Itaque, deleniti, reiciendis. Esse soluta, minima. Sed odio earum cumque fugiat, modi inventore. Veritatis alias molestias unde, doloribus error corporis harum, illum esse sint eligendi, incidunt impedit.

В том случае, если у нас есть необходимость показать/спрятать блок, у которого задан и display: none, и display: flex, использование переключения класса будет также неплохим выходом, например так:

Показать 1 flex-блок

Показать 2 flex-блок

Показать 3 flex-блок

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

<h3 class=«show-flex»><span>Показать</span> 1 flex—блок</h3>

<div class=«block»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores, excepturi.</div>

<div class=«block»>Porro tempora dignissimos deserunt eius in sed, alias provident accusamus?</div>

<div class=«block»>Eos iure tenetur, accusantium adipisci possimus consequatur atque animi et!</div>

</div>

<h3 class=«show-flex»><span>Показать</span> 2 flex—блок</h3>

<div class=«block»>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque, impedit!</div>

<div class=«block»>Accusamus itaque quia quaerat quisquam aspernatur earum est aut odit.</div>

<div class=«block»>Expedita nemo iure alias quaerat cum maiores, accusamus nihil minima.</div>

</div>

<h3 class=«show-flex»><span>Показать</span> 3 flex—блок</h3>

<div class=«block»>Lorem ipsum dolor sit ame ....adipisicing elit. Reprehenderit, dolore!</div>

<div class=«block»>Incidunt autem nesciunt dolore maxime veritatis architecto officia eius dolorum.</div>

<div class=«block»>Consequuntur dolorum tempora fugit in aspernatur, nemo dicta non atque.</div>

</div>

let showHeader = document.querySelectorAll(‘.show-flex’);

showHeader.forEach(header => header.onclick = function() {

this.firstElementChild.textContent = this.firstElementChild.textContent == ‘Показать’ ? ‘Спрятать’ : ‘Показать’;

this.nextElementSibling.classList.toggle(‘hidden-block’);

this.classList.toggle(‘orange’);

})

</script>

Если совместить 2 предыдущих примера, то код можно сократить, просто указав нужные селекторы в первой строке JS-кода:

let showHeader = document.querySelectorAll(‘.test dt, .show-flex’);

showHeader.forEach(header => header.onclick = function() {

this.firstElementChild.textContent = this.firstElementChild.textContent == ‘Показать’ ? ‘Спрятать’ : ‘Показать’;

this.nextElementSibling.classList.toggle(‘hidden-block’)

})

</script>

Возможно, вам будет интересно узнать, как решается проблема отображения/скрытия элементов в Bootstrap с помощью разных классов, в том числе и для разных разрешений экранов.

Использование offsetHeight и/или offsetWidth элемента

Когда элемент скрыт, его высота и ширина = 0. Поэтому можно проверить значения этих свойств на совпадение с 0 или на false|true — и действовать в соответствии с этими показателями. Однако проверять мы будем не стилевые свойства, как в примере выше, а значение offsetHeight или offsetWidth элемента. Если любое из них равно 0, то элемент скрыт.

Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, «Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32

Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже. Также даны разделы 1.10.32 и 1.10.33 «de Finibus Bonorum et Malorum» Цицерона и их английский перевод, сделанный H. Rackham, 1914 год.

Давно выяснено, что при оценке дизайна и композиции читаемый текст мешает сосредоточиться. Lorem Ipsum используют потому, что тот обеспечивает более или менее стандартное заполнение шаблона, а также реальное распределение букв и пробелов в абзацах, которое не получается при простой дубликации «Здесь ваш текст.. Здесь ваш текст.. Здесь ваш текст..» Многие программы электронной вёрстки и редакторы HTML используют Lorem Ipsum в качестве текста по умолчанию, так что поиск по ключевым словам «lorem ipsum» сразу показывает, как много веб-страниц всё ещё дожидаются своего настоящего рождения. За прошедшие годы текст Lorem Ipsum получил много версий. Некоторые версии появились по ошибке, некоторые — намеренно (например, юмористические варианты).

Код примера:

<h3 id=«offsetHeight-check-header»>Кликните, чтобы узнать, откуда появился Lorem Ipsum?</h3>

<p>Многие думают, что Lorem Ipsum — взятый с потолка ... из строк в разделе 1.10.32</p>

<p>Классический текст Lorem Ipsum, используемый с XVI века, приведён ниже... ackham, 1914 год.</p></div>

<h3 id=«offsetWidth-check-header»>Почему Lorem Ipsum используется?</h3>

<div class=«hide-me»>Давно выяснено, что при оценке дизайна и композиции ... (например, юмористические варианты).</div>

let offsetHeightHeader = document.getElementById(‘offsetHeight-check-header’),

offsetWidthHeader = document.getElementById(‘offsetWidth-check-header’);

offsetHeightHeader .onclick = function(){

this.nextElementSibling.style.display = this.nextElementSibling.offsetHeight == 0? ‘block’ : ‘none’;

}

offsetWidthHeader .onclick = function(){

this.nextElementSibling.style.display = !this.nextElementSibling.offsetWidth ? ‘block’ : ‘none’;

}

</script>

Варианты значений css-свойства display

В таблице вы найдете варианты значений css-свойства display, которые можете использовать в скриптах и CSS.

Значение	Описание
`block`	Элемент рендерится браузером, как блочный
`flex`	Элемент рендерится, как гибкий со свойствами Flexbox-модели. Был добавлен в CSS3
`inline`	Элемент рендерится как строчный (inline)
`inline-block`	Элемент рендерится как строчно-блочный (inline-block)
`inline-flex`	Элемент рендерится, как гибкий, но с шириной, равной контенту. Был добавлен в CSS3
`inline-grid`	Элемент рендерится каккак контейнер-сетка, но без переноса строки до и после него.
`inline-table`	Элемент рендерится как таблица (подобно тегу `<table>`), без перевода строки до или после таблицы
`grid`	Элемент рендерится, как контейнер-сетка
`list-item`	Элемент рендерится, как элемент списка (`<li>`)
`none`	Элемент не отображается и не реагирует на события
`table`	Элемент рендерится, как блочная таблица (подобно тегу `<table>`), с переносом строки до и после таблицы
`table-caption`	Элемент рендерится, как заголовок таблицы (подобно тегу `<caption>`)
`table-cell`	Элемент рендерится, как ячейка таблицы (подобно тегам `<td>` и `<th>`)
`table-column`	Элемент рендерится, как столбец ячеек (подобно `<col>`)
`table-column-group`	Элемент рендерится, как группа из одного или нескольких столбцов таблицы (подобно `<colgroup>`)
`table-footer-group`	Элемент рендерится, как строка нижней части таблицы (подобно `<tfoot>`)
`table-header-group`	Элемент рендерится, как строка для заголовочной части (шапки) таблицы (как <thead>)
`table-row`	Элемент рендерится, как строка таблицы (как тег `<tr>`)
`table-row-group`	Элемент рендерится, как группа строк таблицы, например, `<tbody>`
`initial`	Устанавливает значение свойства по умолчанию. Например, для блочных элементов — `block`, для строчных — `inline`
`inherit`	Наследуется от родителя

Изменение свойства display с none на block в CSS

В CSS вы можете использовать для переключения видимости скрытый элемент checkbox (флажок) вместе с label, для которой можно менять значение пседоэлемента ::before или ::after. Причем в псевдоэлементе для label будет меняться только текст (Показать/Скрыть), а собственно показывать или скрывать мы будем элемент, следующий сразу за label. В примере это обычный div без атрибутов class или id, которые вы можете добавить самостоятельно.

Работать CSS-код будет за счет применения родственного селектора в виде ~ и псевдокласса :checked для флажка.

<style>

input#show-hide { display: none;}

label[for=»show-hide»]::before { content: ‘Показать блок’; }

#show-hide:checked + label::before { content: ‘Скрыть блок’; }

#show-hide:checked ~ div { display: block; }

#show-hide:not(:checked) ~ div { display: none; }

</style>

——————————

<div>Maxime facilis distinctio possimus temporibus porro eum voluptate in repellendus animi ullam, cumque, ratione quaerat dignissimos ab saepe recusandae numquam minus. Officiis esse culpa exercitationem, quidem perspiciatis amet ad, veniam cum nostrum repellendus magni est quae ipsam itaque assumenda similique?</div>

Тестируем пример:

Maxime facilis distinctio possimus temporibus porro eum voluptate in repellendus animi ullam, cumque, ratione quaerat dignissimos ab saepe recusandae numquam minus. Officiis esse culpa exercitationem, quidem perspiciatis amet ad, veniam cum nostrum repellendus magni est quae ipsam itaque assumenda similique?

Рассмотрим пример с появлением текста с анимацией типа @keyframes, благодаря которой у нас будет проявляться div c помощью изменения свойства opacity от 0 до 1 за 2 секунды.

<style>

input { display: none;}

label::before { content: ‘Показать контент’; }

#toggle:checked + label:before { content: ‘Скрыть’; }

#toggle:checked ~ div { animation: fadeIn 2s ease-out forwards; }

#toggle:not(:checked) ~ div { display: none; }

@keyframes fadeIn{

0% { opacity: 0; visibility: hidden; }

100% { opacity: 1; visibility: visible; }

}

</style>

——————————

<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam et, sit delectus quasi illum vitae, natus eos error dolore repellat facere reiciendis a quisquam voluptas assumenda esse aliquid pariatur officiis.</div>

Тестируем пример с анимацией:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam et, sit delectus quasi illum vitae, natus eos error dolore repellat facere reiciendis a quisquam voluptas assumenda esse aliquid pariatur officiis.

Использование атрибута area-expanded в JavaScript и CSS

Еще один способ управления отображением элемента завязан на использовании атрибута area-expanded, который как раз предназначен для того, чтобы показывать, развернут или свернут текущий элемент. Рассматривать его применение мы будем на примере аккордиона для блока страницы с FAQ (Frequently Asked Question(s) — часто задаваемые вопросы), который довольно часто встречается на сайтах. В данном случае название аккордион — это уже устоявшееся наименование для такого рода блоков, в которых при клике на заголовок раскрывается текст, расположенный ниже.

Атрибут aria-expanded является одним из атрибутов группы ARIA (от Accessible Rich Internet Applications, или Доступные многофункциональные интернет-приложения). ARIA — это подмножество атрибутов HTML (обычно с префиксом aria-), которые позволяют таким программам, как чтение с экрана для слабовидящих, распознавать элементы на ваших html-страницах.

В примере ниже у нас есть ряд элементов типа button с атрибутом aria-expanded="false".

<span class=«accordion-title»>Why is the moon sometimes out during the day?</span>

</button>

Внутри button расположен текст заголовка и иконка с плюсом или минусом в зависимости от того, какое значение у aria-expanded для button. Она тоже имеет атрибут типа ARIA в виде aria-hidden="true". Такое значение атрибута показывает, что эта иконка будет скрыта для программ чтения с экрана, т.е. уведомлять о ее наличии такая программа не будет. Для обычных же пользователей эта иконка является дополнительным элеменотом оформления аккордиона.

JavaScript-код отвечает за обработку кликов по кнопкам в плане изменения значения aria-expanded с «false» на «true» и наоборот. В зависимости от этого CSS-стили позволяют отображвть или скрывать текст в блоках <div class="accordion-content"> с использованием transition-анимации. Получается валидный код с учетом особенностей форматирования контента для слабовидящих с минимумом JavaScript-кода.

При тестировании примера, нажмите на любую из вкладок HTML, CSS, JS, чтобы отобразить нужный код, или перейдите на codepen.io кликом ко кнопке .

See the Pen FAQ Accordion with area-expanded property by Elen (@ambassador) on CodePen.0

Текст примеров взят с сайта ru.lipsum.com.

Вам может понравиться

Источник

Improve Article

Save Article

Read

Discuss

Improve Article

Save Article

The task is to add style=display: “block” to an element with the help of jQuery.

.css(): Set one or more CSS properties for the set of matched elements.
Syntax:
```
$("div").css("display", "block")
```
.show(): Display the matched elements and is roughly equivalent to calling .css(“display”, “block”).
Syntax:
```
$("div").show()
```
.attr(): Set one or more attributes for the set of matched elements.
Syntax:
```
$("div").attr("style", "display:block")
```

Example 1: Using .css() Method

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>

How to add `style=display:“block”`to

an element using jQuery?

</title>

<style>

p {

color: green;

font-weight: bold;

cursor: pointer;

}

</style>

</script>

</head>

<body style="text-align:center;">

<h1 style="color:green;">

GeeksForGeeks

</h1>

<h2> Using .css()</h2>

<div>

How to add

<p>`style=display:“block”`

</p> to an element using jQuery?

</div>

<script>

var words = $("p").first().text().split(/s+/);

var text = words.join("</span> <span>");

$("p").css("display", "block");

</script>

</body>

</html>

Output:

Example 2: Using .attr() Method

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>

How to add `style=display:“block”`

to an element using jQuery?

</title>

<style>

p {

color: green;

font-weight: bold;

cursor: pointer;

}

</style>

</script>

</head>

<body style="text-align:center;">

<h1 style="color:green;">

GeeksForGeeks

</h1>

<h2> Using .attr()</h2>

<div>

How to add

<p>`style=display:“block”`</p> to an element using jQuery?

</div>

<script>

var words = $("p").first().text().split(/s+/);

var text = words.join("</span> <span>");

$("p").attr("style", "display:block")

</script>

</body>

</html>

Output:

Example 3: Using .show() Method

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>How to add `style=display:“block”

`to an element using jQuery?</title>

<style>

p {

color: green;

font-weight: bold;

cursor: pointer;

}

</style>

</script>

</head>

<body style="text-align:center;">

<h1 style="color:green;">

GeeksForGeeks

</h1>

<h2> Using .show()</h2>

<div>

How to add

<p>`style=display:“block”`</p>

to an element using jQuery?

</div>

<script>

var words = $("p").first().text().split(/s+/);

var text = words.join("</span> <span>");

$("div").show();

</script>

</body>

</html>

Output:

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.

Источник

Вы можете использовать jQuery-метод css(), чтобы изменить значение свойства CSS display на none, block или любое другое значение. Метод css() применяет правила стиля непосредственно к элементам, то есть к встроенным.

Следующий пример изменит отображение элемента DIV при нажатии кнопки:

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Change CSS display Property to none or block</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    #myDiv{
        padding: 20px;
        background: #abb1b8;
        margin-top: 10px;
    }
</style>
<script>
$(document).ready(function(){
    // Устанавливаем для отображения div значение none
    $(".hide-btn").click(function(){
        $("#myDiv").css("display", "none");
    });
    
    // Устанавливаем для отображения div значение block
    $(".show-btn").click(function(){
        $("#myDiv").css("display", "block");
    });
});
</script>
</head>
<body>
    <button type="button" class="hide-btn">Display none</button>
    <button type="button" class="show-btn">Display block</button>
    <div id="myDiv">#myDiv</div>
</body>
</html>

В качестве альтернативы, если вы беспокоитесь о начальном значении свойства display элемента, но хотите переключаться между его начальным значением и none, вы можете просто использовать jQuery-метод show(), hide() или просто toggle(). В следующем примере показано, как это работает:

<!DOCTYPE html>
<html lang="en">
<head>
<title>jQuery Toggle CSS display of an Element</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    #myDiv{
        padding: 20px;
        background: #abb1b8;
        margin-top: 10px;
    }
</style>
<script>
$(document).ready(function(){
    // Скрываем div, установив для отображения значение none
    $(".hide-btn").click(function(){
        $("#myDiv").hide();
    });
    
    // Показываем div, удалив правило стиля встроенного отображения none
    $(".show-btn").click(function(){
        $("#myDiv").show();
    });
    
    // Переключаем отображение div
    $(".toggle-btn").click(function(){
        $("#myDiv").toggle();
    });
});
</script>
</head>
<body>
    <button type="button" class="hide-btn">Hide</button>
    <button type="button" class="show-btn">Show</button>
    <button type="button" class="toggle-btn">Toggle</button>
    <div id="myDiv">#myDiv</div>
</body>
</html>

1. Using JavaScript

JS

CSS

HTML

2. Using jQuery

[EDIT] Important observation

[EDIT] Important observation

Проверка на стилевое свойство display: none

Определяем свойство display, описанное во внешнем css-файле

Где взять Lorem ipsum

Добавление/удаление класса со свойством display: none

CSS-стили

Пример с переключением класса со свойством `display: none !important`

Показать 1 flex-блок

Показать 2 flex-блок

Показать 3 flex-блок

Использование offsetHeight и/или offsetWidth элемента

Варианты значений css-свойства display

Изменение свойства display с none на block в CSS

Использование атрибута area-expanded в JavaScript и CSS

Вам может понравиться

Читайте также

Похожие посты

1. Using JavaScript

JS

CSS

HTML

2. Using jQuery

[EDIT] Important observation

[EDIT] Important observation

Проверка на стилевое свойство display: none

Определяем свойство display, описанное во внешнем css-файле

Где взять Lorem ipsum

Добавление/удаление класса со свойством display: none

CSS-стили

Пример с переключением класса со свойством display: none !important

Показать 1 flex-блок

Показать 2 flex-блок

Показать 3 flex-блок

Использование offsetHeight и/или offsetWidth элемента

Варианты значений css-свойства display

Изменение свойства display с none на block в CSS

Использование атрибута area-expanded в JavaScript и CSS

Вам может понравиться

Читайте также

Похожие посты

Пример с переключением класса со свойством `display: none !important`