Collapsible div in generate_after_archive_title hook on page with masonry

I have an hook generated after generate_after_archive_title and I would like to have a collapsible div showing that content, but this is driving me crazy (I think is because the “position:absolute;” of the masonry… and because when the div opens, it show’s the content before the pictures of the posts.

Is it possible to have some workaround on this?

This is the output on my site:

<header class="page-header" aria-label="Página">
<h1 class="page-title">Page title</h1>
<span id="breadcrumbs">...(yoast Breadcrumb here)...</span>
<div class="aligncenter" style="clear:both;display:block;text-align:center;margin-left:auto;margin-right:auto;padding:10px;"> ... (THIS IS THE DIV I NEED TO BE COLAPSIBLE) </div>
<div class="headline_cats"></div> </header>

<article id="post-30811" class="generate-columns tablet-grid-50 mobile-grid-100 grid-parent grid-25 posts-in-page post-30811 post type-post status-publish format-standard has-post-thumbnail hentry category-maincat masonry-post no-featured-image-padding" itemtype="https://schema.org/CreativeWork" itemscope="" style="position: absolute; left: 0%; top: 701.496px;">...</header></article>

How am’I trying to do this?

I’m placing the “aligncenter” div inside this code:

<span class="badge badge_b" style="font-size:17px;cursor:pointer;border:2px solid red;
    margin:3px;display:block;" onclick="ShowHide();"> click to see the content </span>
	<div id="content" class="standby" style="margin-bottom:0.1rem !important;padding:0.3rem;">';*/
	
<div class="aligncenter" style="clear:both;display:block;text-align:center;margin-left:auto;margin-right:auto;padding:10px;"> the content of this div goes here... </div>
	
</div>

This is my javascript code:

function ShowHide(){
document.getElementById("content").classList.toggle("standby")
}

The css for the class standby:

.standby {display:none;}