Show the Read more link in the list view webpart using Client side Rendering

Question

Hi,
I have a share point list name as Team.It contains two columns like Role(single line of text) and Name( people and picker).
I want the display the list view webpart like below format using JS Link/Client side rendering concept.
If list contains more than 3 items (display like this)
>TeamMemberName1
>TeamMemberName2
>TeamMemberName3
Readmore... (Read more link should expand all the team members)
If list contains more than 3 items (display like this)
>TeamMemberName1
>TeamMemberName2
>TeamMemberName3
Could you please provide the code.It is very urgent for me.
Thanks for the help!!!

Answer 1

(function () {
    debugger;
    //Create our Namespace object to avoid polluting the global namespace
    var pfh = pfh || {};
    //Define our Header Render pattern
    pfh.renderHeader = function (ctx) {
        var headerHTML = "<ul>";
        return headerHTML;
    pfh.renderFooter = function (ctx) {
        //Define any footer content here.
        var footerHTML = "</ul>";
        return footerHTML;
    pfh.CustomItem = function (ctx) {
        var itemHTML = "<li>" + ctx.CurrentItem.TeamMemberName[0].title; + "</li>";
        return itemHTML;
    //Define any code/function that needs to be run AFTER the page has been completed and the DOM is complete.
    pfh.PostRenderCallback = function (ctx) {
    //Define the function that will register our Override with SharePoint.
    pfh.RegisterTemplateOverride = function () {
        var overrideCtx = {};
        overrideCtx.Templates = {};
        overrideCtx.Templates.Header = pfh.renderHeader;
        overrideCtx.Templates.Footer = pfh.renderFooter;
        overrideCtx.Templates.Item = pfh.CustomItem;
        overrideCtx.onPostRender = [pfh.PostRenderCallback(ctx)];
        overrideCtx.BaseViewID = 98; //Note: We're using BaseView ID 99 to match our override below
        overrideCtx.ListTemplateType = 100;
        SPClientTemplates.TemplateManager.RegisterTemplateOverrides(overrideCtx);
    //Now we load in our override to ensure that this Override is only applied to the intended ListView
    ExecuteOrDelayUntilScriptLoaded(function () {
        var OldRenderListView = RenderListView;
        RenderListView = function (ctx, webPartID) {
            if (ctx.ListTitle == "Test") {
                ctx.BaseViewID = 98;
            OldRenderListView(ctx, webPartID)
    }, 'ClientTemplates.js');
    //Register for MDS enabled site otherwise the display template doesn't work on refresh
    //Note: The ~sitecollection tokens cannot be used here!
    RegisterModuleInit("/_catalogs/masterpage/Display Templates/csr_ovr_RenderListTemplate_Fixed.js", pfh.RegisterTemplateOverride); // CSR-override for MDS enabled site
    pfh.RegisterTemplateOverride(); //CSR-override for MDS disabled site (because we need to call the entry point function in this case whereas it is not needed for anonymous functions)
I am using the above script to render the items.
I am new to the CSR.
Where do i need to include your script in my script.
Please help on this.
Thank you for reply sagar.
Please note that i am not using content search webpart.