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>