Javascript very simple: ‘Read more’…’ Show Less’ Functionality to be applied to WordPress?

1 Views

I come here as a last resort for what I hope will be a quick and simply fix.

I have been playing around with some Javascript to create a ‘Read more…’ & ‘… Read Less’ function on 6 different sections of the same page.

Read More

I have a body of text, I only want the first line to show of. The rest will be displayed upon clicking ‘Read More…’

The below snippet shows that the code itself is working, however I am having a lot of trouble trying to actually apply this to my site / theme. Any attempts to apply this to the functions.php file. 

$(".more").toggle(function () {
    $(this).text("less..").siblings(".complete").show();
}, function () {
    $(this).text("more..").siblings(".complete").hide();
});
.complete {
    display:none;
}
.more {
    color:navy;
    cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<span class="teaser">text goes here</span>

<span class="complete"> this is the 
complete text being shown</span>

<span class="more">more...</span>

The problem I am getting is, everytime I try to apply this to my functions.php, it creates an error that brings down my whole site.

Does anyone have any ideas what it is I’m doing wrong? Or how the best way to apply this to a wordpress theme would be?

The theme I’m using is Modernize.

Any help with this at all, will be great.

Many thanks in advance.

Post Views: 1

Related posts

Leave a Reply

1 comment

  1. try adding the above snippet to a js located in your assets folder, then in your functions.php file add a reference to this file using the wp_register_script(), wp_enqueue_script() and add_action() functions

    function my_enqueued_scripts()
{

global $post;
// Register file that contains your js 
wp_register_script('myscript', get_template_directory_uri() . '/assets /js/myscript.js');

if (isset($post)) {
    //load it when needed depending on the page -template-home.php
    if (is_page_template('template-home.php')) {
        wp_enqueue_script('myscript');
    }
}
}

    then call your function

    add_action('wp_enqueue_scripts', 'my_enqueued_scripts', 10);