JavaScript - Expanding All Collapsible Panels

Does anyone know of an alternative coding for this function that will do the trick in browsers such as firefox?

Code:

with (document)
{
	write("<STYLE TYPE='text/css'>");
	write(".hiddentext {display:none;}  .outline {cursor: hand; text-decoration:underline; font-family: Arial; font-size: 13px;}");
	write("</STYLE>");
}

function expandIt(whichEl)
{
whichEl.style.display = (whichEl.style.display == "block" ) ? "none" : "block";
}

<img src="images/click.gif" onclick="expandIt(el1); return false">

<div id="el1" class="hiddentext">

...content here...

</div>

Hello

This is brilliant and good to work with, there is one issue i have if someone can help please.

I have used example 4 bacuase it visually does exactly what i need, however there is one little problem i cant solve.

I copied the div and now have 2 collapsible divs next to each other, which nearly do exactly what i need.

I have lined up the 2 divs next to each other they both open, but the one on the left pushes the right one out to the right and i don't know how to do that.

here is the code

thanks

the animatedcollapse.js is too long to put but can be found here http://www.dynamicdrive.com/dynamici...edcollapse.htm

Code:

<script type="text/javascript">

    animatedcollapse.addDiv('jason', 'fade=1,height=80px')
    animatedcollapse.addDiv('kelly', 'fade=1,height=100px')
    animatedcollapse.addDiv('michael', 'fade=1,height=120px')

    animatedcollapse.addDiv('cat', 'fade=0,speed=400,group=pets')
    animatedcollapse.addDiv('dog', 'fade=0,speed=400,group=pets')
    animatedcollapse.addDiv('rabbit', 'fade=0,speed=400,group=pets,hide=1')

    animatedcollapse.ontoggle = function ($, divobj, state) { //fires each time a DIV is expanded/contracted
        //$: Access to jQuery
        //divobj: DOM reference to DIV being expanded/ collapsed. Use "divobj.id" to get its ID
        //state: "block" or "none", depending on state
    }

    animatedcollapse.init()
</script>

<div id="mobile_navigation">
<div id="sectionnav">
<a href="#" rel="toggle[dog]" data-openimage="section_active.gif" data-closedimage="section.gif"><img src="collapse.jpg" border="0" /></a> 
<div id="dog">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
</div>

<div id="searchnav">
<a href="#" rel="toggle[cat]" data-openimage="search_active.gif" data-closedimage="search.gif"><img src="collapse.jpg" border="0" /></a> 

<div id="cat">
The cat (Felis catus), also known as the domestic cat or house cat to distinguish it from other felines, is a small carnivorous species of crepuscular mammal that is often valued by humans for its companionship and its ability to hunt vermin. It has been associated with humans for at least 9,500 years. A skilled predator, the cat is known to hunt over 1,000 species for food. It can be trained to obey simple commands.
</div>
</div> 
</div>

Hello,

trying to cooperate with Spry atm, and its going fairly ok..
Its just one thing, i would like it when you open one spry panel,
the rest of them would close. Anyone know how to do that?

Thanks

Could someone be kind enough to provide me with code to make a collapsible menu? What I'm looking for is a vertical menu, that will open up the sub-categories upon a mouseover. Clicking on the menu item will bring them to the specific page. Oh, and this might not matter, but I'd prefer if I was able to style the menu to fit with my site theme. Thanks.

Hi there!

I hope I posted this question in the right place. I've been working on a Spry Master/Detail region using Dreamweaver CS4 for months now and I just can't get it to work right. I know very little about coding Javascript; I'm altering a template from a tutorial book. Here's my problem:

I want at least 2 master/detail regions on a single page, each nested in a spry tabbed panel, and each filtered by a non-destructive filter. I'm having all kinds of trouble getting this accomplished.I did some troubleshooting and have pinpointed exactly where things go wrong.

First, I thought that the problem might be that both of my tables were on the same page as the master/detail regions, so I put them on their own pages. No problems there. Then I built one master/detail region, with selectable filter menu, in a spry tabbed panel. No problem. Then I started all over again, and built each master/detail region stepwise following the instructions in the book. The 2 master/detail regions, 1 in each tab, are no problem. Applying the non-destructive filter is where things get tricky for me.

When I apply the non-destructive filters, all of the data from the first table disappears! The table in the 2nd tab still works perfectly.

My 2 spry datasets are named rs_CasteAbilities and rs_ProfAbilities. Here's the code for just creating the 2 spry data sets:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE]

No problems there. When I apply the nondestructive filter to the first spry dataset the first dataset filters just as it is supposed to and the second one does nothing, just as its supposed to. It looks like this:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
rs_CasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_CasteAbilities.gallery) {
return row;
}
return null;
}
rs_CasteAbilities.filter(chooseSet);
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities"); [CODE]

