Plugins & Hacks

How can I show or hide my extended content without reloading the page?

Scenario:
"I would like to have my extended content expand by clicking on a link without needing to reload the page."

Solution:
You can either use NP_CollapsedContents or the simple javascript solution described below.

Original forum thread (thanks, Legolas!):
http://forum.nucleuscms.org/viewtopic.php?t=13243

Method:

In your template, change the "morelink" section to contain the following code:

&raquo;
<a href="<%itemlink%>#more" title="Read more on '<%title(attribute)%>'" onclick="showItem('more<%itemid%>'); return false;">Read More</a>

<div id="more<%itemid%>" style="display: none;"><%more%></div>

In the <head> section of your web page (you may either have to make this change to every skin part of your skin, or it may be contained inside the head.inc file or a similarly named file), make sure you include the following code:

<script type="text/javascript">
function showAllItems() {
   var elems = document.getElementsByTagName('div');
   for (var i = 0; i < elems.length; i++) {
      if (elems[i].id.substr(0, 4) == 'more') {
         showItem(elems[i].id);
      }
   }
}
 
function showItem(divid) {
   if (document.getElementById(divid).style.display == 'block') {
      document.getElementById(divid).style.display = 'none';
   }
   else {
      document.getElementById(divid).style.display = 'block';
   }
}
</script>

If you want a quick way to expand all your extended content, just add this link somewhere in your page:

<a href="#" onclick="showAllItems(); return false;" title="Show all extended entries">Show all extended entries</a>

Nucleus FAQ

Navigation

Plugins & Hacks

How can I show or hide my extended content without reloading the page?

Please tell us how useful this answer was to you (0 = useless, 10 = very very helpful):