SharePoint 2010 Accordion for Webparts

Hi All
I have a web part page with 4 web parts on that page.  I am trying to add a content editor webpart with some jquery using the accordion UI offered on jquery UI to wrap up the 4 web parts into an accordion.

I have this code here which works in 2013 but it is not working in 2010, I have tried a few things but I just cannot seem to get it to work --  Thank you in advance to whoever can get it to go :)

<link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
 
<script type="text/javascript">
     jQuery(document).ready(function($) {
         //Add the Web part titles for the webparts that should be displayed in the accordion
        SharePointAccordian(["Documents","Pages"]);
    });
   
    function SharePointAccordian(webPartTitles)
    {
   
        for(index in webPartTitles)
        {
            var title = webPartTitles[index];
           
            $("#accordian").append('<h3>'+title+'</h3>');
            $("h2.ms-webpart-titleText span:contains('"+title+"')").each(function(){
                                                               
                if ($(this).text() == title){
                                var outerDiv = $('<div></div>');
                                var outerP = $('<p></p>');
                    var innerItem = $(this).closest("span").hide().closest("[id^='MSOZoneCell_WebPart']").contents();
                    outerP.append(innerItem);
                    outerDiv.append(outerP);
                                                                                $("#accordian").append(outerDiv);
                }
            });
        }
       $("#accordian").accordion({ heightStyle: "content" });
    }
 
 
</script>
<div id="accordian"></div>
CharlieMShanksAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Rainer JeschorCommented:
Hi,
which SharePoint edition?
What type of page (web part zones) and what type of web parts (the four on your page) have you added?
I just want to reproduce the behavior.
Thanks.
Rainer
0
Rainer JeschorCommented:
Hi,
the following code works on my SharePoint 2010 Server.
I used a "normal" wiki page and added two list view web parts (Documents and Pages) and one Content Editor web part. The code is saved into a text file, this file is uploaded to a document library on that site and then this file is being referenced by the content editor web part.

<link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
 
<script type="text/javascript">
[b]_spBodyOnLoadFunctionNames.push("InitAccordion");

function InitAccordion() {
	SharePointAccordian(["Documents","Pages"]);
}[/b]
   
function SharePointAccordian(webPartTitles) {

	for(index in webPartTitles) {
		var title = webPartTitles[index];
           
		[b]jQuery[/b]("#accordian").append('<h3>'+title+'</h3>');
		[b]jQuery[/b]("[b]h3.ms-WPTitle[/b] span:contains('"+title+"')").each(function(){
			if ($(this).text() == title){
				var outerDiv = $('<div></div>');
				var outerP = $('<p></p>');
				var innerItem = $(this).closest("span").hide().closest("[id^='MSOZoneCell_WebPart']").contents();
				outerP.append(innerItem);
				outerDiv.append(outerP);
				jQuery("#accordian").append(outerDiv);
                }
            });
        }
       [b]jQuery[/b]("#accordian").accordion({ heightStyle: "content" });
}

</script>
<div id="accordian"></div>

Open in new window


Changes to your code:
1. Web Part Selector
SP2010 seems to construct the web part title dom in a different way - therefore this is the correct selector:
jQuery("h3.ms-WPTitle span:contains('"+title+"')").each(function(){

2. Use built-in function to push custom function to document.ready event
Instead of using the jQuery.document.ready use the built-on function spBodyOnLoadFunctionNames
and wrap the original code into an additional function.

3. Do not use the jQuery alias "$"
Try to avoid the usage of the jQuery alias "$" and instead use "jQuery" alias because SharePoint does on some pages/functionalities create its own "$" alias.

HTH
Rainer
0
CharlieMShanksAuthor Commented:
Thank you for your help.  I have just tried to get this going using the script provided.  I have created a normal page - just has one full width webpart zone.  I have added two webparts called tasks and links, and a third which is the content editor webpart.  I have added the script in the following ways none of which have worked - added as a link to a text file to the content editor, added directly to the content editor and added as a link to a js file.
Unfortunately I don't get anything happening,
0
Newly released Acronis True Image 2019

In announcing the release of the 15th Anniversary Edition of Acronis True Image 2019, the company revealed that its artificial intelligence-based anti-ransomware technology – stopped more than 200,000 ransomware attacks on 150,000 customers last year.

Rainer JeschorCommented:
Hi,
two comments:
- Please check the provided javascript - it seems that this one does not support hightlighting therefore there are a couple of occurencies of and - please remove them.

Second you will have to adjust the call to function
SharePointAccordian(...);
to have an array of exact values (like ["Links","Tasks"])

To "debug" you might either try to use IEDevTools (F12) and add a breakpoint the the function SharePointAccordian or you simply add various Javascript alerts to see how far and where the code is run.

Here an adjusted version (for Lists with a title of "Tasks" and "Links"):
<link  type="text/css" rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/themes/start/jquery-ui.css" />
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
 
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push("InitAccordion");

function InitAccordion() {
	SharePointAccordian(["Documents","Pages"]);
}
   
function SharePointAccordian(webPartTitles) {

	for(index in webPartTitles) {
		var title = webPartTitles[index];
           
		jQuery("#accordian").append('<h3>'+title+'</h3>');
		jQuery("h3.ms-WPTitle span:contains('"+title+"')").each(function(){
			if ($(this).text() == title){
				var outerDiv = $('<div></div>');
				var outerP = $('<p></p>');
				var innerItem = $(this).closest("span").hide().closest("[id^='MSOZoneCell_WebPart']").contents();
				outerP.append(innerItem);
				outerDiv.append(outerP);
				jQuery("#accordian").append(outerDiv);
                }
            });
        }
       jQuery("#accordian").accordion({ heightStyle: "content" });
}

</script>
<div id="accordian"></div>

Open in new window


HTH
Rainer
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
CharlieMShanksAuthor Commented:
Hi, that has worked it was doing a bunch of foreign characters to the script editor.  Thank you very much!!
0
CharlieMShanksAuthor Commented:
Thank you :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Microsoft SharePoint

From novice to tech pro — start learning today.