I am following script with show more button

Question

I'm just working with the "I am Following" script from Codeplex. One of the requests was to not show all the followed sites at once. So the best solution would be a "Show More" and a "Show Less" button to expand the list. I've tried several JQuery scripts but nothing worked fine for me. (for e.g. I've tried this one http://www.jqueryscript.net/other/jQuery-Plugin-For-Collapsible-Html-List-showmore-js.html)

Here's the source code without a "show more code":

<style>
    .classic #htmloutSite {
        padding-left: 10px;
    }

        .classic #htmloutSite a {
            background-repeat: no-repeat;
            background-position: 0% 50%;
            height: 16px;
            vertical-align: center;
            background-size: 16px 16px;
            display: block;
            text-indent: 20px;
            line-height: 16px;
            padding: 2px 2px 2px 2px;
        }

            .classic #htmloutSite a:hover {
                background-color: #ededed;
            }

        .classic #htmloutSite .link0 {
            background-repeat: no-repeat;
            background-position: 0% 50%;
            height: 32px;
            vertical-align: center;
            background-size: 32px 32px;
            display: block;
            text-indent: 40px;
            line-height: 32px;
        }

        .classic #htmloutSite h1 {
            margin-top: 12px;
            clear: both;
        }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/_layouts/15/sp.requestexecutor.js"></script>
<script>
    var ActorImg = new Array("/_layouts/15/images/person.gif",
                                "/_layouts/15/images/lg_ICGEN.gif",
                                "/_layouts/15/images/siteicon_16x16.png");

    function doJSON(RESTuri, success, fail) {
        var restUrl = _spPageContextInfo.webAbsoluteUrl + RESTuri;
        var executor = new SP.RequestExecutor(_spPageContextInfo.webAbsoluteUrl);
        executor.executeAsync({
            url: restUrl,
            method: "GET",
            headers: {
                "Accept": "application/json; odata=verbose"
            },
            success: success,
            error: fail
        });
    }

    function renderSuccess(data) {
        var jsonObject = JSON.parse(data.body);
        var n = document.getElementById('jsonout');
        n.innerHTML = data.body;
        var results = jsonObject.d.Followed.results;
        var str = '';
        var old = -1;
        var img = null;


        str += "<div class=\"SiteContainer\">";
        for (i = 0; i < results.length; i++) {

            img = results[i].ImageUri;
            if (img == null) img = ActorImg[results[i].ActorType];

            switch (results[i].ActorType) {
                case 0:
                    // Use case: depending on ActorType
                    // if you want to use indiviual markup for every item-type
                    str += "<a title=\"" + results[i].Name
                        + "\" class=\"link" + results[i].ActorType
                        + "\" style=\"background-image:url(" + img
                        + ")\" href=\"" + results[i].Uri
                        + "\">" + results[i].Name + "</a>";
                    break;
                default:
                    str += "<a title=\"" + results[i].Name
                        + "\" class=\"link" + results[i].ActorType
                        + "\" style=\"background-image:url(" + img
                        + ")\" href=\"" + results[i].Uri
                    + "\">" + results[i].Name + "</a>";
                    break;
            }

            old = results[i].ActorType;
        }
        str += "</div>";


        n = document.getElementById('htmloutSite');
        n.innerHTML = str + "<h1></h1>";
    }

    function renderFail(data, errorCode, errorMessage) {
        n = document.getElementById('htmloutSite');
        n.innerHTML = errorMessage;
    }

    doJSON("/_api/social.following/my/followed%28types=4%29",
            renderSuccess, renderFail);
</script>

<div class="classic">
    <pre id="jsonout" style="display:none;"></pre>
    <div id="htmloutSite"></div>
</div>

Answer 1

I just used your code and changed it to the following code. I changed the rendered HTML to a real unordered list and the buttons show and hide any item after the third site. I just did a simpel CSS3 "get all items greater than 2" selector.

hope that helps!

