Accordion for Images

You could use the built-in conditional statements based on user selections
(OR)
You could buy the PRO version and add the code for the fields collapse feature
https://najeebmedia.com/blog/ppom-fields-collapse/
(OR)
you could write your own custom script using JavaScript or jQuery.

I do have the pro version and that worked perfectly!

Glad I could help! Do @nmedia a favor and mark this topic as resolved.

A quick question – do you know if there is a way to make the first section expended by default?

By default the PPOM fields show up expanded.

You could try by not adding an HTML field before the fields you want displayed although you would lose that label that shows up.

If you want to keep the HTML label you could add some JavaScript and add the class “active” to the first step.

Something like the following:

jQuery(function($){
$("h4.ppom-collapsed-title:eq(0)").addClass("active").ziehharmonika('open', settings.scroll);
});

Mind you this isn’t tested but that is where I would start after looking at the source code of the demo.

Okay, I tested it and it didn’t work but this did!

$(document).ready(function(){
	$("h4.ppom-collapsed-title:eq(0)").addClass("active");
	$(".ppom-section-collapse > div.collapsed-child:eq(0)").css("display","block");
});

And here’s a little more implementation to change the “+” sign to a “-” on page load.

jQuery(function($){
	$(document).ready(function(){
		$("h4.ppom-collapsed-title:eq(0)").addClass("active").children("div.collapseIcon").html("-");
		$(".ppom-section-collapse > div.collapsed-child:eq(0)").css("display","block");
	});
});

Thanks! Were would I put that code? In the child theme functions file?

Yep. Add this to your theme’s functions.php file:

/**
 * Automatically expand the first PPOM collapsible field label and associated child component on page load
 */
function ppom_collapse_fields_override(){ ?>
<script type="text/javascript">
jQuery(function($){
	$(document).ready(function(){
		$("h4.ppom-collapsed-title:eq(0)").addClass("active").children("div.collapseIcon").html("-");
		$(".ppom-section-collapse > div.collapsed-child:eq(0)").css("display","block");
	});
});</script>
<?php } add_action('wp_footer', 'ppom_collapse_fields_override');

Thanks for all of your help, I truly appreciate it. I am getting this error:

Parse error: syntax error, unexpected ‘?’ in /home/custom68/public_html/wp/wp-content/themes/shopkeeper-child/functions.php on line 20

Is there something I should change in the code?

NVM – user error. I can’t even copy and paste without screwing something up!

Seriously, thanks for your help. This tweak makes the plugin a lot more usable for me.

No problem @jkwalz. Glad to help.

Hi There,

Glad to see that issue is resolved, Thanks @brozra ??

Hi brozra,
Do you know, if there is a ste-by-step-guide on how to set up collapsed fields? The screenshots at this plugin’s website do not explain this to me… I’m using the PRO-Version.

Thanks in advance for your hints,
jens

• This reply was modified 5 years, 3 months ago by jensderknipser.