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?
 
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
 
Howard BashSenior Software EngineerAuthor Commented:
As an update,  the above works fine and dandy in Chrome and appears to only misbehave in IE.
0
 
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.