Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

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="" 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>

    This is my javascript code:

    function ShowHide(){

    The css for the class standby:

    .standby {display:none;}

  • Hi there,

    Any chance you can link us to your site where we can see the issue?
    You can use the private info field for this.

  • Hi! This is localhost… sorry!

    Is it possible to hook this immediately after the </header>?

  • Hi Tpulda,

    Yes, it should be possible. You can hook it to after_header with a priority of 1.

  • Hi,

    Sorry, I should be clearer…

    I was referring to this header…

    <header class="page-header" aria-label="Page">
    <h1 class="page-title"></h1>

    Is it possible?

  • Try generate_after_archive_title with a priority of 1.

  • Hi, this is not helping me to have my Collapsible div in generate_after_archive_title hook on page with masonry.

    I understand why the topic has been tagged as out-of-scope, and I appreciate all your good will to point me in the right direction, as possible (of course…).

    What I need is to have a collapsible div after the </header> of:

    <header class="page-header" aria-label="Page">
    <h1 class="page-title"></h1>

    and the rest of the page… if, somehow it would be possible…


  • I don’t think there’s a way as the Masonry is set toposition:absolute by JavaScript.

    It will require custom JavaScript to override the theme Masonry.

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.