Page 1 of 1

Expandable list symbol issue

Posted: Thu Nov 05, 2009 4:41 pm
by oldnoisy
pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.


Hello, I'm pretty new to JS but I can script a few things. I'm using a pre-written script, but trying to add a functionality that uses my + and - images to indicate whats whether the list is expanded or not.


It works on the first click. The symbol starts as a plus, you click it and it expands and goes to minus. After that the list maintains functionality (for the most part) but doesn't continue changing symbols back and forth. I've pored over the script for HOURS but I can't find the solution.

http://www.muchomungo.com/CrowdTwist/pa ... _test.html is the working link.

My written JS:

Code: Select all

// JavaScript Document
 
var expandables = new Array();
expandables[0] = "expand_northeast";
expandables[1] = "expand_southeast";
expandables[2] = "expand_midwest";
expandables[3] = "expand_southwest";
expandables[4] = "expand_west";
 
var clickCounter = 0;
 
function expand(current) {
 
    //add height to the containing div
    if(clickCounter<=1) {
        var newHeight = document.getElementById('region_us').offsetHeight + 187;
        document.getElementById('region_us').style.height = newHeight.toString() + 'px'; 
        clickCounter+=1;
        }
    
        
    //get the section name
    var section = current.split('_')[1];
    
    for ( var i=0; i<expandables.length; i++ ){
        if(document.getElementById(expandables[i]).id.indexOf('collapse') != -1){ //if it has collapse in id string
          var tempSection = expandables[i].split('_')[1];                           //parse just the region
          
          document.getElementById(expandables[i]).id='expand_' + tempSection;       //change the id to expand / plus symbol
          expandables[i] = document.getElementById('expand_' + tempSection).id;     //make the change in the array as well
          }
    }
    
    
    
    document.getElementById(current).href='javascript&#058;animatedcollapse.show(\'stats_'+ section + '\');';
    document.getElementById(current).onclick=function() {collapse('\'collapse_'+section +'\'');};
    document.getElementById(current).id="collapse_" + section + "";
    
    for (x in expandables)
    {
        if(expandables[x] == current){
            expandables[x] = document.getElementById('collapse_' + section).id;
        }
        
    }
//alert(expandables);
 
 
}
 
 
 
function collapse(current) {
var section = current.split('_')[1];
//alert(current);
current = ("expand_"+section);
 
 
    
document.getElementById(current).href='javascript&#058;animatedcollapse.hide(\'stats_'+ section + ');';
document.getElementById(current).onclick=function() {expand('"expand_'+section+'"');};
document.getElementById(current).id='expand_' + section;
 
for (x in expandables)
{
    if(expandables[x] == current){
        expandables[x] = document.getElementById('expand_' + section).id;
    }
    
}
 
}

Relevant HTML:

Code: Select all

<a id="expand_northeast" href="javascript&#058;//" onclick="expand('expand_northeast');"></a>
                            <span class="state_title">Northeast</span>
                            <span class="state_title_num">2,749</span>
                            <span class="state_title_perc">62.5%</span>
                            
                                <div id="stats_northeast" style="display:none;">
                                
                                <span class="state colored">Maine</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Rhode Island</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">New Hampshire</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                                <span class="state colored">Maryland</span><span class="stat_num colored">32</span><span class="stat_percent colored">7.1%</span><br />
                                <span class="state">Pennsylvania</span><span class="stat_num">32</span><span class="stat_percent">7.1%</span><br />
                            
                            
                                </div>

Thanks guys!


pickle | Please use [ code=php ], [ code=text ], etc tags where appropriate when posting code. Your post has been edited to reflect how we'd like it posted. Please read: :arrow: Posting Code in the Forums to learn how to do it too.

Re: Expandable list symbol issue

Posted: Fri Nov 06, 2009 10:35 am
by pickle
I think your CSS is relevant too, but regardless, I think that script is pretty poorly written - overly complex from what I can see. From your HTML markup, it looks like when you click the link, you want to toggle the visibility of stats_northeast. The easiest way to do this is just to toggle some classes

Here's how I'd do this:

Code: Select all

//Javascript
function toggle(target,divID){
if(target.className == 'expanded')
{
  target.className = 'collapsed';
  document.getElementById(divID).className.className = 'collapsed';
}
else
{
  target.className = 'expanded';
  document.getElementById(divID).className = 'expanded';
}

Code: Select all

//HTML (only a slight change)
<a id="expand_northeast" href="javascript&#058;//" onclick="expand('expand_northeast');" class = "collapsed"></a><!-- class added -->
  <span class="state_title">Northeast</span>
  <span class="state_title_num">2,749</span>
  <span class="state_title_perc">62.5%</span>
  <div id="stats_northeast" class = "collapsed"><!-- class added -->

Code: Select all

//CSS
a.collapsed{ background-image:url(/path/to/plus.png); }
a.expanded{ background-image:url(/path/to/minus.png); }
div.collapsed{ display:none; }
div.expanded{ display:block; }
A Javascript library (like jQuery) would make this whole thing easier.

Re: Expandable list symbol issue

Posted: Mon Nov 09, 2009 7:12 pm
by oldnoisy
Thanks for the help, I took the jQuery suggestion and used this script: http://adipalaz.awardspace.com/experime ... dion2.html