[Resuelto] Possible to have collapse box within body

[Autor]

Mensajes

[jamesG-3]

Hi all,

I have a content type loading perfectly and use [wpv-post-body view_template="None"] to load the main content. I would like, if possible, to have only one paragraph of text displayed and have a view more button that would extend the rest of the content below. I had used the collapse-o-natic plugin which works manually, but I am not aware of whether there is a way to automate this? We will have a lot of interns updating the site and they typically forget this.

Thanks!

[Luo Yang]

Hi jamesG-3,

I suggest you try use Views shortcode wpv-post-excerpt as the "only one paragraph of text",
put [wpv-post-body view_template="None"] in a hidden div,
create a custom javascript to toggle the post body, just for example below test site:
hidden link
user/pass: xgren/111111

Content template using:
hidden link

[jamesG-3]

Thanks for the idea - the links do not work however for me to check out the source. I have wrapped the body inside an [expand] shortcode and proceeded it with an [excerpt] now. The remaining challenge is how can I ensure that the excerpt shows just the first paragraph and the body skips the first paragraph?

Thanks again!

[Luo Yang]

It is possible within just Views + Jquery, without other plugins, see the demo page:
hidden link

Please make sure your first paragraph is wrap with HTML <p> tag,

in the content template using below code:
hidden link

<div class="postbody">[wpv-post-body view_template="None"]</a>

js code:

jQuery(document).ready(function($){
  	$('div.postbody p').hide();
  	$('div.postbody p').first().show();
  	$('div.postbody p').first().append('<a href="#" class="collapse-box">view more button ...</a>');
	$('a.collapse-box').on( "click", function( event ) {
		$('div.postbody p').toggle();
  		$('div.postbody p').first().show();
      	event.preventDefault();
	});
});

[jamesG-3]

Thanks! - where does the JS code actually go in this instance?

[Luo Yang]

in the content template, click "Open JS editor" button
hidden link

[jamesG-3]

Awesome - all working perfectly, thanks so much!!!!!