Howto (expandable-content2) - using logic

TOC

 description 

This is a step-by-step howto based on "Flooble's Expandable Content script".
It is mainly a copy & past of the resulting script to show you how you are able to use such a code for your own moslate.
(This means that I did not create any of the used JavaScript)
However, this is the logic-version of the previous howto. The benefit of this approach is a cleaner code because no php is used. (you will need moslate & logic 0.5+)

 part 1 - create/choose your category 

To create any moslate you have to have a category available... if you don't have any you may create one by choosing (Menu):
Components -> Moslates -> Moslate Categories
There you can use the "New" button (this is actually a list provided by the Joomla/Mambo administration core).

 part 2 - create moslate 

1) First you may navigate to the main list by choosing (Menu):
Components -> Moslates -> Manage Moslates
2) Click on "New"
3) Choose the category you might just created
4) Enter a name, e.g. "expandable-content"
5) Enter the template-code:
  1. {c:set var="counter" value="${requestScope.expandableContentCounter+0}"/}
  2. {c:set var="expandableContentCounter" value="${counter+1}" scope="request"/}
  3. {c:set var="id" value="exp${counter}"/}
  4. {c:choose}
  5.   {c:when test="${collapsed eq 'true'}"}
  6.     {c:set var="divStyles" value="display:none;"/}
  7.     {c:set var="linkText" value="+"/}
  8.   {/c:when}
  9.   {c:otherwise}
  10.     {c:set var="divStyles" value=""/}
  11.     {c:set var="linkText" value="−"/}
  12.   {/c:otherwise}
  13. {/c:choose}
  14. {c:if test="${counter == 0}"}
  15. <!-- flooble Expandable Content header start -->
  16. <script language="javascript" type="text/javascript">
  17. // Expandable content script from flooble.com.
  18. // For more information please visit:
  19. //   http://www.flooble.com/scripts/expand.php
  20. // Copyright 2002 Animus Pactum Consulting Inc.
  21. //----------------------------------------------
  22. var ie4 = false; if(document.all) { ie4 = true; }
  23. function getObject(id) {
  24.  if (ie4) { return document.all[id]; }
  25.  else { return document.getElementById(id); } }
  26. function toggle(link, divId) {
  27.  var lText = link.innerHTML; var d = getObject(divId);
  28.  if (lText == '+') { link.innerHTML = '&#8722;'; d.style.display = 'block'; }
  29.  else { link.innerHTML = '+'; d.style.display = 'none'; } }
  30. </script>
  31. <!-- flooble Expandable Content header end   -->
  32. {/c:if}
  33. <!-- flooble Expandable Content box start -->
  34. <div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; ">
  35. <table border="0" cellspacing="0" cellpadding="2" width="100%"
  36.  style="background: #000000; color: #FFFFFF; ">
  37. <tr><td>{c:out value="${title}"/}</td><td align="right">
  38. [<a title="show/hide" id="{c:out value="${id}"/}_link"
  39.  href="javascript:void(0);"
  40.  onclick="toggle(this, '{c:out value="${id}"/}');"
  41.  style="text-decoration: none; color: #FFFFFF; ">{c:out value="${linkText}"/}</a>]
  42. </td></tr></table>
  43. <div id="{c:out value="${id}"/}"
  44.  style="padding: 3px;{c:out value="${divStyles}"/}">{c:out value="${data}"/}</div>
  45. </div><noscript><a href="http://www.flooble.com/scripts/expand.php">this expanable
  46.  content box is made using a free javascript from flooble</a>
  47.  | <a href="http://www.blackjack-primer.com">Blackjack Tutorial</a>
  48. </noscript>
  49. <!-- flooble Expandable Content box end  -->
