Category: collapse-pro-matic
December 2014
February 2015

Posted on

Roll-Your-Own Nested Expands

Alternat Text be I

Here is a simple example of how you can create nested expand elements using the shortcode:

[expand title="state1" id="state1"]
   [expandsub1 title="city1" id="city1"]bar1
bar2[/expandsub1]
   [expandsub1 title="city2" id="city2"]bar3
bar4[/expandsub1]
[/expand]
state1
city1
bar1
bar2
city2
bar3
bar4

Roll-Your-Own

Here is a similar example of nested expand elements using the Roll-Your-Own method:

<div class="collapseomatic" id="state2" title="state2">state2</div>
<div id="target-state2" class="collapseomatic_content " style="display: none;">
   <div class="collapseomatic" id="city3" title="city3">city3</div><div id="target-city3" class="collapseomatic_content " style="display: none;">bar5<br>
bar6</div>
   <div class="collapseomatic" id="city4" title="city4">city4</div><div id="target-city4" class="collapseomatic_content " style="display: none;">bar7<br>
bar8</div>
</div>
state2

~~~

Here is a four level deep nested test using shortcodes:

+ Coaching (Team Services)

+ Coaching Engagements

Agile Team Accelerator

Expandsub4

this is the fourth estate

Embedded Agile Coaching

Technical Agile Coaching

Executive Session for Agile

Coaching Workshops

Sandbox

Posted on

Collapse-O-Matic Lists

One of the more common support issues with Collapse-O-Matic are related to unwanted spacing between collapse elements. While there are a number of reasons why this happens, the most common issues are extra ‘p’ or ‘br’ tags being added due to the strange way the wpautop filter. Often the spacing issue can be resolved by wrapping the expand elements in a div, removing any extra spacing or hard-returns between the expand elements, adjusting css, using different expand html elements (such as the ‘li’ element), or using the Collapse Commander add-on.

Example of a simple list using Collapse-O-Matic:

[expand title="Item One"]
This is some special text to display about item one
[/expand]
[expand title="Item Two"]
This is some special text about item two to display
[/expand]
[expand title="Item Three"]
Item three also has some special text to be displayed
[/expand]
Item One
This is some special text to display about item one
Item Two
This is some special text about item two to display
Item Three
Item three also has some special text to be displayed

Example using UL and LI elements:

<ul>
[expand title="Item One" tag="li"]
This is some special text to display about item one
[/expand]
[expand title="Item Two" tag="li"]
This is some special text about item two to display
[/expand]
[expand title="Item Three" tag="li"]
Item three also has some special text to be displayed
[/expand]
</ul>
  • Item One
    • This is some special text to display about item one
  • Item Two
    • This is some special text about item two to display
  • Item Three
    • Item three also has some special text to be displayed

Example of a list using Collapse-Commander

[expand cid="1765"/]
[expand cid="1766"/]
[expand cid="1767"/]
Item One
This is some special text to display about item one
Item Two
This is some special text about item two to display with some html
Item Three
Item three also has some special text to be displayed

example of internal content list without using filter attribute:

[expand title="Standard"]
This is some text on the first line
This is some text on the second line
This is some text on the third line
[/expand]
Standard
This is some text on the first line
This is some text on the second line
This is some text on the third line

example of internal content list using filter attribute:

[expand title="Filtered" filter="true"]
This is some text on the first line
This is some text on the second line
This is some text on the third line
[/expand]
Filtered

This is some text on the first line
This is some text on the second line
This is some text on the third line