Plugin stopped working after updates

This are screenshots of how it was working before the update, just to understand the layout.

Closed
https://saad-studio.com/wp-content/themes/img-collapseomatic-closed.jpg

Open
https://saad-studio.com/wp-content/themes/img-collapseomatic-open.jpg

ok… there is a lot of stuff going on here.

This is an example of the code that is being output:

<a class="collapseomatic colomat-close colomat-visited" title="continue lendo" id="mais21" href="https://saad-studio.com/thinking-branding-design/#branding">
<span class="collapseomatic colomat-close morec clos">
<div class="closh"></div>
</span>
</a>

so:
A link + collapseomatic… ok, but not optimal
a span + collapsomatic but no id… bad
an empty div with a closh class… ok.

can you paste an example of how you are using the roll-your-own goodness?
we’ll try and set you back on the right path.

<div id="<?php echo $post->post_name;?>" class="espac">   

          <div class="coli fulls esqa">
	  <a href="<?php $image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),'full' ); echo $image_url[0];  ?>
"><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?><span>&nbsp;</span></a>
          </div>

          <div class="colt ctb" style="padding: 0 14px 0;">
	  <img src="<?php echo get_template_directory_uri(); ?>/images/underline-saad-black.png" width="27" height="6" />
	  <h1 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h1>
           <a href="<?php $image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),'full' ); echo $image_url[0];  ?>
" id="imgthink"><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?><span>&nbsp;</span></a>

           <?php if(strpos(get_the_content(),'id="more-')) : global $more; $more = 0;  the_content('<span id="mas">(...)</span>'); ?>

	    <div id="target-mais<?php the_ID(); ?>" class="collapseomatic_content" style="position:relative;margin-top: -12px;"><?php $more = 1; the_content('', true ); else : the_content(); endif; ?>
<div class="citath ceq"><?php the_field('citac'); ?></div>
            </div>

            <a class="collapseomatic" title="continue lendo" id="mais<?php the_ID(); ?>" href="<?php $currentlang = get_bloginfo('language'); if($currentlang=="pt-BR"){echo get_permalink( 162 );} else {echo get_permalink( 1085 );}?>#<?php echo $post->post_name;?>"><span class="morec dow"><?php pll_e('continue'); ?> <div class="dowh"></div></span></a>

<a id="swap-mais<?php the_ID(); ?>" style="display: none;" class="obg"><span class="collapseomatic colomat-close morec clos"><div class="closh"></div></span></a>

          </div>

This is the post loop in the original file.
I don’t have a working example of it now, just that page. But it should work like the screenshots i’ve sent.

I am using 2 different functions:
– swap title
– “roll-your-own example that places the trigger below the target”: same as documentation

the basic structure

<div id="target-monkey1" class="collapseomatic_content">You might think you can catch a monkey, but you can't. Monkeys are FAST!</div>
<span class="collapseomatic" title="Fast Monkey" id="monkey1" >Fast Monkey</span>
<span id="swap-monkey1" style="display: none;">Eek Eek</span>

Just a better description of the code:

General Div that gets the anchor #
<div id="<?php echo $post->post_name;?>" class="espac">

Featured image div

<div class="coli fulls esqa">
<a href="<?php $image_url = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ),'full' ); echo $image_url[0];  ?>
"><?php if ( has_post_thumbnail() ) { the_post_thumbnail(); } ?><span>?</span></a>
</div>

Title and text div

<div class="colt ctb" style="padding: 0 14px 0;">
<img src="<?php echo get_template_directory_uri(); ?>/images/underline-saad-black.png" width="27" height="6" />
<h1 id="post-<?php the_ID(); ?>"><?php the_title(); ?></h1>

The content before the “more” tag. (…) hides when opened.
<?php if(strpos(get_the_content(),'id="more-')) : global $more; $more = 0; the_content('<span id="mas">(...)</span>'); ?>

The content after “more” tag
<div id="target-mais<?php the_ID(); ?>" class="collapseomatic_content" style="position:relative;margin-top: -12px;"><?php $more = 1; the_content('', true ); else : the_content(); endif; ?>

Quote div (just displays when is opened)

<div class="citath ceq"><?php the_field('citac'); ?></div>

</div> <!-- end of collapseomatic_content -->

