JavaScript - Open Tables With Expandable Sections Closed

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.

Working Link Example

My written JS:
Code:

// 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: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: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:

<a id="expand_northeast" href="javascript://" 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!

I want to create a link which doesn't takes you to anew page but just expands to show it's information . Exactly like the one in FAQs where you click the question and the page expands to show you the answer.

I am building an elearning site where the user is taken through a series of dynamically driven pages to refine their choices. I am using php amd mysql to populate a series of tables but on the last page the table gets very long so i am trying to make the table expandable.

I found this and this on http://www.javascripttoolbox.com/jquery/ and it's proving helpful but i need a little help taking it a step further. I also found this to be useful for anyone else who is trying to do the same thing: http://www.jankoatwarpspeed.com/post...nd-plugin.aspx

FROM JAVASCRIPTTOOLBOX

A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row.
The only requirements a

1. Put a class of "parent" on each parent row (tr)
2. Give each parent row (tr) an id
3. Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs

Original code:

Code:

$(function() {
	$('tr.parent')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
		});
	$('tr[@class^=child-]').hide().children('td');
});

This works great but my parent and child rows all contain checkboxes and If i try and check the checkboxes in the master rows the child rows associated with that master row expand and contract. I have added an extra cell to each row and i'm using a css class to add an arrow image to each master row but i am new to Javascript so i am not sure what i am doing.

My code now looks like this:

Code:

$(document).ready(function() {
	$('tr:not(.parent)').hide();
	
	//$('tr.parent')
	$('.arrow')
		.css("cursor","pointer")
		.attr("title","Click to expand/collapse")
		.click(function(){
			$(this).siblings('.child-'+this.id).toggle();
			$(this).toggleClass("up");
		});
	});

So far the arrow image is toggling but i can't seem to work out how to get the .click function to affect the whole row and not just the image. Can anybody help me?

Thanks

Trying to put my finger on how to achieve this result. About half way down on the page linked below you'll see "Recent - Comments - Popular - Tags"
this table expands when you rollover and stays expanded while allowing you to populate the different content. Any help would be greatly appreciated, not even sure if I'm in the right forum.

http://thedailydisney.com/blog/2010/...magic-kingdom/


Thanks for the time.
Will

Hello,

I was wondering whether it is possible to expand and collapse forum categories using JavaScript. The forum board I am using is phpBB.

Hi, I have a web form that I'm creating and it has some expandable checkboxes that need to be restricted based on choice.

This is my criteria:
If someone chooses checkbox number 1, they cannot choose any other checkbox.
If someone chooses checkbox number 2, they may also choose number 3 but not 1 or 4, they must also answer the question that appears below.
If someone chooses checkbox number 3, they may also choose number 2 but not 1 or 4, they must also answer the question that appears below.
If someone chooses checkbox number 4, they cannot choose any other checkbox, and must answer the questions that appears below. One more caveat: If checkbox number 2 is chosen, and they've filled in all three lines of the question below, I need for them to dynamically add more lines as needed.

I have attached my web form so you can see what I've done. I've researched these options and tried code from various examples but I can't seem to get it to work.

Does anyone know how to accomplish all of this? Thank you in advance!

I'm not great with javascript and I'd appreciate any help or guidance. I'm using jquery colorbox to open a window when the page loads. However there is also a video player that automatically plays at the same time (flash). I'm trying to figure out how to modify the colorbox code so that the containing div for the video is initially hidden from view until the colorbox window is closed.

The function to initialize it is:
Code:

$(document).ready(function() {
		$.fn.colorbox({href:"#inline_example1", width:"33%", inline:true, open:true});
	});

Which I thought is where code should go to initially hide the div? Then I'm not sure but inside the actual colorbox code there is a function for closing the window. Is there a way to attach an event to that closing function that will change the hidden div to being visible?

Code:

$overlay.click(function () {
			if (settings.overlayClose) {
				publicMethod.close();
			}
		});

Hey thanks in advance to anyone who can take a peak at my code and hopefully point me in the correct direction.

I have been working on my final project in my javascript class for a bit, and there are a few erros I cant seem to find through firebug or error console.
It is due this evening at midnight, so anyone that could help, I really need this assignment for a decent grade.

Basically there are two issues so far, one needs to be solved so the other can be as well.

First, line 103 - 105 should create a hyperlink to the specified id, but is doesn't return a number. so the link goes no where
it is this code:
PHP Code:
 //create hypertext link to the section heading 
            var linkItem = document.createElement("a"); 
            linkItem.innerHTML = n.innerHTML; 
            linkItem.href = "#" + n.id; 


Next I belive there is a problem with the function expandCollapseDoc(), that might fix itself when the other problem is solved.

The document should expand and collapse with the menu.

