Manual code method to set WordPress click expand and shrink content to be visible

Have we seen that some websites have long articles that can be displayed by hiding and shrinking to improve the experience? If the user wants to read more, they can click to expand. Some WordPress themes come with them, but some do not come with them and we can set them up ourselves. How to set them up? Here, Maizi has compiled several methods for everyone to choose and use for reference.

First, JS code part

jQuery(document).ready(
function(jQuery){
jQuery('.collapseButton').click(function(){
jQuery(this).parent().parent().find('.xContent').slideToggle('slow');
});
});

We can put the JS code into a JS file as needed, or we can make a separate JS file and later reference it in HEAD.

Second, function code

/* Expand and collapse functions */

function xcollapse($atts, $content = null){
extract(shortcode_atts(array("title"=>""),$atts));
return '

 

 '.$title.'
 Expand/Collapse
 

 
 
'.$content.'
 
';
}
add_shortcode('collapse', 'xcollapse');

In this way, we can add the code to functions.php.

Third, how to implement the function

[collapse title="title"]Content that needs to be clicked to expand[/collapse]

In this way, we can throw the content that needs to be hidden and displayed into the corresponding tags.

Recommended site searches: US host purchase, foreign servers, Korean virtual host cloud server vps, US unlimited content host, registered domain name, multi-IP station group server, filing information query, domain name registration network, Changsha server,