This trick will not work anymore as PBase has disabled Javascript support completely
A Howto on creating toggling effect for Gallery description. For a demo, see 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)
Add the following code to the description field
<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>
Substitute “Your Gallery description here…..” with your gallery's description.
Make sure that “html flag” is enabled.
Add the following CSS tags to your CSS
.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;
}
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