Here is my javascript code:
PHP Code:
/*
   New Perspectives on JavaScript, 2nd Edition
   Tutorial 7
   Tutorial Case

   Author: Mike Cleghorn
   Date:   2-15-10

   Filename: toc.js

   Global Variables:
   sections
      An array contain the HTML elements used as section headings in the historic document

   Functions List:

   addEvent(object, evName, fnName, cap)
      Adds an event hander to object where evName is the name of the event,
      fnName is the function assigned to the event, and cap indicates whether
      event handler occurs during the capture phase (true) or bubbling
      phase (false)

   makeTOC()
      Generate a table of contents as a nested list for the contents of the "doc" 
      element within the current Web page. Store the nested list in the "toc"
      element.

   levelNum(node)
      Returns the level number of the object node. If the object node does not
      represent a section heading, the function returns the value -1.

   createList()
      Goes through the child nodes of the "doc" element searching for section headings.
      When it finds a section heading, a new entry is added to the table of contents

   expandCollapse()
      Expands and collapse the content of the table of contents and the historic
      document

   expandCollapseDoc()
      Goes through the child nodes of the "doc" element determining which elements to
      hide and which elements to display

   isHidden(object)
      Returns a Boolean value indicating whether object is hidden (true) or
      not hidden (false) on the Web page by examining the display style for object
      and all its parent nodes up to the body element

*/

function addEvent(object, evName, fnName, cap) {
   if (object.attachEvent)
       object.attachEvent("on" + evName, fnName);
   else if (object.addEventListener)
       object.addEventListener(evName, fnName, cap);
}

addEvent(window, "load", makeTOC, false);

var sections = new Array("h1","h2","h3","h4","h5","h6");
var sourceDoc; //document on which TOC is based on
 
function makeTOC(){
    var TOC = document.getElementById("toc");
    TOC.innerHTML = "<h1>Table of Contents</h1>";
    var TOCList = document.createElement("ol");
    TOC.appendChild(TOCList);
    
    sourceDoc = document.getElementById("doc");
    
    //generate list items containing section headings
    createList(sourceDoc, TOCList);
}

function levelNum(node) {
    for (var i = 0; i < sections.length; i++) {
        if(node.nodeName == sections[i].toUpperCase()) return i;
    }
    return -1; //node is not section heading
}

function createList(object, list) {

    var prevLevel = 0; //level of the pervious TOC entry
    
    var headNum =  0; //running count of headings
    
    for (var n = object.firstChild; n != null; n = n.nextSibling) {
        //loop through all nodes in object
        
        var nodeLevel = levelNum(n);
        if (nodeLevel != -1) {
            //node represents a section heading
            
            //insert id for the section heading if necessary
            headNum++;
            
            //create list item to match
            var listItem = document.createElement("li");
            listItem.id = "TOC" + n.id;
            
            
            //create hypertext link to the section heading
            var linkItem = document.createElement("a");
            linkItem.innerHTML = n.innerHTML;
            linkItem.href = "#" + n.id;
                        

            //append the hypertext to the list entry
            listItem.appendChild(linkItem);
            
            
            if (nodeLevel == prevLevel) {
                //append the entry to the current list
                list.appendChild(listItem);
            } else if (nodeLevel > prevLevel) {
                //append entry to new nest list
                var nestedList = document.createElement("ol");
                nestedList.appendChild(listItem);
                
                list.lastChild.appendChild(nestedList);
                
                //add plus/minus box beffore the text
                var plusMinusBox = document.createElement("span");
                plusMinusBox.innerHTML = "--";
                addEvent(plusMinusBox, "click", expandCollapse, false)
                nestedList.parentNode.insertBefore(plusMinusBox, nestedList.previousSibling);
                
                list = nestedList;
                prevLevel = nodeLevel;
                
            } else if (nodeLevel < prevLevel) {
                //append entry to a higher-level list
                var levelUp = prevLevel - nodeLevel;
                for (var i = 1; i<= levelUp; i++) {list = list.parentNode.parentNode;}
                
                list.appendChild(listItem);
                prevLevel = nodeLevel;
            }
        }
    }
}

function expandCollapse(e) {
    var plusMinusBox = e.target || event.srcElement;
    var nestedList = plusMinusBox.nextSibling.nextSibling;

    //Toggle the plus and minus symbol
    if (plusMinusBox.innerHTML == "--") plusMinusBox.innerHTML = "+"
    else plusMinusBox.innerHTML = "--";
    
    //Toggle display of nested list
    if(nestedList.style.display == "none") nestedList.style.display = ""
    else nestedList.style.display = "none";
                
    //expand/collapse doc to match TOC
    expandCollapseDoc();
}

function expandCollapseDoc() {
    var displayStatus = "";

    for  (var n = sourceDoc.firstChild; n != null; n = n.nextSibling) {
        var nodeLevel = levelNum(n);
        if (nodeLevel != -1) {
    
            //determain display status of TOC entry
            var TOCentry = document.getElementById("TOC" + n.id);
            
            if (isHidden(TOCentry)) displayStatus = "none"
            else displayStatus = "";
        }
        
        if (n.nodeType == 1) {
            //apply to current status for the node
            n.style.display = displayStatus;
        }
    }
}

function isHidden(object) {
    for (var n = object; n.nodeName != "BODY"; n = n.parentNode) {
        if (n.style.display = "none") return true;
    }
    return false;
} 



