Trouble with accordion dropdown

[hop14424671]

Hello, Everybody!

I am trying to modify some accordions right now and they aren’t exactly working as I expect. Well, they work until I attempt to reduce the size of the page. For some reason, the text gets hidden behind another element. This only happens for the paragraph in my accordion. I have 3 on the same page, but the only thing being affected is the paragraph. Images below will show exactly what I am experiencing.

Normal (before reducing screen size):
https://postimg.org/image/521aped65/

My problem (after reducing screen size):
https://postimg.org/image/ejfohuw1j/

As you can see in the image above, half of the text has gone missing. It is hidden behind this element:
https://postimg.org/image/dhjnci1h1/

I can’t quite figure out why this is happening. As mentioned previously, all of my other accordions work perfectly fine and none of those get hidden when in this position, so I’m extremely confused about the cause.

HTML Code:

<div class="acc-container">
<button class="accordion" id="btn-top">Events</button>
<div class="panel">
<h3>Question Heading</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor tincidunt turpis. Aenean vulputate orci mauris, id posuere ipsum placerat ut. Aenean placerat sodales erat, et tempor augue faucibus a. Praesent bibendum consectetur ante, aliquet iaculis nisi interdum quis. Praesent mollis risus et lacinia iaculis.</p>
</div>
</div>

CSS Code:

* {
	margin: 0;
	font-family: 'Ubuntu', sans-serif;
}

body {
	background-color: grey;
}

.acc-container {
	margin: 0 auto;
	padding: 15px;
	text-align: center;
	background-color: white;
}

button.accordion {
    background-color: #272727;
    color: #fff;
		font-weight: bold;
		font-size: 25px;
    cursor: pointer;
    padding: 18px;
    width: 80%;
    text-align: left;
    border: none;
    outline: none;
    transition: 0.8s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
button.accordion.active, button.accordion:hover {
    background-color: rgba(25, 25, 25, 0.8);
}

/* Style the accordion panel. Note: hidden by default */
div.panel {
    padding: 0 18px;
    background-color: white;
		max-width: 100%;
    max-height: 0;
		margin-top: 5px;
		margin-bottom: 5px;
		overflow: hidden;
    transition: max-height 0.2s ease-out;
}

.panel h3 {
padding: 10px 0px 10px 0px;
color: #EF8072;
font-size: 30px;
border-bottom: 2px solid #EF8702;
}

.panel p {
padding: 10px 0px 10px 0px;
}

button.accordion:after {
    content: '\02795'; /* Unicode character for "plus" sign (+) */
    font-size: 13px;
    background-color: #fff;
    float: right;
		padding: 5px;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "\2796";
		color: white;/* Unicode character for "minus" sign (-) */
}

Javascript Code:

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

Knowing me, it’s something so simple that I’m skipping over once again, but I can’t figure it out for the life of me. Any help would be greatly appreciated.

[PaulOB]

This looks more like a script question than css as it seems that you are looping through the accordion and setting a fixedheight. Of course when you resize the page the height will be wrong because the text will need taller containers.

You would need to change the height of the containers in your script on resize also so that they reflect the new height. You would also likely need to throttle the resize event if you do that.

To test if the issue is as I’m guessing above then resize your page but then click refresh at the new size and see if it then works ok.