ShowHide child list within parent list cell

[Spyhop]

I would like to put a 'child' list within a column in a parent list, and have the ability, via a button, to 'Show/Hide' the 'child' list in each individual row. 

I was able to come close...

• created a list with two columns (i.e., parent)
• in the second column of the 'parent' list, inserted an html item for a 'show/hide' button
• after the 'button' html item in the second column of the parent list, inserted an block containing the 'child' list surrounded with <span>...</span> html items, and then a final html item with the javascript function for the 'show/hide' button

The result looked good at first, but clicking the 'show/hide' button in ANY row, only affects the 'child' list in the first row?  I am assuming I need some way to identify each list in each row to apply the function to, but I cannot figure it out.

[CognosPaul]

Normally your script would include relative instructions to find the span.

Something like

Code Select Expand


this //The button
  .parentNode //The cell
  .nextElementSibling //The next cell
  .firstElementChild //The first element in the next cell
  .style.display='block' //Set the display


You would need to play around based on how you actually have it set up, but that should give you the basic steps.

[Spyhop]

Thank you for taking a look and replying to my question!
I do not have a lot of javascript experience, and have been trying to figure out the use of these instructions... with no luck.

Is there any chance you have a small sample snippet of code that implements these particular instructions with a button and how they are applied to the contents (the button and list in the <span>) of a cognos report list cell ?

Also, it would be a great help if you know of a way to put any kind of debug/write statements in the JavaScript code that can be interrogated as the report executes?

[CognosPaul]

Are you familiar with the Chrome console? You can add a debugger; statement in the javascript and step through from there.

Take a look at the attached xml. I have a block set to display:none-inline and the button on each row will find it and toggle the display.

EDIT: I can't seem to attach the xml, so I'm putting it in a code element below.

Code Select Expand

<report xmlns="http://developer.cognos.com/schemas/report/15.5/"           expressionLocale="en-us" useStyleVersion="11.6">

<drillBehavior/>
<layouts>
<layout>
<reportPages>
<page name="Page1">
<style>
<defaultStyles>
<defaultStyle refStyle="pg"/>
</defaultStyles>
</style>
<pageBody>
<style>
<defaultStyles>
<defaultStyle refStyle="pb"/>
</defaultStyles>
</style>
<contents><list horizontalPagination="true" name="List1" refQuery="Query3">




<style>
<CSS value="border-collapse:collapse"/>
<defaultStyles>
<defaultStyle refStyle="ls"/>
</defaultStyles>
</style>
<listColumns><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Data Item1"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Data Item1"/></dataSource></textItem><HTMLItem>
<dataSource>
<staticValue>&lt;input type=&quot;button&quot; value=&quot;click me!&quot; onclick=&quot;
var elm = this.nextElementSibling;
elm.style.display=elm.style.display==&apos;none&apos;?&apos;block&apos;:&apos;none&apos;;
&quot;
/&gt;
</staticValue>
</dataSource>
</HTMLItem><block>
<contents><textItem><dataSource><staticValue>Peekaboo!</staticValue></dataSource></textItem></contents>
<style><CSS value="display:none-block"/></style></block></contents></listColumnBody></listColumn><listColumn><listColumnTitle><style><defaultStyles><defaultStyle refStyle="lt"/></defaultStyles></style><contents><textItem><dataSource><dataItemLabel refDataItem="Data Item2"/></dataSource></textItem></contents></listColumnTitle><listColumnBody><style><defaultStyles><defaultStyle refStyle="lm"/></defaultStyles></style><contents><textItem><dataSource><dataItemValue refDataItem="Data Item2"/></dataSource></textItem></contents></listColumnBody></listColumn></listColumns></list></contents>
</pageBody>
</page>
</reportPages>
</layout>
</layouts>
<queries><query name="Query1"><source><model/></source><selection autoSummary="false"><dataItem name="Data Item1" aggregate="none" rollupAggregate="none"><expression>&apos;abc&apos;</expression></dataItem><dataItem name="Data Item2" aggregate="none" rollupAggregate="none"><expression>&apos;bcd&apos;</expression></dataItem></selection></query><query name="Query2"><source><model/></source><selection autoSummary="false"><dataItem name="Data Item2" aggregate="none" rollupAggregate="none"><expression>&apos;bcd&apos;</expression></dataItem><dataItem name="Data Item1" aggregate="none" rollupAggregate="none"><expression>&apos;abc&apos;</expression></dataItem></selection></query><query name="Query3">
<source>

<queryOperation name="Union1" duplicates="preserve">
<queryRefs><queryRef refQuery="Query1"/><queryRef refQuery="Query2"/></queryRefs>
<projectionList autoGenerated="true"><queryItem name="Data Item1"/><queryItem name="Data Item2"/></projectionList>
</queryOperation></source>
<selection><dataItem name="Data Item1"><expression>[Union1].[Data Item1]</expression></dataItem><dataItem name="Data Item2"><expression>[Union1].[Data Item2]</expression></dataItem></selection>
</query></queries><XMLAttributes><XMLAttribute output="no" name="RS_CreateExtendedDataItems" value="true"/><XMLAttribute output="no" name="listSeparator" value=","/><XMLAttribute output="no" name="decimalSeparator" value="."/></XMLAttributes><modelPath>/content/package[@name=&apos;Audit_Local&apos;]/model[@name=&apos;model&apos;]</modelPath></report>

[Spyhop]

Wow! Such a simple solution! That works great!
Thank you so much!!!