Hide and Show Columns in SharePoint List using Jquery

When you have lot of columns in a SharePoint it is really problematic to browse and it runs across the all browser. SharePoint doesn’t provide a way hiding and displaying the columns. The new functionality available in SharePoint online isn’t that user friendly.

However looks like if you are familiar to the list table structure and j query it isn’t that hard to implement. In this article we will investigate the structure of a list with many columns and how to add a hide and show functionality.

List with columns that don’t fit the screen


As seen in above image we have lot of columns and you might have seen more. In this situation lot of time it will be hard for a user to navigate depending upon what device you are using to browse. You can say create a view for each but that does require little more work and doesn’t really look as conveinent as the solutions we are looking to implement.

Let’s say what if we have a button which when clicked display the columns and when clicked hide the columns. So you are displaying all the columns but on demand.

So the idea is first to hide the columns depending on how many you want to display and then showing those columns with a help of a button in the page and again hide with the help of another button.

So let’s look at the source of the list structure let’s start with the header first

Image displaying the List Class Name
List header html structure

Seen in the above image is the list view page which have the hide and show already implemented. If you look at carefully there is <th> elements hidden from one place and also we added a <th id=”thmore“> which will work as a button for us to display the hidden table headers and table columns. In the above picture, we focused on the list class called ms-listviewtable and we drill down to find the children of tr and th to find the required number of headers to display. Once we find the right number then we hide everything beyond that and add out custom header with a button. That button will be used to show and hide the headers and the content for the respective header. Now we investigated the header let’s look at the content or the list item value rows.

Now lets look at eh list data row and column structure

Columns displaying the data for list

As seen in above image we are hiding the list columns after certain td. So the trick is to find the number of tds that goes along with the number of th and hide the rest.

Once we figured out the th and tr combination we write the following code in a script editor webpart. Edit the list view page and add the script view webpart and add the follwoing script

$(document).ready(function () {
$( ".ms-listviewtable thead tr th:gt(7)" ).css( "display", "none" );
$("td.ms-cellstyle:nth-child(n+9)").css("display","none");
$( ".ms-listviewtable thead tr th:nth-child(8)" ).after("<th id=thmore class=ms-vh2><div id=more>See More</div><th>")
});
$(document).on('click', '#more', function(){
$( ".ms-listviewtable thead tr th:gt(7)" ).show();
$("td.ms-cellstyle:nth-child(n+9)").show();
$( ".ms-listviewtable thead tr th:last-child" ).after("<th id=thless class=ms-vh2><div id=less>See Less</div><th>");
$("#thmore").next("th").remove();
$("#thmore").remove();
});
$(document).on('click', '#less', function(){
$( ".ms-listviewtable thead tr th:gt(7)" ).hide();
$("td.ms-cellstyle:nth-child(n+9)").hide();
$( ".ms-listviewtable thead tr th:nth-child(8)" ).after("<th id=thmore class=ms-vh2><div id=more>See More</div><th>");
$("#thless").remove();
});

Once you put this code and save the page then you should see a see more at the end of the column header and when you click on it it will display all the columns with data. It also displays another button called see less which when clicked will hide the columns and headers that goes back to the default mode.

As seen in the code you can determine the number of columns you want to display in the code it displayed up to 7 th header and 9th data columns whereas it may be different in your list. So investigate your list structure and determine the number required for you.

Here is an image displaying the whole list

Alll the columns displayed with See Less button

Once you click on the see less then it should display the default with see more option.

Default list view with hidden columns

I have used this code in SharePoint 2013 and SharePoint online (Classic Mode Only)

Give it a try and do let me know if it helps

Happy Share Pointing. 🙂

Advertisements

Leave a Reply

Your email address will not be published. Required fields are marked *