Bootstrap tabs and content

 We will soon be moving from SP 2010 to SP 2013 for our Intranet. I am just looking into using Bootstrap and messing around with a few things. I added  a content editor web part and then added the bootstrap info to create three tabs. I see how to add text content for each tab but is it possible to add other information too? For example  I would like three  tabs. One would show a blog, second one would show a market place blog, third would show news or newsfeed.

So basically when one tab is clicked the information is viewed within the web part and each tab does the same thing without actually moving away from the home page. I hope this even makes sense.

Thank you in advance for any help offered.

April 17th, 2015 12:23am

Hi,

According to your description, my understanding is that you want to add three tags which are clicked to display corresponding information.

Here is a demo with bootstrap for your reference:

http://jsfiddle.net/arunpjohny/CzxJR/

If the blogs and news you want to display are stored in SharePoint site, using JavaScript client object model is a good option to retrieve data from it. The data you retrieved should be inserted into the corresponding <div>, which in the demo is the place of Content inside tab A.

Bests Regards,

Dean Wang

Free Windows Admin Tool Kit Click here and download it now
April 20th, 2015 9:22pm

Thank you very much for your answer,

Yes that is what I am trying to do. I can get the tabs working and add text ext but not sure how I would add just the blog posts into one tab. I have to use a content query webpart to pull the posts normally so not sure I can do it this way.

I am wondering if SharePoint Easy Tabs will work better for me. I have to figure that out.

Thank you again.

April 21st, 2015 3:26pm

Hi SarahShay,

You could use JavaScript client object model to retrieve blog posts. You could use the getItemById(id) function to return a single item, or use the getItems(query) function to return multiple items.

An official documentation:

https://msdn.microsoft.com/en-us/library/office/hh185007(v=office.14).aspx

A similar post:

http://blogs.msdn.com/b/sharepointdev/archive/2011/07/19/working-with-the-ecmascript-client-object-model-jsom-in-sharepoint-2010-part-3-nikhil-sachdeva.aspx

Best Regards,

Dean Wang

Free Windows Admin Tool Kit Click here and download it now
April 22nd, 2015 3:25am

This topic is archived. No further replies will be accepted.

Other recent topics Other recent topics