keep reading link
<a class="collapseomatic" title="continue lendo" id="mais<?php the_ID(); ?>" href="<?php $currentlang = get_bloginfo('language'); if($currentlang=="pt-BR"){echo get_permalink( 162 );} else {echo get_permalink( 1085 );}?>#<?php echo $post->post_name;?>"><span class="morec dow"><?php pll_e('continue'); ?> <div class="dowh"></div></span></a>

close text link
<a id="swap-mais<?php the_ID(); ?>" style="display: none;" class="obg"><span class="collapseomatic colomat-close morec clos"><div class="closh"></div></span></a>

I’ve placed the example in another link. The previous link is different now.
https://saad-studio.com/thinking/

if you are going to use an anchor tag <a> as the trigger you need to prevent it from acting as a normal link. you can not navigate to a new page like you are:

$currentlang = get_bloginfo('language');
if($currentlang=="pt-BR"){echo get_permalink( 162 );
} else {
echo get_permalink( 1085 );
};

This would work if the user is NOT on the same page, then the user would navigate to that page, and then using the hash it would scroll to that id… if the id was also a collapse element, it would trigger the expand.

As you have it, the page will reload and scroll, but not trigger an expand.

Will all the triggers be connected to elements on the same page? if so, you do not need to use the permalink at all. for example:

<a class="collapseomatic" title="continue lendo" id="mais<?php the_ID(); ?>" #target-mais<?php the_ID(); ?>"><span class="morec dow"><?php pll_e('continue'); ?> <div class="dowh"></div></span></a>

<a id="swap-mais<?php the_ID(); ?>" style="display: none;" class="obg"><span class="collapseomatic colomat-close morec clos"><div class="closh"></div></span></a>

i am sorry, this happened because i’ve put the example and didn’t change the url properly.

But it works that way, because when the user clicks at the trigger it aligns with the beginning of the post.

I’ve made some changes to the example, so now, it’s all working except the problem with collapse o matic.

Hi Baden,

i made that adjustment, but it still doesn’t work.

<a class="collapseomatic" title="continue lendo" id="mais<?php the_ID(); ?>" href="#<?php echo $post->post_name;?>"><span class="morec dow"><?php pll_e('continue'); ?><div class="dowh"></div></span></a>

<a id="swap-mais<?php the_ID(); ?>" style="display: none;" class="obg"><span class="collapseomatic colomat-close morec clos"><div class="closh"></div></span></a>

I think it’s a jquery conflict, but you might get to the issue better than me.

ok, first, lets try it w/o the a tag:

<span class="collapseomatic" title="continue lendo" id="mais<?php the_ID(); ?>"><span class="morec dow"><?php pll_e('continue'); ?><div class="dowh"></div></span></span>

<span id="swap-mais<?php the_ID(); ?>" style="display: none;" class="obg"><span class="collapseomatic colomat-close morec clos"><div class="closh"></div></span></span>

what happens then?

I’ve made this test earlier, but i’ve included again for you to see. It persists the same problem.

The strange behavior is that some content that is inside the hidden div (div .citath) is been displayed with absolute position relative to all page and not the content div.

ok, lets back way up and start with an example that is very, simple.
Remove all your nested divs that deal with your special arrows, there is a better way to do that.

Start simple, make sure it works and then add on features.

<span class="collapseomatic" title="continue lendo" id="mais<?php the_ID(); ?>"><?php pll_e('continue'); ?></span>
<span id="swap-mais<?php the_ID(); ?>" style="display: none;"><?php pll_e('close'); ?></span>

<div id="target-mais<?php the_ID(); ?>" class="collapseomatic_content">hidden text</div>

First, thank you for you patience and attention, Baden.
Unfortunately, now it doesn’t display nothing about collapse-o-matic. I’ve checked with firebug and the span tags aren’t displayed at the site render, but i’ve included the basic code.

The code was inserted inside div with class .colt

then just add the colt class to the master span:

<span class="collapseomatic colt" title="continue lendo" id="mais<?php the_ID(); ?>"><?php pll_e('continue'); ?></span>

That div with class “colt” is the text content div, right next to the image. I don’t see why adding the class in the master span would make difference. I’ve added anyway.

If you take a look at the source code it is like i’ve added nothing after the text content, but it should be there, even with “display:none”.