**This trick will not work anymore as [[http://forum.pbase.com/viewtopic.php?t=32005|PBase has disabled Javascript support completely]]**

A Howto on creating toggling effect for Gallery description. For a demo, see [[http://www.pbase.com/srijith/madurodam|Srijith's Madurodam gallery]].

Tested with IE 6.02 (Win XP), Opera 8.54, 9.01 (Win XP, Ubuntu and FC5) and Firefox 1.5.01 (Win XP, FC 5)


===== Step 1 =====

Add the following code to the //description// field
<code>
<script type="text/javascript">
<!--
function showDescToggle(showtxt,hidetxt) {
  if(document.getElementById) {
		show = 'Show Description';
		hide = 'Hide Description';

    document.writeln('<div id=\'desctoggle\'><a href="javascript:toggleDesc()">' +
    '<span id="showlink" style="display:none;">' + show + '</span>' +
    '<span id="hidelink">' + hide + '</span>'
    + '</a></div>');
  }
}

/**
 * This toggles the visibility of the Table of Contents
 */
function toggleDesc() {
  var desc = document.getElementById('descinside');
  var showlink=document.getElementById('showlink');
  var hidelink=document.getElementById('hidelink');
  if(desc.style.display == 'none') {
    desc.style.display = descWas;
    hidelink.style.display='';
    showlink.style.display='none';
  } else {
    descWas = desc.style.display;
    desc.style.display = 'none';
    hidelink.style.display='none';
    showlink.style.display='';

  }
}
//-->
</script>
<div id="descheader">
<script type="text/javascript">
showDescToggle("+","-")
</script>
</div>
<div id="descinside">
Your Gallery description here.....
</div>
<script type="text/javascript">
toggleDesc()
</script>
</code>

Substitute "Your Gallery description here....." with your gallery's description.

===== Step 2 =====
Make sure that "html flag" is enabled.

===== Step 3 =====

Add the following CSS tags to your CSS
<code>
.galleryheader{
  margin: 0px auto;
  width:500px; 
  text-align:center;
}

#descheader {
  margin:0px auto;
  margin-bottom: 5px;
}

#desctoggle {
 text-align:center;
 margin:0px auto;
 font-weight:bold;
}

#descinside {
 text-align:justify;
 margin:0px auto;
}

/* IE doesn't understand margin:auto */
body{
 text-align:center;
} 

/* negate effect of body center above */
#localmenu {
 text-align:left;
}

/* negate effect of body center above */
.gallery_comments {
 clear:both;
 text-align:left;
} 

/* negate effect of body center above*/
.comment_section {
 clear:both;
 text-align:left;
}
</code>

===== Caveat =====
The toggle will not work if Javascript is disabled at the user's browser. However, the functionality degrades gracefully by showing the description and not showing the toggle option.
**Bold Text**