6) Make the "Options" tab visible
7) Set "Mode" to "Ignore Parameters" (we will access variables using EL)
8) Set "Logic Scope" to "Yes" (this will prevent overwriting variables with the same name)
8) Set "Logic Variables" to "Yes" (this will make parameters available within EL)

 part 3 - template-code explained (skip this part if you don't care) 

  1. {c:set var="counter" value="${requestScope.expandableContentCounter+0}"/}
  2. {c:set var="expandableContentCounter" value="${counter+1}" scope="request"/}
Use the logic-variable expandableContentCounter as a counter.
The resulting counter (starting at 0) we will use for the id of each box and to determine whether we have to include a static header. By using requestScope it will be a global variable which can be used as a counter throughout the page.

  1. {c:set var="id" value="exp${counter}"/}
Here we define the id we want to use to identify the div we will use later.

  1. {c:choose}
  2.   {c:when test="${collapsed eq 'true'}"}
  3.     {c:set var="divStyles" value="display:none;"/}
  4.     {c:set var="linkText" value="+"/}
  5.   {/c:when}
  6.   {c:otherwise}
  7.     {c:set var="divStyles" value=""/}
  8.     {c:set var="linkText" value="&#8722;"/}
  9.   {/c:otherwise}
  10. {/c:choose}
Define extra style definition and the text of the link - depending on the initial collapse-state.

  1. {c:if test="${counter == 0}"}
  2. <!-- flooble Expandable Content header start -->
  3. <script language="javascript" type="text/javascript">
  4. // Expandable content script from flooble.com.
  5. // For more information please visit:
  6. //   http://www.flooble.com/scripts/expand.php
  7. // Copyright 2002 Animus Pactum Consulting Inc.
  8. //----------------------------------------------
  9. var ie4 = false; if(document.all) { ie4 = true; }
  10. function getObject(id) {
  11.  if (ie4) { return document.all[id]; }
  12.  else { return document.getElementById(id); } }
  13. function toggle(link, divId) {
  14.  var lText = link.innerHTML; var d = getObject(divId);
  15.  if (lText == '+') { link.innerHTML = '&#8722;'; d.style.display = 'block'; }
  16.  else { link.innerHTML = '+'; d.style.display = 'none'; } }
  17. </script>
  18. <!-- flooble Expandable Content header end   -->
  19. {/c:if}
If this is the first box we have to include a static header which is used by all boxes... this is unchanged to the original header.

  1. <!-- flooble Expandable Content box start -->
  2. <div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; ">
  3. <table border="0" cellspacing="0" cellpadding="2" width="100%"
  4.  style="background: #000000; color: #FFFFFF; ">
  5. <tr><td>{c:out value="${title}"/}</td><td align="right">
  6. [<a title="show/hide" id="{c:out value="${id}"/}_link"
  7.  href="javascript:void(0);"
  8.  onclick="toggle(this, '{c:out value="${id}"/}');"
  9.  style="text-decoration: none; color: #FFFFFF; ">{c:out value="${linkText}"/}</a>]
  10. </td></tr></table>
  11. <div id="{c:out value="${id}"/}"
  12.  style="padding: 3px;{c:out value="${divStyles}"/}">{c:out value="${data}"/}</div>
  13. </div><noscript><a href="http://www.flooble.com/scripts/expand.php">this expanable
  14.  content box is made using a free javascript from flooble</a>
  15.  | <a href="http://www.blackjack-primer.com">Blackjack Tutorial</a>
  16. </noscript>
  17. <!-- flooble Expandable Content box end  -->
Eventually output the code for the box. Here we use previously defined variables like id, divStyles and linkText. In addition we use data for the content (this is the default variable name) and title which is a moslate parameter (you can use any other name if you want).

 part 4 - create/edit your content 

Enter for example:
  1. {moslate}
  2. {expandable-content2 title="box title 1"}
  3. box content 1
  4. {/expandable-content2}
  5. <br/>
  6.  
  7. {expandable-content2 title="box title 2"}
  8. box content 2
  9. {/expandable-content2}
  10. <br/>
  11.  
  12. {expandable-content2 title="box title 3" collapsed="true"}
  13. box content 3
  14. {/expandable-content2}
  15. {/moslate}

 part 5 - result 

box title 1 [−]
box content 1

box title 2 [−]
box content 2

box title 3 [+]