Collapse-O-Matic Nested UL

Here is an example of how to add ‘extra’ sub li’s to a list element using the jedi powers of collapse-o-matic:

The basic idea is this:

<ul>
<li>your thing with a link
<ul>
<li>this is the super cool extra info</li>
</ul>
</li>
<li>some other thing</li>
</ul>

So now we just need to add the roll-your-own collapse-o-matic elements:

<ul>
<li>your thing with a <span class="collapseomatic" id="linkone">link</span><ul><li id="target-linkone" class="collapseomatic_content">this is the super cool extra info</li></ul></li>
<li>some other thing</li>
</ul>

and BLAMO!

  • your thing with a link
    • this is the super cool extra info
  • some other thing

Collapse-O-Matic Button Test

There are a couple of ways a button can be used as a collapse-o-matic trigger:

using a stylized div

Push me
this is the hidden content

shortcode:

[expand title="Push me" trigclass="noarrow my_button" targclass="my_content" tag="div"]this is the hidden content[/expand]

css:

.my_button {
background: #4B55E3;
color:  white;
padding:  5px;
width: 130px;
text-align: center;
}

.my_button.colomat-hover{
 background: #999;
text-decoration: none;
}

.my_content{
margin-left: 0;
}

Using a html button:

shortcode:

[expand title="Push me" trigclass="noarrow my_button" targclass="my_content" tag="button"]this is the hidden content[/expand]
this is the hidden content

Collapse-O-Matic Nested Spacing Issue

Solution 1: Remove all hard returns in source:

Observation and Interpretation

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue ornare lacus,

Focus On: Topics

Immigration

Observation and Interpretation

Vestibulum ornare ante in nibh ullamcorper gravida. Aliquam rutrum arcu a metus pellentesque, auctor laoreet velit iaculis.

Religion

Cras sollicitudin pellentesque pellentesque. In hac habitasse platea dictumst. Mauris eu varius nisl.

Moravian Community Life

Women’s Roles

Material Culture

Purpose of Portraiture

The American Revolution: Boston

The American Revolution: Bethlehem, PA

The Artist: John Singleton Copley

The Artist: Johann Valentine Haidt

Discussion Questions

Primary Sources

Young Moravian Girl

  • Writings/ memoirs of 4 Moravian women
  • Extracts from Moravian diary confirming Haidt as teacher
  • Lafayette’s letter to his wife describing Bethlehem
  • Various Moravian portraits by Haidt and prints of Bethlehem

Mrs. George Watson

  • The death sermon of Mrs. Watson
  • Paul Revere’s print of the Bloody Massacre
  • John Singleton Copley’s letter about George Watson
  • George Watson’s resignation letter to Gen. Gage
  • Henry Pelham’s letter on Tea Party incident
  • Letter by Richard Clarke about tea shipment (Boston Tea Party)
  • Letter from Abigail Adams to Elizabeth Cranch about daughter of Mrs. George Watson
  • Various portraits of family members by Copley
  • Contemporary transcript of the Boston Massacre Trials

Single Line Jedi Countdown

This is a countdown, style jedi, with weeks removed

days
0
-437
-4
hours
0
-8
minutes
-1
-8
seconds
-3
-5

days where forced to show on the same line as Hours, Minutes and Seconds by adding the following css to the theme’s style.css file plugin’s option page under the Custom Css section:

.jedi-hours_dash {
clear: none !important;
}

Now, seconds are being pushed to the next line because the width of the dashboard is not wide enough. The dashboard is expanded to 298px to fit Days, Hours, Mins and Secs on the same line by adding the following css to the theme’s style.css file plugin’s option page under the Custom Css section:

.jedi-dashboard {
width: 298px !important;
}