6

I would like to have a text, which is expandable (hyperlink) for users when they need it.

I've added two pictures to describe what I've planned:

1. Before Clicking

enter image description here

2. After Clicking

enter image description here

Can it be simply realized within a Content Editor Web Part?

I'm not an expert with jQuery, so if u have any jQuery solution it would be kind to explain me the actions of the code.

  • It looks like a job for jQuery to me. Let me find some links for you – Nullldata May 25 '16 at 8:18
3

As @Red posted it is working. I placed to Content Editor Webparts into a page and in the first I placed the HTML Code as this:

<div class="row">
<div class="img">
    <a href="https://www.afrait.com"><img src="afraIT_LogoOnly128.png" alt="" /></a>
</div>
<div class="desc">
    <h2><a href="https://afrait.com/">afraIT</a></h2>
    <p class="excerpt">Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin vel ante a orci tempus eleifend ut et magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus luctus urna sed urna.</p>
</div>
<div class="clear"></div>

and in the second one above this:

<script type="text/javascript" src="/_catalogs/masterpage/js/jquery-1.8.3.min.js"></script>
<script>
$(function () {

    // Grab all the excerpt class
    $('.excerpt').each(function () {

        // Run formatWord function and specify the length of words display to viewer
        $(this).html(formatWords($(this).html(), 30));

        // Hide the extra words
        $(this).children('span').hide();

    // Apply click event to read more link
    }).click(function () {

        // Grab the hidden span and anchor
        var more_text = $(this).children('span.more_text');
        var more_link = $(this).children('a.more_link');

        // Toggle visibility using hasClass
        // I know you can use is(':visible') but it doesn't work in IE8 somehow...
        if (more_text.hasClass('hide')) {
            more_text.show();
            more_link.html(' &raquo; hide');        
            more_text.removeClass('hide');
        } else {
            more_text.hide();
            more_link.html(' &laquo; more');            
            more_text.addClass('hide');
        }

        return false;

    });
});

// Accept a paragraph and return a formatted paragraph with additional html tags
function formatWords(sentence, show) {

    // split all the words and store it in an array
    var words = sentence.split(' ');
    var new_sentence = '';

    // loop through each word
    for (i = 0; i < words.length; i++) {

        // process words that will visible to viewer
        if (i <= show) {
            new_sentence += words[i] + ' ';

        // process the rest of the words
        } else {

            // add a span at start
            if (i == (show + 1)) new_sentence += '... <span class="more_text hide">';       

            new_sentence += words[i] + ' ';

            // close the span tag and add read more link in the very end
            if (words[i+1] == null) new_sentence += '</span><a href="#" class="more_link">Read more</a>';
        }       
    } 

    return new_sentence;

}   
</script>

The output is this:

enter image description here

And after clicking "more" I get this:

enter image description here

Make sure the line:

if (words[i+1] == null) new_sentence += '</span><a href="#" class="more_link">Read more</a>';

is correct and you have to include the jquery.

Also you can change the length in this line:

// Run formatWord function and specify the length of words display to viewer
$(this).html(formatWords($(this).html(), 30));
  • Thanks for your detailed description. I've made it exactly how u described it, but my result unfortunately doesn't look like yours. I can see the complete text without any hidden parts. Are u using SharePoint 2013 as well? – SteffPoint May 30 '16 at 7:18
  • I tried it now also with the script editor and it is working. Please take a look into the developer tools (F12). If jquery isn't loaded it won't work. I use the jquery-1.8.3.min.js – Patrick May 30 '16 at 7:34
  • Also try the approach to add the javascript editor first and after that the HTML Content Editor. I sometimes had the problem, that the content in the CEWP was modified after adding a second CEWP with jquery. – Patrick May 30 '16 at 7:50
  • I've added JS first and then HTML and still have same problem. F12 delivers me following error: Uncaught ReferenceError: $ is not defined – SteffPoint May 30 '16 at 8:09
  • "$ is not defined" is the missing jquery error. Please make sure your "jquery-1.8.3.min.js" is loaded. You can save that file for testing purpose into the pages SiteAssets and then get the url from there and place it into the script. Please see the first line of the the script. – Patrick May 30 '16 at 8:11
2

Yes, it can be done in the Content Editor Webpart check this step by step tutorial http://www.queness.com/post/5368/quick-and-easy-jquery-read-more-script-tutorial

  • Please include the relevant parts of the contents of your linked page in your answer in case in the future the link goes dead. – Submits May 25 '16 at 8:13
  • I've tried it with the posted code, but somehow it doesn't work for me. – SteffPoint May 30 '16 at 6:19
1

It looks like a similar question has been asked before :

Expand collapse text on a Wiki page

One answer there states :

I think you can make it happen using jQuery:

Whatever element you want to expand/collapse needs to have a display:none; in its CSS style. Let's say you have a DIV:

  1. Now its style should have the display:none in it:
#myDiv { display:none; }
  1. Using jQuery you can right [sic] a simple click event function
$("#myDiv").click(function() {
var isHidden = $("#myDiv:hidden");
if (isHidden) {
$("#myDiv").show();
}
else {
$("#myDiv").hide();
}
});

At this point, that is all you need to show/hide the div.

You can easily add animation to it by simply adding one word:

$("#myDiv").show("slow");

Please note, I did not write this myself.

  • Could you please gimme an example? Because I somehow can't make it :( If your example would include "Text Text Text read more..." and then shows a further text when clicking it, it would be perfect. – SteffPoint May 25 '16 at 12:04
  • Sorry, I can't. I just searched for a solution for you. I don't know jquery personally. – Nullldata May 28 '16 at 10:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.