Tabs / Layers within SharePoint Wiki page

Posted on 2010-11-16
Last Modified: 2012-05-10
I have a site page that I want to add tabbed sections to but for some reason I am not able to get it to save the javascript and css needed to make this happen.  Is there a way to link to js and css files from within a wiki page and how would I go about adding custom code to a wiki page without it overwriting when I save the source?

If you know of an easier way to provide a tabbed user interface for my users I would be interested also.  I have looked at EasyTab but it seems to only work on web part pages and I would rather use wiki pages if possible.  

Below is a link to the script/css I like for now if helps since this is what I would like to use within the page:
Question by:JoMar
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 3
LVL 15

Expert Comment

ID: 34154307
What version of SharePoint you are using? In 2007 you are able to add a web part to a wiki page - simply click on the "Edit page" in the site actions menu. What do you mean by "I;m not able to get it to save"? Where do you input the javascript and CSS? On the wiki content? Did you try using the SharePoint designer?

One thing you need to remember is that changes you do with SPD or browser affect only current Wiki Page, not all pages. Each wiki page has it's own web part page. If you would like to modify all wiki pages you would need to modify the page in the 12 hive.
LVL 21

Expert Comment

ID: 34155243
When you are working with SharePoint Wiki pages, you cannot add JS to the "wiki" content itself.  However, when you are on the Wiki page, instead of hitting Edit to edit the Wiki content, goto Site Actions > Edit Page.  Each Wiki page is actually a web part page.  You can add a Content Editor Web Part to the page and edit the source of the CEWP to add your JS, CSS, and other markup.

Author Comment

ID: 34156153
We are on SharePoint 2010.  When I added the CEWP did not seem to work but I will try again and verify what I am seeing but seemed that the content really only affected the part and would not show for the other content on the wiki page.  When I edit the source of the wiki page my css or javascript is removed or things like the following are added to it so that it will not function:

.ExternalClassE188A71C513045AABFD0FD5E9F7522B3 H2 {
      PADDING-BOTTOM: 20px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; FONT: bold 14px Verdana, Arial, Helvetica, sans-serif; COLOR: #000; PADDING-TOP: 0px

The bold section is added to every line of the <style> tag added.  

My main goal is being able to use the code from the below link to provide tabs on the page to divide up some of the content for the users.  I would rather not use web part pages if I dont have to but if that is the only option may not have a choice.  Know I am missing something simple and any help is appreciated.  

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!


Author Comment

ID: 34156166

Author Comment

ID: 34164646
Any ideas on this?
LVL 15

Expert Comment

ID: 34167911
Sharepoint 2010 tends to modify the HTML - adds unique identifiers and so on. I would recommend  using the SharePoint Designer - it'll give you more control.

Author Comment

ID: 34174432
Unfortunatly when using SPD it does similar to any CSS or JavaScript added within the content area.  My only idea would be having to create a custom master page just for this site even though it does not affect the over all look.

Author Comment

ID: 34183914
Is there a way to attach css or js files to the page w/out editing the master page?  
LVL 15

Accepted Solution

dp_expert earned 500 total points
ID: 34186002
Yes - do not add the HTML into a web part - add your code outside the Web Part zones. You can also detach the page from master page and edit entire page content.

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
SharePoint 2013 search webpart - query suggestions 5 84
SharePoint 2013 URL Duplication Issue 5 67
SharePoint 2013 List Content Type 3 45
Sharepoint 2016 LDAP connection 22 92
If you create your solutions on SharePoint sooner or later you will come upon a request to set  permissions of the item depending on some of the item's meta-data - the author, people assigned as approvers, divisions, categories etc. The most natu…
I used to be SharePoint evangelist in our company, so my Outlook always full of questions about how to do this, or where I can find that. One day I found such an email with the following question: "how to attach 3-State workflow (one of the workflow…
With Secure Portal Encryption, the recipient is sent a link to their email address directing them to the email laundry delivery page. From there, the recipient will be required to enter a user name and password to enter the page. Once the recipient …
A short tutorial showing how to set up an email signature in Outlook on the Web (previously known as OWA). For free email signatures designs, visit If you want to manage em…

752 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question