Remember, you MUST only use this hack on a site that has been licensed using the JoomlArt's Templates Club. Failure to do so is against the terms and conditions of JoomlArt and you will be pirating our products. Please email This e-mail address is being protected from spam bots, you need JavaScript enabled to view it if you have any questions in regards to this.

1. ja.script.js from the JoomlArt templates (Quillaja or Teline)
2. ja.hiddenpanel.js from the JoomlArt templates (Quillaja or Teline)

1. Firstly, copy and paste (upload) the two script files (ja.script.js and ja.hiddenpanel.js) to your templates folder (ie, /templates/yourtemplate/)
2. Next, open the index.php file found in your template and put the following lines of code just before the tag, changing the urls as required
   

   <script language="javascript" type="text/javascript" src="http://www.yoursite.com/joomla/templates/templatename/ja.script.js"></script><br /><script language="javascript" type="text/javascript" src="http://www.yoursite.com/joomla/templates/templatename/ja.hiddenpanel.js"></script><br /></font><font face="Arial"><script type="text/javascript"><br />/*<![CDATA[*/<br />document.write ('<style type="text\/css">#ja-hpwrap{height:0;overflow:hidden;visibility:hidden;}<\/style></font><font face="Arial">/*]]>*/<br /></script>

3. Next, place the following block of code where you'd like the panel to open. Usually this is to be placed at the very top, so you'd place it just after the tag. Replace the "Congratulations, you're hidden panel is working!" to the content that you'd wish to appear.
   

   <div id="ja-hpwrap"><div id="ja-hp"><div class="ja-hpmodule">Congratulations, you're hidden panel is working!</div></div></div>

4. Now, place the following block of text where you'd like the button to appear to open and close the hpanel.
   

   <span id="ja-hp-switch">SHOW/HIDE</span>

5. Now all that's required is to modify your css code, and enter the following lines of code:
   

   #ja-hp-switch {
   	float: right;
   	color: #CCCCCC;
   	display: none;
   	font-weight: bold;
   	cursor: pointer;
   	padding: 0 5px;
   }
   
   .ja-hp-active {
   	color: #FFFFFF !important;
   	background: #FF9A48;
   	border-bottom: 1px solid #000000;
   }
   
   #ja-hpwrap {
   	background: #EFEFEF;
   	font-size: 11px;
   }
   
   #ja-hp {
   	line-height: normal;
   }
   
   div.ja-hpmodule {
   	float: right;
   	padding: 3px 0 2px;
   }
   
   html>body div.ja-hpmodule {
   	float: right;
   	padding: 5px 0 5px;
   }
   
   div.ja-hpmodule form {
   	float: left;
   }
   
   div.ja-hpmodule form label {
   	float: left;
   	padding: 0 5px;
   }
   
   div.ja-hpmodule form input.button {
   	padding: 0px 3px;
   	background: #333333;
   	border: 1px solid #333333;
   	color: #CCCCCC;
   	font-size: 11px !important;
   }
   
   div.ja-hpmodule form #mod_login_username,
   div.ja-hpmodule form #mod_login_password {
   	background: #F7F7F7;
   	border: 1px solid #CCCCCC;
   	width: 70px;
   	margin-bottom: 0;
   }
   
   div.ja-hpmodule form #mod_login_remember {
   	margin-bottom: 0;
   }	
   
   div.ja-hpmodule form a {
   	padding-left: 5px;
   	border-left: 1px solid #CCCCCC;
   }
   #ja-hpwrap {
   	clear: both;
   	width: 100%;
   }
   
   #ja-hp {
   	margin: 0 auto;
   	width: 750px;
   	text-align: left;
   }
   
   .wide #ja-hp {
   	margin: 0 auto;
   	width: 950px;
   	text-align: left;
   }
   }

6. Check that it all works, and you're done!