Formatting CQWP inside Tabbed View

Question

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:

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

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:

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?

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"

href="https://code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<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>
<script>
$(function() {
var tabCount = 0;
$(".dfwp-item div.groupheader").each(function() {
$("#tabs ul").append("<li><a href='#tabs-"+tabCount+"'>" + $(this).text

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

().find("ul").html()+"</p></div>");
$(this).parent().hide();
tabCount = tabCount+1;
});
$("#tabs").tabs();
});
</script>

<div id="tabs">
<ul>
</ul>
</div>

You can get reference from below link.

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