0

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>
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.
  • 1
    striclty speaking :gt(2) is a jQuery selector. CSS can't do that – Danny '365CSI' Engelman Jan 18 '17 at 11:02
  • Thank you very much @SebastianSchütze One more question: the :gt(2) leaves 3 lines of followed sites and everything else will be shown after the read more button was clicked. How to disable the show more button when the list doesn't contains more than 3 items? – Michael Mayr Jan 18 '17 at 20:11
  • @Danny'365CSI'Engelman you are right :). Sometimes I mix them up! – Sebastian Schütze Jan 18 '17 at 21:37
  • @MichaelMayr: see my edited answere. Look for the variable "size_li". This should do it, even though I didn't test it. But generally you should count the "li" in the list and hide the button with JS, when there are 3 or less items in the list. If u consider this answere correct, then please mark as the solution. :) thx – Sebastian Schütze Jan 18 '17 at 21:44
  • @Sebastian Schütze thank you for your help. I'm just trying to hide the show more show less buttons when the size of the list is smaller than 3 items. I've also tried the $("your-pure-css-selector").slice(index) but at the moment I didn't got it. But I'll try again. – Michael Mayr Jan 20 '17 at 15:13

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.