I'm looking for some ideas on how to format the query from a list. The basic premise is that we have a list of projects and each of those projects has their own page that is based on the following columns:

enter image description here

Currently I am manually entering these into a tabbed script editor web part like so:

enter image description here

What I would like to do is get this content to upload to a tabbed webpart dynamically. I figure what better way to do that than with a CQWP and HillBillyTabs like so:

enter image description here

However, as you can see the CQWPs don't take in the item's text as if it were code.

Is there a way to edit the display format such that I can get things in bullet points?

Should I be going about this a different way?

1 Answer 1


Add a Script Editor Web Part on the page where your content query resides with the following code in it:

<link rel="stylesheet"

<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
$(function() {
var tabCount = 0;
$(".dfwp-item div.groupheader").each(function() {
$("#tabs ul").append("<li><a href='#tabs-"+tabCount+"'>" + $(this).text

$("#tabs").append("<div id='tabs-"+tabCount+"'>"+"<p>"+$(this).parent

tabCount = tabCount+1;

<div id="tabs">

You can get reference from below link.

Quickly turning your Content Query Web Part display into a jQuery tabs

  • I am happy that it works for you. So can you upvote the answer for the sake of my reputation as others will also get the benefit of this answer?
    – Hardik
    May 25, 2016 at 19:36
  • easier way to do it was to edit itemStyles.xsl to allow for rich text May 31, 2016 at 14:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.