3

I am trying to create accordion based on the list. It work fine with publishing page with page layout but not working if it wiki page.

This is the step:

1. Add webpart and add the existing list.

2. Add script webpart and add the following code

<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js" type="text/javascript"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js" type="text/javascript"></script>

<script>
(function () {
   loadCss('http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css');
   function OnAccordionViewPostRender(renderCtx) {

     jQuery(function() {
         jQuery( "#accordionFAQ" ).accordion();
     });

   }



    function loadCss(url){
     var link = document.createElement('link');
     link.href = url;
     link.rel = 'stylesheet';
     document.getElementsByTagName('head')[0].appendChild(link);
   }


   function OnAccordionViewPreRender(renderCtx) {
   }

   function RenderAccordionViewBodyTemplate(renderCtx) {
         var listData = renderCtx.ListData;
         if (renderCtx.Templates.Body == '') {
             return RenderViewTemplate(renderCtx);
         }
         var accordionHtml ='';

         accordionHtml = '<div id="accordionFAQ">';
         for (var idx in listData.Row) {
                var listItem = listData.Row[idx];
                accordionHtml += '<h3>';
                accordionHtml += listItem.Title;
                accordionHtml += '</h3>';
                accordionHtml += '<div>';
                accordionHtml += listItem.BodyText;
                accordionHtml += '</div>';
         }

         accordionHtml += '</div>';


         return accordionHtml;
   }


     function _registerAccordionViewTemplate() {

            var accordionViewContext = {};

            //accordionViewContext.BaseViewID = 'Accordion';
            accordionViewContext.Templates = {};
            accordionViewContext.Templates.View = RenderAccordionViewBodyTemplate;
            accordionViewContext.OnPreRender = OnAccordionViewPreRender;
            accordionViewContext.OnPostRender = OnAccordionViewPostRender;
            SPClientTemplates.TemplateManager.RegisterTemplateOverrides(accordionViewContext);
        }
        ExecuteOrDelayUntilScriptLoaded(_registerAccordionViewTemplate, 'clienttemplates.js');

})();

</script>

I did tried to Add JS link in the webpart properties like the following but it is not working.

~sitecollection/SiteAssets/js/jquery-1.8.0.js|~sitecollection/SiteAssets/js/jquery-ui.js|~sitecollection/SiteAssets/js/accordion.js

Any advise?

  • You can try to use SPApptex which I developed with my friend, you can know more about it here: spapptex.com, you can download it for free and it comes with an accordion and other useful templates. – Mohamed Derhalli Dec 13 '16 at 1:07
  • What error is coming? – Trimantra Software Solution Dec 13 '16 at 4:01
  • no error, accordion does not work. – Supermode Dec 13 '16 at 4:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.