How to create a context Section that opens when clicked

Tags: Formatting, Automation
Say that you have a bunch of stuff that you want to display on a page, but not all the time -- you want to only show a label, and display the contents when they click on it. For example, the list of Recipes here:

Show all Recipes

Clicking on that displays the Recipes; clicking on it again hides them.
Here's the expression that does that:
[[_uniqueHtmlId -> +$sectionId

""### [[_QLLink(
  label=""Show all Recipes"",
  target=$sectionId,

  ql=Recipe._instances -> _bulleted)]]

<div id="[[$sectionId]]"></div>

""]]
Let's break that down, piece by piece:
  • _uniqueHtmlId does what the name suggests: it creates a unique identifier, suitable for sticking onto an HTML page. (That is, a page shown in the browser.)
  • The -> +$sectionId right after that stuffs it into a variable named $sectionId.
  • At the bottom, <div id="[[$sectionId]]"></div> defines an empty HTML "div" -- a space on the page with that identifier.
  • The paired "" near the top and bottom define a section of QText -- stuff to actually show on the page.
  • The "###" is QText that says to display this as a level-3 Header, so it shows up very large.
  • The _QLLink() function is the heart of it: this displays a link that does something when you click on it.
  • The label parameter says what text to show for the link. (This is any QL expression.)
  • The target parameter gives the ID of where to put the results when you click on the link. (Also a QL expression -- note that we used the $sectionId that we defined earlier, so that the results go into that space at the end.)
  • Finally, but most important, the ql parameter is any QL you want -- it says what to show when the link gets clicked. In this case, we want to show a bullet list of all of the Recipe instances.
Take this snippet, and experiment with it! Create a page in your own Space, put this there, change Recipe to one of your own Models, and it should just work. Then you can fiddle with the ql parameter to show more specific Things, or change how they are displayed. You can change the label parameter to be more dynamic, based on what you are showing.
For a slightly more involved example (but still basically the same mechanism), take a look at the source of the All Games listing in the Period Games Space -- that take one Category at a time, and shows all of the Games in that Category.
Back to Recipes