the html was too long, so i uploaded it to my webspace

you can check out the almost working version at http://www.kinetic-designs.net/final/usconst.htm

Again thank you so much! Any questions just ask!

I have 3 sections next to each other on my site, if some1 adds more text then a section can display the section is resized to fit that text. The other 2 should adopt the other section(s) height.

now it's all working if I use it once, but if I add more text twice, the section is not resized - this is the code I'm using to resize the sections:

Code:

// JavaScript Document

function adjustT()
{
    var s1 = document.getElementById('section1');
    var s2 = document.getElementById('section2');
    var s3 = document.getElementById('section3');
    
    
    if (document.getElementById('section1').offsetHeight != 380)
    {
        document.getElementById('section2').style.height =
        document.getElementById('section3').style.height =
        document.getElementById('section1').offsetHeight + 'px';
    }
    else if (document.getElementById('section2').offsetHeight != 380)
    {
        document.getElementById('section1').style.height =
        document.getElementById('section3').style.height =
         document.getElementById('section2').offsetHeight + 'px';
    }
    else if (document.getElementById('section3').offsetHeight != 380)
    {
        document.getElementById('section1').style.height =        
        document.getElementById('section2').style.height =
         document.getElementById('section3').offsetHeight + 'px';
    }
}

the original height of each section is 380px

In the following code I display two buttons in the randommember div. I then append the randommember div with contents of the rana variable. This variable stores information related to a featured member and displays it as a link. Basically buttons appear on screen which are then followed by the featured member. But I would like to switch this around and have the featured member appear followed by the buttons. How can I do this? Obviously I can't put the buttons into the rana variable because then these become a link also removing the links functionality. Does anybody have any ideas how I can solve this problem. I am new to Javascript so please be gentle.

Code:

r = Math.floor(Math.random() * x.length);

function randommember() {
    name = (x[r].getElementsByTagName("name")[0].childNodes[0].nodeValue);
    sex = (x[r].getElementsByTagName("sex")[0].childNodes[0].nodeValue);
    seeking = (x[r].getElementsByTagName("seeking")[0].childNodes[0].nodeValue);
    image = (x[r].getElementsByTagName("imgname")[0].childNodes[0].nodeValue);
    rana = document.createElement('a');
    aIdName = 'random';
    ahref = '#';
    aclick = 'show(' + r + ')';
    rana.setAttribute('id', aIdName);
    rana.setAttribute('href', ahref);
    rana.setAttribute('onclick', aclick);
    rana.innerHTML = "<h3>Featured Member</h3><br /><img src='images/" + image + ".gif' /><br /><br />Name: " + name + "<br />Sex: " + sex + "<br />Seeking: " + seeking;
    document.getElementById("randommember").innerHTML = "<input type='button' onclick='previous()' value='<<' /><input type='button' onclick='next()' value='>>' /><br />";
    document.getElementById("randommember").appendChild(rana);

}

I have to create a mock up page with a popup that reopens every time you close it. Can someone explain to me how to do this?

The follow code DOES WORK, however not as I want it TO.

I have a domain FRAMED / Redirect to a free blogging site. at the BLOGGING site I have to following code in the header to redirect to my domain name.

WHAT IS HAPPENING IS AS YOU CAN GUEST IT is going into a loop.


WHAT I am trying to do is get the LINK juice SERP to the domain name. SO the java code is right but I want it to quit ONCE after the redirect / forward.

as the site is in FRAME once directed to the domain name it STICKS....on the domain name.


<script language='javascript'>
document.location='http://www.GOOGLE.COM/';
</script>



I am new VERY new to javascript

Hiya, I created this thread on the html forum but I'm not sure if it can be done with javascript, so I'll post here as well. I was wondering if there's a way to make various sections of the image clickable? The sections on the image are not rectangular so I can't make divs. I don't think I can use imagemap either since that only works for making one clickable area right? I already cut out these sections in photoshop and saved them with alpha background, and created a "glowing" version of each section, since I want to make it so that when mouse hovers over it, it will glow. But I can't stack them on top of each other, since if I do that only the topmost layer will be clickable for those areas where they will overlap with rectangular divs.
This is example of what I mean:


Thanks

Hello,
I had a php page, which contains links when I click on a link it will issue a new page, I want to make the main page to be refreshed once the new page being closed.
Any suggestions?
thanks

I am very new to Javascript and I have been able to get the menu to close and open, but I can't figure out how to start it up automatically closed at first.

I've tried setting ids and values, but nothing seems to work! Please help me out!

Code:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Lab 5_3</title>
<script type="text/javascript">
function collapseItem(whichitem)
{
	if (document.getElementById(whichitem).style.display == "none")
	{
		document.getElementById(whichitem).style.display = "block";
	}
	else
	{
		document.getElementById(whichitem).style.display = "none";
	}
}
</script>
</head>
<body>
<p><a href="#" onClick="collapseItem('category1')">Menu 1</a></p>
<div id="category1">
  <ul>
    <li>Option 1</li>
    <li>Option 2</li>
  </ul>
</div>
</body>
</html>