How to add additional sidebarfx boxes?

[The Humanaught]

I've searched with no success on how to add additional sidebar boxes using the hide/un-hide function. Can anyone give me a clue where I need to be looking?

I added a new entry to the sidebarfx.js file (copy and pasting another entry and changing the variables to match the new sidebar box). I've also added the sidebar box no problem... the AJAX mobility works fine, but it does not hide when clicked.

The site is : www.haohaoreport.com

Cheers for any help anyone can provide.

[AshDigg]

Take a look at at the files in /digitalnature/sidebar_modules/

<h1><span class="expand"><a id="expcat" class="expand-up"></a></span><a class="htitle">Your title text here</a></h1>

Add that to your sidebar module and just make sure to change the "id" from "expcat" to something else and that should do it.

[The Humanaught]

Hey Ash, thanks for the reply... but that doesn't work. For whatever reason, it was designed so that you have to add additional entries into the sidebarfx.js to get it to work - unfortunately, I am missing something as I've changed everything I can see ... but it's not working.

This is the original per-item code in the JaveScript file (digitalnature/js/sidebarfx.js) - each sidebar element has one of these:

'#rssbox h1' : function(el){
	el.onclick = function(){
		if (Element.hasClassName(this, 'invisible')) {
			new Effect.BlindDown('rss', {duration:0.3});
			Element.removeClassName(this, 'invisible');
			document.getElementById('exprss').className='expand-down';						
			setCookie(this.parentNode.id, '', 365);

		} else {
			new Effect.BlindUp('rss', {duration:0.3});
			Element.addClassName(this, 'invisible');
			document.getElementById('exprss').className='expand-up';						
			setCookie(this.parentNode.id, 'invisible', 365);
		}
	}		
},

I took this and modified it to this (adding a "Partners" sidebar box):

'#ptnrbox h1' : function(el){
	el.onclick = function(){
		if (Element.hasClassName(this, 'invisible')) {
			new Effect.BlindDown('ptnr', {duration:0.3});
			Element.removeClassName(this, 'invisible');
			document.getElementById('expptnr').className='expand-down';						
			setCookie(this.parentNode.id, '', 365);

		} else {
			new Effect.BlindUp('ptnr', {duration:0.3});
			Element.addClassName(this, 'invisible');
			document.getElementById('expptnr').className='expand-up';						
			setCookie(this.parentNode.id, 'invisible', 365);
		}
	}		
},

I then adjusted the array later in the file:

/ Id names of all the "boxes"
boxIds = $("rssbox","tagbox","categorybox","loginbox","sidenavbox","aboutbox");

to

// Id names of all the "boxes"
boxIds = $("rssbox","ptnrbox","tagbox","categorybox","loginbox","sidenavbox","aboutbox");

In the sidebar_modules directory I created a file called ptnr.tpl with the following code:

<li>
  <div class="box" id="ptnrbox">
    <h1><span class="expand"><a id="expptnr" class="expand-up"></a></span><a class="htitle">Partners</a></h1>
    Our partners....
  </div>
</li> 

And I added the following line to the sidebar.tpl file:

{assign var=sidebar_module value="ptnr"}{include file=$the_template_sidebar_modules."/wrapper2.tpl"}

Anyone any ideas what else I need to do to get this to work?

[AshDigg]

Ahhh, I had no idea it was that complex.

Try this for ptnr.tpl

PHP Code:

<li>
  <div class="box" id="ptnrbox">
    <h1><span class="expand"><a id="expptnr" class="expand-up"></a></span><a class="htitle">Partners</a></h1>
      <div class="box2" id="ptnr">
                Our partners....
            </div>
  </div>
</li> 


All I did was add

PHP Code:

<div class="box2" id="ptnr"> 


and

PHP Code:

</div> 


[Sergio]

I've got the same problem and tried a lot of ways that didn't work :S

Edit: with your instructions, Humanaught, now works!

[Geoserv]

This was a very helpful thread, I was able to get a mod that displays top stories to actually look like all of the other mods in the sidebar, however, I cannot get it to collapse.

Any suggestion?


Geoserv