Site structure using JSOM

Question

Hi,
What I am trying to do is write some Javascript that will  display A site collection on top and all its descendant sites below using JSOM.
Parent child relation ship should be indicated either by indentation or by Collapse / Expand functionality. Is this possible using JSOM?
Please help..
I have following code but this displays all subwebs as a flat structure, instead i want some sort of differentiation between a parent web and a child web.
<script type="text/ecmascript" language="ecmascript">
ExecuteOrDelayUntilScriptLoaded(runCode, "sp.js");
var webCollection = null;
function runCode() {
var clientContext = new SP.ClientContext.get_current();
if (clientContext != undefined && clientContext != null) {
var web = clientContext.get_web();
this.webCollection = web.getSubwebsForCurrentUser(null);
clientContext.load(this.webCollection);
clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
function onQuerySucceeded() {
var webInfo = '';
var webEnumerator = this.webCollection.getEnumerator();
while (webEnumerator.moveNext()) {
var web = webEnumerator.get_current();
webInfo += "<a class='list-group-item' title='click to navigate' href=\'" + web.get_serverRelativeUrl() + "\' target='blank'>" + web.get_title() + "</a>";
$(".list-group").append(webInfo);
function onQueryFailed(sender, args) {
alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
</script>
techie

Answer 1

Hi,
According to your description, my understanding is that you want to display subsite with Collapse / Expand style under the root site.
I suggest you can do  some customization with Jquery and CSS to achieve it.
Here is a code snippet for your reference:
<script type="text/javascript">
// Expand/Collapse Buttons
// Feedback and questions: [email protected]
function WPToggle(thisId, ImageId)
if (document.getElementById(thisId).style.display=="none")
document.getElementById(thisId).style.display="";
document.getElementById(ImageId).src = "/_layouts/images/minus.gif";
else
document.getElementById(thisId).style.display="none";
document.getElementById(ImageId).src = "/_layouts/images/plus.gif";
function ExpandCollapseBody()
var i = 1;
var WPid = "WebPartWPQ1" ;
var WPtitleid = "WebPartTitleWPQ1" ;
var Toggleid = "ToggleImage1" ;
do
try
document.getElementById(WPtitleid).innerHTML = '<IMG id="' + Toggleid + '" onClick="WPToggle(\'' + WPid + '\',\'' + Toggleid + '\')" alt="Expand/Collapse" style="margin:6px 5px 0px 2px; float:left; cursor:pointer;" src="/_layouts/images/minus.gif" />' + document.getElementById(WPtitleid).innerHTML ;
if (document.getElementById(WPid).style.display=="none")
document.getElementById(Toggleid).src = "/_layouts/images/plus.gif";
catch(err) {}
i = i + 1;
WPid = "WebPartWPQ" + i ;
WPtitleid = "WebPartTitleWPQ" + i;
Toggleid = "ToggleImage" + i;
} while (document.getElementById(WPid))
_spBodyOnLoadFunctionNames.push("ExpandCollapseBody()");
</script>
Here is a detailed code demo, I suggest you can take a look for reference:
http://blog.pathtosharepoint.com/2008/10/25/expandcollapse-buttons-for-your-web-parts/
Best Regards
Forum Support
Please remember to mark the replies as answers if they help and unmark them if they provide no help. If you have feedback for TechNet Subscriber Support, contact
[email protected]
Zhengyu Guo
TechNet Community Support