JavaScript单击div以显示隐藏的内容动画

Question

I am working on this JavaScript animated accordion, trying to get it to where when a Section div is clicked, a hidden panel slides down from behind it to reveal hidden content. Then when the bar is clicked again, the hidden area slides back up and becomes hidden again. This is almost working the way I need it to apart from a couple of issues that I haven't been able to solve.

1. The vertical distance between the section bars should remain consistent before and after the hidden area is revealed or hidden. Right now, there is an undesired margin between them.
2. When the hidden area slides back up to be hidden again, it needs to slide all the way up so that the border of the hidden area also disappears.

I believe there are a couple of small changes to my JavaScript/css code that could enable this to work properly, I just haven't been able to find them.

Here is what my code looks like:

 var acc = document.getElementsByClassName("bar"); var i; // For each bar for (i = 0; i < acc.length; i++) { // If this bar is clicked acc[i].addEventListener("click", function() { // Toggle the clicked bar to "active" this.classList.toggle("active"); // Panel will consist of the next hidden content var panel = this.nextElementSibling; var bar = this.nextElementSibling.nextElementSibling; console.log("hidden height:", panel.getBoundingClientRect().height) // Use logic to change CSS styles for the selected bar if (panel.style.maxHeight){ var closeHeight = panel.getBoundingClientRect().height; console.log("close height", closeHeight) var newHeight = (closeHeight - 80) + "px"; panel.style.height = newHeight console.log("close height after adjustment", newHeight) // panel.style.border = 'none'; panel.style.maxHeight = null; console.log("close maxheight", panel.style.maxHeight) // panel.style.maxHeight = '0px'; // panel.style.padding = '0 18px'; panel.style.paddingTop = '80px'; panel.style.border = 'solid 1px #aaa'; bar.style.marginTop = '-15px' // panel.style.border = 'none'; } else { // bar.style.marginTop = '15px' panel.style.border = 'solid 1px #aaa'; panel.style.paddingTop = '80px'; panel.style.maxHeight = panel.scrollHeight + "px"; console.log("open maxheight", panel.style.maxHeight) console.log("open height", panel.getBoundingClientRect().height) } }); } 

 .bar { width: 350px; height: 90px; border-radius: 8px; padding: 20px; font-size: 24px; margin: 70px 15px 15px 15px; /* margin: 15px 15px 15px 15px; */ z-index: -2; background-color: #eee; color: #444; cursor: pointer; border: 1px solid #444; text-align: left; outline: none; font-size: 16px; /* transition: 0.4s; */ transition: 3.4s; } .active, .bar:hover { background-color: #ccc; } .hidden { width: 340px; /* height: 370px; */ /* border: solid 1px #aaa; */ border-radius: 8px; margin: -80px 0px 15px 0px; padding: 0 18px; max-height: 0; overflow: hidden; /* transition: max-height 0.2s ease-out; */ transition: max-height 3.2s ease-out; } 

 <button class="bar">Section 1</button> <div class="hidden"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="bar">Section 2</button> <div class="hidden"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="bar">Section 3</button> <div class="hidden"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> 

This is also visible on codepen: https://codepen.io/Chris_Nielsen/pen/Lozedd

Answer 1

Because CSS + javascript is so powerful nowadays, the need of JQuery is unnecessary.

• I removed lots of javascript code.
• I added .information as a class to all .hidden divs.
• I added an extra div inside the .hidden.information div. I'm using this to calculate the real height of the hidden text blocks.
• I finally added a CSS variable so you only need to change the displacement of the .hidden.information text blocks in one place.

 var acc = document.getElementsByClassName("bar"); var i // For each bar for (i = 0; i < acc.length; i++) { // If this bar is clicked acc[i].addEventListener("click", function() { // Toggle the clicked bar to "active" this.classList.toggle("active"); var panel = this.nextElementSibling; if (!panel.style.maxHeight) { // add only once var elementDisplacement = getComputedStyle(panel).getPropertyValue("--element-displacement"); elementDisplacement = Number( elementDisplacement.replace("px", "") ); var panelChildHeight = panel.firstElementChild.getBoundingClientRect().height; panel.style.maxHeight = panelChildHeight + elementDisplacement + "px"; } panel.classList.toggle("hidden"); }); } 

 .bar { width: 350px; height: 90px; border-radius: 8px; padding: 20px; font-size: 24px; margin: 70px 15px 15px 15px; z-index: -2; background-color: #eee; color: #444; cursor: pointer; border: 1px solid #444; text-align: left; outline: none; font-size: 16px; } .active, .bar:hover { background-color: #ccc; } .information { --element-displacement: 80px; width: 340px; border-radius: 8px; margin: calc(-1 * var(--element-displacement)) 0px 15px 0px; padding: 0 18px; padding-top: var(--element-displacement); border: 1px solid #aaa; max-height: initial; overflow: hidden; transition: max-height 1s ease-out; } .hidden { max-height: 0px !important; border-color: transparent; } 

 <button class="bar">Section 1</button> <div class="hidden information"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <button class="bar">Section 2</button> <div class="hidden information"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> <button class="bar">Section 3</button> <div class="hidden information"> <div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div>