The problem is that when I apply the same filter to the 2nd spry dataset, the 2nd dataset filters, but the first dataset totally disappears when I view the page (firefox and safari)! I can post screenshots if needed. Here's the code I'm using:

[CODE] var rs_CasteAbilities = new Spry.Data.HTMLDataSet("gacasteabilitiesforactivetable.php", "GA_CasteAbilities");
rs_CasteAbilities.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_CasteAbilities.gallery) {
return row;
}
return null;
}
rs_CasteAbilities.filter(chooseSet);
var rs_ProfAbility = new Spry.Data.HTMLDataSet("gaprofessionabilitiesforactivetable.php", "GA_ProfAbilities");
rs_ProfAbility.gallery = '1';
function chooseSet(dataSet, row, rowNumber)
{
if (row == rs_ProfAbility.gallery) {
return row;
}
return null;
}
rs_ProfAbility.filter(chooseSet); [CODE]

This problem has been stumping me for weeks and I'm getting to the point where I need to get this done. I hope that in my inexperience, I was able to communicate this problem articulately. Please somebody help!

Thanks so much to anyone who takes the time to help me out. The page itself, with nothing showing up in the first tab, can be viewed he

www.iotheatre.com/GoldenAgeAbilities.php

-Chris Blockus

Hi. I haven't used much Javascript before and I have a question about the following code. I've taken it from this tut and changed it a bit so it applies an expand/collapse functionality to a floating sidebar on the side of a website I'm working on.

When I remove the background on the toggle function, it refuses to come back. I have a feeling it's a simple solution, I just don't know what syntax to fill into the second part of the conditional to restore the background image. I've tried display, show, an actual path to the image...

Code:

<script language="JavaScript" type="text/javascript">
    function toggle() {

      	
        var bar = document.getElementById('floater');
        var barText = document.getElementById('f_news');

       
        if (bar.style.width == '210px') {

            
            bar.style.width = '40px';
	    bar.style.backgroundImage = 'none';

            
            barText.style.display = 'none';

           
       
        } else {


            
            bar.style.width = '210px';
	    bar.style.backgroundImage = 'HELP!';

            
            barText.style.display = 'block';

        }
    }
	</script>

Thanks in advance.

I just wrote an essay to discover it had logged me out and I lost everything.

Grrrrrrr.

Here goes again, simplified this time.

I've got a sticky footer at the bottom of the page and a spry collapsible panel which expands to reveal content on mouse over.

The problem I'm facing is that the page doesn't scroll down with it, only the scroll bar gets larger to accommodate for a manual scroll down. This is kind of useless because the user might not even realise that there's extra content there in the first place if it's not automatic.

My question is, what's the best javascript code to use to automatically scroll the page down when the spry tab is opened and where would I insert it?

I've tried all morning with no success so far!

Thanks,

Nick,

I'm copy pasting this post this time round, I don't trust this website now

Hi,

I am trying to do a FAQ section on a site. New to this stuff.

What I would like to do is:
1.Question
2.Answer (Question and part of an answer are visible)
3. A button for expanding/collapsing. I am trying to do a button that changes on hover,and when text is expanded image changes, then on hover it changes again and if I press I collapse it to the original image).

What I got so far is this:
Code:

<head>
<style type="text/css">
.divVisible {display:block;}
.divHidden {display:none;}
#test {background-color: red;}
</style>
<script language="javascript" type="text/javascript">
var divID = "MyDiv";
function CollapseExpand() {
var divObject = document.getElementById(divID);
var currentCssClass = divObject.className;
if (divObject.className == "divVisible")
divObject.className = "divHidden";
else
divObject.className = "divVisible";
}
function changeImage()
{
document.images["Button1"].src= "less.png";
return true;
}
function changeImageBack() 
{
 document.images["Button1"].src = "more.png";
 return true;
}
</script>
</head>
<body>
<div id="test">
<div>
TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST TEST
</div>
<div id="MyDiv" class="divHidden">
-	TEST TEST TEST TEST
-	TEST TEST TEST TEST
-	TEST TEST TEST TEST
-	TEST TEST TEST TEST
-	TEST TEST TEST TEST
</div>
</div>
<A href="#" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" input id="Button1" type="button" onClick="return CollapseExpand()" ><img
name="Button1" src="less.png" width="81" height="42" border="0"  
alt="javascript button"></A> 
</body>
</html>

I tried different stuff but couldn't connect 4 images. (more.png, morehover.png, less.png, lesshover.png).

Thnx in advance
G.

If this is in the wrong forum please move it. I'm new to Javascript so I'm not so much aware of the types as of yet.

I'm using Javascript for the first time, and I've used it on my blog to create a blog archive. However, I want it to be set out like this:
Menu Item 1 [Click to expand]
-Sub Item 1.1 [Click to expand]
-Sub Item 2.1 [Click to get to page]

