Make a smooth pop-up menu.

Question

var lastOpen; function collapsElement(id) { if (document.getElementById(id).style.display != "none") { document.getElementById(id).style.display = 'none'; } else { if (lastOpen !== undefined) { lastOpen.style.display = 'none'; } lastOpen = document.getElementById(id); document.getElementById(id).style.display = ''; } }

 <div><a class="open-content" href="javascript:collapsElement('opencontent')" title="" rel="nofollow">Анкор ссылки</a> <div id="opencontent" style="display: none"> <p>Ваш открывающийся материал</p> </div> </div>

It is necessary to add a transition , but there is a big НО , display: none" transition-ну not subject to

Accepted Answer · 2018-03-28T08:20:54

You can do it through transition , it will be like this:

 const openMenu = document.querySelector('.open-button'); openMenu.addEventListener('click', (e) => { e.preventDefault(); openMenu.nextElementSibling.classList.toggle('open-content--show') });

 .open-content { max-height: 0; overflow: hidden; transition: 1s ease max-height } .open-content--show { max-height: 300px; }

 <div> <a class="open-button" href="" title="" rel="nofollow">Анкор ссылки</a> <div id="opencontent" class="open-content"> <p>Ваш открывающийся материал</p> </div> </div>

For the best, try to do everything as much as possible through CSS , that is, either without Javascript interaction at all, or with minimal. Your example can be done without Javascript at all, and on pure CSS through the input type checkbox . But here I showed, based on your code.

If you need the old standard ES5 , then Javascript code will be like this

 'use strict'; var openMenu = document.querySelector('.open-button'); openMenu.addEventListener('click', function (e) { e.preventDefault(); openMenu.nextElementSibling.classList.toggle('open-content--show'); });

UPDATE: Option on pure CSS

 label { cursor: pointer; } label ~ .appear { max-height: 0; overflow: hidden; transition: 1s ease max-height; } input { display: none; } input:checked ~ .appear { max-height: 300px; }

 <label for="the-checkbox">Раскрыть</label> <input type="checkbox" id="the-checkbox" /> <div class="appear">Некоторый нужный текст</div>

UPDATE 2: If you do not need animation, but need a pure html, then in general like this. It does not suit you. But let it be for others.

 <details> <summary>Раскрыть</summary> Некоторый текст </details>

So that the rest will immediately see the solution, who will look for a similar question.

Air air 10.6k five 21 52 · Answer 2 · 2018-03-28T08:44:57

Not knowing exactly what you need, an abstract example. Instead of display = 'none' use the addition and removal of classes, and then you can get some effects in css styles ... And links for such actions should not be used

 const openButton = document.querySelector('#open-button'); const opencontent = document.querySelector('#opencontent'); openButton.addEventListener('click', () => { openButton.classList.toggle('show'); opencontent.classList.toggle('open'); });

 #open-button { overflow: hidden; height: 20px; background: red; transition: height .5s .3s; } #open-button.show { overflow: hidden; height: 100px; background: red; transition: height .5s; } #opencontent { opacity: 0; transition: background .1s, opacity .5s .3s; background: red; } #opencontent.open { opacity: 1; background: white; transition: background .6s .1s, opacity .5s; }

 <div id="open-button">Анкор ссылки <div id="opencontent" class="open-content"> <p>Ваш открывающийся материал</p> </div> </div>

Make a smooth pop-up menu.

2 answers 2

More articles: