Code to call to an active page in a Hierarchical Transformation

Sasha Campbell asked on February 23, 2015 16:12

Hi,

I'm trying to get my sub navigation to work correctly. It is an accordion style side tree menu that goes down 2 levels. I have the first level working but the second level is proving tricky. Currently, it is opening only one section and not highlighting the selected page as well as not staying open when something is chosen.

I believe I have located the problem.

<ul id="collapse-buttons" class="collapse">

<li class="list-group-item <%# ((bool)Eval("NodeHasChildren")) ? "list-toggle" : "" %> <%# IfCompare(CMS.DocumentEngine.DocumentContext.CurrentDocument.NodeAliasPath.StartsWith(Eval("NodeAliasPath").ToString()).ToString(), "True", "", "active") %>" > <a href="<%# GetDocumentUrl() %><%# ((bool)Eval("NodeHasChildren")) ? "#collapse-buttons" : "" %>" <%# ((bool)Eval("NodeHasChildren")) ? "data-parent=\"#sidebar-nav\" data-toggle=\"collapse\"" : "" %>><%# Eval("DocumentName") %> <cms:SubLevelPlaceHolder runat="server" ID="plcSub" />

Collapse-button is only calling to one certain section when I need it to call to the selected section that could change at any given time. So it needs to be something like collapse-<"general active page code">. Does this exist? Any recommendations or advice?

Warm Regards, Sasha

Recent Answers

Brenden Kehren answered on February 24, 2015 01:20

Sasha, what version are you working in? V8 has some great improvements with the hierarchical viewer by using this line of code to introduce a sub level

<cms:SubLevelPlaceHolder runat="server" ID="plcSub" />

You'll need to create transformation for every level and status for the hierarchical viewer. I typically layout all the HTML and add comments as to what transformation goes where then start cutting and pasting.

0 votesVote for this answer Mark as a Correct answer

Sasha Campbell answered on March 2, 2015 21:21

Hi Brenden,

I'm working in V8. I've created transformations for every level.

I have a header, two items and a footer. I've already called to the final level which is located in a collapsible list. I'm having a problem of the menu opening but not staying open when something in that list is selected.

For example, take this menu ->

Main Choice 1
* MC1 Sub Choice 1
* MC1 Sub Choice 2
Main Choice 2
* MC2 Sub Choice 1
* MC2 Sub Choice 2
* MC2 Sub Choice 3

It shows up as this when you first open the page. This is both items not expanded.
Main Choice 1
Main Choice 2

Then I click on on MC1 and it expands to:
Main Choice 1
* MC1 Sub Choice 1
* MC1 Sub Choice 2
Main Choice 2

My problem is, when I try to click on MC1 Sub Choice 1 in the expanded menu, it will not stay expanded. My second problem is that when I click on any other Main Choice option, it will only expand Main Choice 1.

I'm assuming the problem is from the first transformation that is placing the same ID to each main choice section ul id="collapse-buttons" class="collapse" . I need each main choice section to have a unique ID. So the code should be ul id="code to call to the individual section" class="collapse". Does this exist?

This unique ID will keep the expanded menu open when I select the sub options. I just don't know what code to put there. I really don't know if I'm explaining this well. This may be something really simple but I'm missing it.

Thank you

0 votesVote for this answer Mark as a Correct answer

   Please, sign in to be able to submit a new answer.