Expand-Collapse for Multiline Text columns in SharePoint
Sometimes, when working with the Multiline fields, they may occupy the whole page :-).
We can solve this issue by introducing Expand-Collapse Trick with jQuery. On clicking on the little Arrow that row will be expanded, then again clicking will collapse.
Here is How: Add the CEWP webpart and place the below code, then hide the web part.
<script type="text/javascript">
if(typeof jQuery=='undefined'){
var jQPath = 'https://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'
document.write('<script src="',jQPath,'" type="text/javascript"><\/script>');
}
</script>
<script type="text/javascript">
function ExpGroupRenderData(htmlToRender, groupName, isLoaded) {
$("#tbod"+groupName+"_").attr("isloaded",isLoaded)
.html(htmlToRender)
.show("fast",collapseText("#tbod"+groupName+"_"));
}
function collapseText(group){
if (!group) group = "#MSO_ContentTable";
var html ="<img alt='collapseText' style='cursor:pointer;' src='/_layouts/images/menudark.gif'/>";
$(group+" td.ms-vb2>div").each(function(i,e){
$(e).css({display:"inline-block"});
if (e.clientHeight > 35){
$(e).toggleClass("collapseText")
.prepend(html);
}
});
$(group+" img[alt='collapseText']").click(function(event){
$(event.target).parent().toggleClass("collapseText");
});
}
$(function() {
collapseText();
});
</script>
<style type="text/css">
.expandText {height:auto;}
.collapseText {height:28px;overflow:hidden}
.ms-vb{
vertical-align: middle
}
.ms-vb2{
vertical-align: middle;
}
.ms-vh2-nograd
{
text-align: center;
}
</style>
Another way:
Codeplex project: https://spcollapser.codeplex.com/, You can download the JS file from here
Has this been looked at lately? I am attempting to do this in SP 2013 but am running into the same issues as Steve and Anon.
please let me know Expand-Collapse for Multiline Text columns in Sharepoint works in SharePoint 2013, i am trying it but i cannot able to make it work, what i am missing? please let me know.
I like the simplicity of this solution, but just can’t get it to work with SP2013. I’ve raised a thread https://sharepoint.stackexchange.com/questions/148639/sharepoint-collapse-list, so if you have any suggestions, please help!
Is there a new way to do this? Nothing happens when I add it to my page.
Awesome Code .. Works like charm !!!
I have tried this one in sharepoint 2010, after changing the path to a local jQuery + changing the path to some local copy of menudark.gif
still not working for me.
can you please assist?
Naama,
When you said “local” copy, Is that file from 14 hive?
this does not work well with grouping. If grouping is set to auto-expand, this script forces it to auto-collapse. if user then selects expand grouping but then tries to click to go onto a new page this script forces the group to auto-collapse again… 🙁
when grouping is added onto a list, this script always forces the list group to be collapsed. So for every page change it collapses the grouping by default regardless if grouping is set to auto-expand by default