Menu Item 1 is expanding fine, and I know how to get Sub Item 2.1 to link to the page, however I can't seem to link Sub Item 1.1 to expand. Can someone help please?

URL: http://dinotamermeep.blogspot.com/p/blog-archive.html

Thank you,
-Meepski

Can anyone show me the code for a simple expanding navigation bar? I need to roll over the nav bar and for it to drop down with more options.

I know the code will be straight forward, I can't work it out though.

Thanks whoever can help = )

Code:

function initMenu(){
  var menus, menu, text, a, i, CurrentID;
  menus = getChildrenByElement(document.getElementById("menu"));
  CurrentID = document.getElementById("auto");
  for(i = 0; i < menus.length; i++){
    menu = menus[i];
    text = getFirstChildByText(menu);
    a = document.createElement("a");
    menu.replaceChild(a, text);
    a.appendChild(text);
    a.href = "#";
    a.onclick = showMenu;
    a.onfocus = function(){this.blur()};
	
  }

  //CurrentID.showMenu; thought this would work but it doesn.t
}

I am modifying a website for a company I am interning at. I have no javascript experience and was just thrown in. I need the menu to open when page is clicked so that it looks like the menu stayed open when you made a selection and the new page loads. I have a id in the html of the pages called "auto" to designate the menu item in the page to be opened. If anyone could help I would be very grateful. I will be keeping a lookout for posts

Hey everyone, I'm a little new to JS coding but I am trying to design a simple system that I hope you can help me with.

Basically, I want to know which is the best approach to this problem, or a direction where I can find info about it.

The web application I designed uses basic PHP with basic JS and very basic Ajax which populates some divs with MySQL data. I went with a more "Web 2.0" approach instead of having a page for everything; I wanted to create dynamic pages. That's the gist of how the site works... OK.

The issue is I have a table that is populated via a PHP script pulling from a MySQL database. This works fine. What I need is a way (via some clickable region on each <tr> element maybe?) to expand each table "row" to show a form to do some database updates. I don't need the full CRUD, just Read/Update and I am trying to write it as simple as possible.

I do not need help on the form, I just need a direction or suggestion on how to accomplish the act of displaying the form, or call it the "expanding rows which reveal a web form for database interaction".

I have seen some nice Ajax ways, but I am only a beginner when it comes to those techniques and am not in the habit of taking work from other people and using it on something I am creating (and I learn more this way too; the whole "teach a man to fish vs. give a man a fish")

Option#1: What I was thinking was a way to "hide" the form which could already exist on every row, but then "show" it via an expand function?
Option#2: Or maybe a generic hidden div that has the form on it, placed on the next row down when clicked,.. but then how would the form know which row to edit via MySQL?

I think option 1 sounds better.....

Again, I need help on making this form pop up on each table row.

Any help or direction would be greatly appreciated.

Sample code follows:

Code:

<table>
<thead>
<tr>
      <th>ID</th>
      <th>Name</th>
      <th>Number</th>
      <th>Address</th>
      <th>Email</th>
      <th>Alt Number</th>
</tr>
</thead>
<tbody>
//<!--Some PHP code that populates all table rows, every row is a row in the database like below-->//
<tr>
      <td onclick="javascriptfunction(this)">foo</td>
      <td>bar</td>
      <td>data</td>
      <td>from</td>
      <td>MySQL</td>
      <td>Database</td>
</tr>
<div id="PopUpForm">
<form id="form_id" name="form_name" action="foo.php" method="post">
<input type="hidden" name="id" value="//<!--Value of MySQL ID-->//"/>
	<table title="myTable" style="margin: auto; display:hidden">
		<tr class ="theader2"><th colspan="2">TEST TABLE</th>
                </tr>
		<tr>
			<td class="header">Some Field: </td>
			<td class="selector"><select name="foo" style="width: 150px;" id="foo">
                        <option value="" selected="selected">-- Select Value --</option>
                <tr>
                        <input type="submit" value="Submit" class="btn"/>
</form>
</div>
//<!--Some PHP code ends here-->//
</tbody>

Any help would be greatly appreciated =)

Hi all,

I'm using the scripts from Dynamic Drive http://www.dynamicdrive.com/dynamici...edcollapse.htm to create a sliding collapsing/expanding div.

I need to modify it slightly so instead of an image for the toggle, it has text hyperlink - changing from "Show More" to "Show Fewer".

Can anyone help?
Thanks

Hi all,

I am looking to create this in JS/DHTML/CSS that I found in a flash script you can view he
http://www.melodicmedia.com/dev/expa...ash_flash.html

I want the red expanding and contracting circle to be on top of a image so it only shows the parts of the image that the circle is around.

Any help you have would be much appreciated =)

Thank you =)

Light and Love and Healing to you,
-Patrick Arden McNally