Expandable list symbol issue

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
oldnoisy
Forum Newbie
Posts: 12
Joined: Sat Sep 12, 2009 7:49 pm

Expandable list symbol issue

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Expandable list symbol issue

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
oldnoisy
Forum Newbie
Posts: 12
Joined: Sat Sep 12, 2009 7:49 pm

Re: Expandable list symbol issue

Post by oldnoisy »

Thanks for the help, I took the jQuery suggestion and used this script: http://adipalaz.awardspace.com/experime ... dion2.html
Post Reply