<style>
   .classic #htmloutSite {
       padding-left: 10px;
   }

    .classic #htmloutSite a {
        background-repeat: no-repeat;
        background-position: 0% 50%;
        height: 16px;
        vertical-align: center;
        background-size: 16px 16px;
        display: block;
        text-indent: 20px;
        line-height: 16px;
        padding: 2px 2px 2px 2px;
    }

        .classic #htmloutSite a:hover {
            background-color: #ededed;
        }

    .classic #htmloutSite .link0 {
        background-repeat: no-repeat;
        background-position: 0% 50%;
        height: 32px;
        vertical-align: center;
        background-size: 32px 32px;
        display: block;
        text-indent: 40px;
        line-height: 32px;
    }

    .classic #htmloutSite h1 {
        margin-top: 12px;
        clear: both;
    }
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="/_layouts/15/sp.requestexecutor.js"></script>

<script>

var ActorImg = new Array("/_layouts/15/images/person.gif",
                            "/_layouts/15/images/lg_ICGEN.gif",
                            "/_layouts/15/images/siteicon_16x16.png");

function doJSON(RESTuri, success, fail) {
    var restUrl = _spPageContextInfo.webAbsoluteUrl + RESTuri;
    var executor = new SP.RequestExecutor(_spPageContextInfo.webAbsoluteUrl);
    executor.executeAsync({
        url: restUrl,
        method: "GET",
        headers: {
            "Accept": "application/json; odata=verbose"
        },
        success: success,
        error: fail
    });
}

function renderSuccess(data) {
    var jsonObject = JSON.parse(data.body);
    var n = document.getElementById('jsonout');
    n.innerHTML = data.body;
    var results = jsonObject.d.Followed.results;
    var str = '';
    var old = -1;
    var img = null;


    str += '<ul id="siteList">';
    for (i = 0; i < results.length; i++) {

        img = results[i].ImageUri;
        if (img == null) img = ActorImg[results[i].ActorType];

        str += "<li>";

        switch (results[i].ActorType) {
            case 0:
                // Use case: depending on ActorType
                // if you want to use indiviual markup for every item-type
                str += "<a title=\"" + results[i].Name
                    + "\" class=\"link" + results[i].ActorType
                    + "\" style=\"background-image:url(" + img
                    + ")\" href=\"" + results[i].Uri
                    + "\">" + results[i].Name + "</a>";
                break;
            default:
                str += "<a title=\"" + results[i].Name
                    + "\" class=\"link" + results[i].ActorType
                    + "\" style=\"background-image:url(" + img
                    + ")\" href=\"" + results[i].Uri
                + "\">" + results[i].Name + "</a>";
                break;
        }

        str += "</li>";

        old = results[i].ActorType;
    }
    str += "</ul>";


    n = document.getElementById('htmloutSite');
    n.innerHTML = str;

    $(document).ready(function () {
        var size_li = $("#siteList li").size();
        $('#siteList li:gt(2)').hide();
        $('#showLess').hide();

        if(size_li <=3){
           $('#loadMore').hide()
        }else{
           $('#loadMore').click(function () {
               $('#siteList li:gt(2)').show();
               $('#showLess').show();
               $('#loadMore').hide();
           });
           $('#showLess').click(function () {
               $('#siteList li:gt(2)').hide();
               $('#loadMore').show();
               $('#showLess').hide();
           });
        }
    });
}

function renderFail(data, errorCode, errorMessage) {
    n = document.getElementById('htmloutSite');
    n.innerHTML = errorMessage;
}

doJSON("/_api/social.following/my/followed%28types=4%29",
        renderSuccess, renderFail);
</script>

<div class="classic">
   <pre id="jsonout" style="display:none;"></pre>
   <div id="htmloutSite"></div>
   <div id="loadMore">Load more</div>
   <div id="showLess">Show less</div>
</div>

Edit: This side states, that the jquery selectors gt/lt (and so on) can run into performance issues. Just that you know!

https://api.jquery.com/gt-selector/

Additional Notes:

• Because :gt() is a jQuery extension and not part of the CSS specification, queries using :gt() cannot take advantage of the performance boost provided by the native DOM querySelectorAll() method. For better performance in modern browsers, use $("your-pure-css-selector").slice(index) instead.