Can this code using ‘display:none’ hurt my SEO? [duplicate]

I’m trying to solve a problem with a content that I’m putting in a page with an iframe, the problem is: I want the SEO of that iframe but in the principal page, I wrote a collapse with JavaScript but it put the content in with display:none and I know that google has SEO penalties with no content displayed, so, I really don’t know what to do, any solutions?

here the code I’m trying to implement: https://codepen.io/explora-desarrollo/pen/abBoPJy

HTML

<button type="button" class="collapsible">+</button> 

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 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.

CSS

.collapsible {   background-color: #777;   color: white;   cursor: pointer;   padding: 0px 3px;   width: auto;   border: none;   text-align: left;   outline: none;   font-size: 15px; }  .active, .collapsible:hover {   background-color: #555; }  .content {   padding: 0 18px;   display: none;   overflow: hidden;   background-color: #f1f1f1; } 

JAVASCRIPT

var coll = document.getElementsByClassName("collapsible"); var i;  for (i = 0; i < coll.length; i++) {   coll[i].addEventListener("click", function() {     this.classList.toggle("active");     var content = this.nextElementSibling;     if (content.style.display === "block") {       content.style.display = "none";     } else {       content.style.display = "block";     }   }); }