jQuery and SharePoint 2010

I have a Content Editor Web Part.  Within it I have a list with a [+] after each line and the jQuery to expand collapse the list items to make a bulleted list.  It works fine in Dreamweaver and in IE,  but when I paste it into the Editors html panel,  the list works but leaves a trail of what look like two columns of  colons when the list collapses.  

I haven't a clue as to why, but obviously this isn't good.  I will paste all the code below and hope someone can advise.  Thanks.

<head>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<style>
 .link li{cursor: pointer; } 
 .inner_div li {padding-top: 0.5em;}
  
li { 
 list-style-position: outside; 
 list-style-image:none; 
 font-size: 12px; 
 color: #000000; 
 } 

.inner_div li { 
 list-style-position: outside; 
 list-style-image:none; 
 font-size: 12px; 
 color: #000000; 
 } 
 
 .expanC { 
 list-style-type: none;
 list-style-position: outside; 
 list-style-image:none; 
 font-size: 17px; 
 color: #000000;
 } 

 
</style>

<script>
$(document).ready(function(){
    $('.link ul').hide();
    $('.link li').click(function () {
       ($('span', this).text() == '[+]') ? $('span', this).html('[-]') : $('span', this).html('[+]');
       $('> ul', this).slideToggle();
       $(this).parent().siblings().find('ul').slideUp();
       $(this).parent().siblings().find('span').html('[+]');
    });

});

</script>
</head>


<body>

<div class="mydiv" style=" border-width:medium; height:182px; width:650px;">

 <ul class="Link">

<li class="expanC"><strong>Basic Tips on Navigating the Employee Handbook</strong> </li>
<li style="list-style-type: none;"><BR></li> 

 <ul class="link">
  <li class="expan">Top to bottom<span>[+]</span>

     <ul class="inner_div">
        <li><a>You can always get back to the very top or bottom of the handbook by using your keyboard Home or End keys.</a>
        </li>
    </ul>
     </li>
  </ul>
  
<ul class="link">
<li class="expan">One page at a time<span>[+]</span>

    <ul class="inner_div">
        <li><a>Using your PageUp and PageDown keys, you can scroll through the handbook page by page.</a>
        </li>
        <li><a>Tip! The amount of text you will see depends on the size of your computer screen, if your window is maximized, and the magnification % of the document itself.</a>
        </li>
    </ul>
  </li>
</ul>

<ul class="link">
 <li class="expan">Jump right to it<span>[+]</span>

    <ul class="inner_div">
        <li><a>You can quickly get to a specific topic by clicking on the topic heading in the table of contents.</a>
        </li>
        <li><a>Tip! With 2 easy moves you can go right to the chapter you need.<br />
1.	Press the Home button to get to the table of contents. <br />
2.	Click on the chapter you want to jump to.
</a>
        </li>
    </ul>    
  </li>
</ul>

<ul class="link">
<li class="expan">Thumbnail navigation<span>[+]</span>
    <ul class="inner_div">
        <li><a>Find a page by scrolling the thumbnails to the left of the handbook window.</a>
        </li>
        <li><a>Open the thumbnail view by clicking the thumbnail icon</a>
        </li>
        <li><a>o	Scroll to find the page you want, and click it!</a>
        </li>
    </ul>
  </li>
</ul>

<ul class="link">
<li class="expan">Find the exact word or phrase you need<span>[+]</span>

    <ul class="inner_div">
        <li><a>To open the word/phrase search view simply click the binoculars icon to the left of the document  <br />
1.	Enter the word or phrase you are looking. <br />
2.	Select the context of the search using the check boxes below the search field. <br/>
3.	Click the search button. </br>
4.  Scroll the list of search results and click the one you want to see.
</a>
        </li>
    </ul>    
  </li>
</ul>

</li>
</ul>

</div>

</body>

Open in new window

LVL 1
Howard BashSenior Software EngineerAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
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.

Howard BashSenior Software EngineerAuthor Commented:
As an update,  the above works fine and dandy in Chrome and appears to only misbehave in IE.
0
Rainer JeschorCommented:
Hi,
hm - hard to say - but I would first advise you to put the content of the content editor web part into a dedicated text file, upload this to a library in SharePoint (e.g. site assets) and reference that from the content editor web part.
Makes updates more easier and minimizes effects of the content editor to start converting/replacing content ...

Second you should upload the jQuery file to SharePoint as well and reference that instead of the Google CDN.

Third you should not use "$" in SharePoint 2010 as it might be overwritten with another context - instead please use "jQuery".

Fourth please use the builtin spbodyonloadfunctionnames array to add your function code
instead of using document.ready event (means create a function with no parameter, move the complete code from the document.ready function into this new function and simply add your new function to the spbodyonloadfunctionnames) - see:
http://www.stephanrocks.com/2011/10/05/_spbodyonloadfunctionnames-in-sharepoint-vs-jquerys-document-ready/

My question now is: do you really have head and body tags inside your content editor web part? That does never ever make any sense as the content editor is not like an iframe having a separate DOM - instead it renders its content directly into the page - hence additional head and body tags will definitely break a valid DOM - which can cause issues in various browsers.

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
Howard BashSenior Software EngineerAuthor Commented:
I will look at your suggestions hopefully today.  Regarding the head tag,  how should I embed the style sheet instead?

Thanks.
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
JavaScript

From novice to tech pro — start learning today.