Welcome to WebmasterWorld Guest from 54.166.141.12

Forum Moderators: open

Message Too Old, No Replies

The perfect expand/collapse script?

Simple code that uses cookies to remember users preferences

     
5:34 am on Jan 27, 2006 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2006
posts:13
votes: 0


Hi all, I'm new here. I have a good understanding of css and xhtml however I have a dhtml question that nobody seems to be able to answer.

I'm searching for the perfect script capable of expanding and collapsing some content. The best thing I could find with Google was "DHTML expand and collapse div menu" at [dustindiaz.com...] The code is really light, however it is not exactly what I'm looking for.

Have you seen a script that can remember the state of the menu (collapsed or expanded) for the next time you visit the page? Like Gmail where the state of the "labels" box is remembered?
In my case I have a definition list:

<dl>
<dt><a>Switch link</a></dt>
<dd>Content</dd>
</dl>

Is it possible to have a script that when "Switch link" is clicked to show or hide <dd>? And also to remember its state (with cookies?) for next time. And also not to put an id or classes in <dd>:))?

9:58 pm on Jan 27, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts:3175
votes: 22


Hi neomatrix and welcome to WebmasterWorld.

Are you looking to have an animation or will two separate states work for you? If the later then I could provide you the script after I set it to use a cookie to remember the preference. Let me know please.

John

10:20 pm on Jan 27, 2006 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2006
posts:13
votes: 0


JAB Creations, it would be great if you create a script with two different states (though I'm not sure what an animation means in this case).

If you are able to write a code using cookies you would be the first one to create such. I'm wondering why nobody has ever published such a script available for free copy. There is an obvious need for it.

Thank you a lot!

10:54 pm on Jan 27, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts:3175
votes: 22


Here is the first part without cookies...

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Example</title>
<script type="text/javascript">
//<![CDATA[
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
//]]>
</script>
<style type="text/css">
div.toggle {
display: none;
}
div.toggleshow {
background: #fff;
border: #000 solid 1px;
color: #000;
display: block;
}
</style>
</head>

<body>

<div>
<a href="#" onclick="change('toggle1', 'toggleshow');">Show toggle1</a>
<br />
<a href="#" onclick="change('toggle2', 'toggleshow');">Show toggle2</a>
</div>

<div class="toggle" id="toggle1">
<p>This is toggle1.</p>
</div>

<div class="toggle" id="toggle2">
<p>This is toggle2.</p>
</div>

</body>
</html>

I still have to add the cookie part which should take me less then an hour perhaps. ;)

John

10:55 pm on Jan 27, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts:3175
votes: 22


Oh last minute question, do you use PHP? It's a bit easier with serverside scripting. Let me know first please, thanks!

John

11:24 pm on Jan 27, 2006 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2006
posts:13
votes: 0


Hi again. Unfortunaltelly I can't use php. If you can't do it wihtout php ... I don't want to be too insolent.
11:31 pm on Jan 27, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts:3175
votes: 22


Hmm, that makes it difficult as I would have PHP just send the class based on the cookie. Otherwise I'd be wasting both our time if I did it using document.write which does not work with XHTML 1.1 (with the proper mimetype).

Well I will give it a shot exclusively clientside. :)

John

11:52 pm on Jan 27, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts:3175
votes: 22


Hmm, this is a little bit beyond my ability (for the moment being at least) but I do have an idea of what should be done and some of the script(s) needed to do so!

All I need to make this work is a script that I can use as so...

JS raw and stripped to concept...

if (cookie toggle = on)
{
document.getElementById "toogle3"
find Attribute "toggle" and replace with "toggleshow";
}

The code for JavaScript to reference a specific cookie is as follows...

var $toggle3 = getCookie("toggle3"); function getCookie(Name) { var search = Name + "="; var CookieString = document.cookie; var result = null;
if (CookieString.length > 0) { offset = CookieString.indexOf(search); if (offset!= -1) { offset += search.length; end = CookieString.indexOf(";", offset)
if (end == -1) {end = CookieString.length}; result = unescape(CookieString.substring(offset, end))}}return result;}

if ($toggle3 == on) {}

Long, obnoxious, but it works.

Lets keep "toggle3" as we'll want to be able to easily make a toggle4 later on so this script can be used dynamically on the page.

But my friend and I are going out for Chinese right now so I won't be back for a couple hours. Can someone please cover that part? If so then I'm pretty sure I can get this to work both for XHTML 1.0 Strict as text/html and XHTML 1.1 served as application/xhtml+xml.

John

5:11 pm on Jan 28, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 22, 2002
posts:1751
votes: 0


I'm wondering why nobody has ever published such a script available for free copy.

Well, if you would happen to run into one of my sites, you would just have to do some copy & paste from the source code. I would never know of it.

Anyway, I'd prefer to toggle the value of the display property from 'none' to 'block' and back. It's usually easier than swapping classnames. (just my $0.02).

5:38 pm on Jan 28, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts:3175
votes: 22


neomatrix still wants the user's preference to be remembered.

Though swapping the display attribute makes sense.

You around neo?

5:52 pm on Jan 28, 2006 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2006
posts:13
votes: 0


Yes I'm here all the time but again ... I'm afraid I opened too much work for you. I didn't know it is so complicated.
Initally I wanted to have Gmail-like expand/collapse boxes. I find them very useful.

The site I want to use the script is not professional at all. Actually it is my class website for CIS233S Internet Web Page Scripting at Portland Community College :) I don't thinkg we are going to cover so complex topics.

6:06 pm on Jan 28, 2006 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2006
posts:13
votes: 0


May I ask you another question regarding the script I mentioned in my first post? Is it possible to remove the id="myvar" from <dd> and to change something in the script so <dd> doesn't need any id or classes?

<dl>
<dt><a onclick="switchMenu('myvar');">Swtich link</a></dt>
<dd id="myvar">Content</dd>
</dl>

function switchMenu(obj) {
var el = document.getElementById(obj);
if ( el.style.display!= 'none' ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}

7:06 pm on Jan 28, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Sept 22, 2002
posts:1751
votes: 0


To elaborate on my previous post, here's a quick and dirty but working example. It uses a UL for the menu. The function showMenu loops through the collection of LIs and shows or hides them. The (clickable) listitem with class="header" will always be shown.


<script type="text/javascript">
<!--
var aPrefix = 'pr';

function getCurrentState(mID) {
// returnvalues: 1 (closed), 2 (opened)
return document.cookie.substr(document.cookie.indexOf(mID+'=') + mID.length +1, 1);
}

function initMenu(mID) {
// make the header clickable, assign an ID
var kids = document.getElementById(mID).childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].className == 'header') {
kids[i].onclick = toggleMenu;
kids[i].id = aPrefix + mID;
}
}
// show or hide the menu
showMenu(mID);
}

function showMenu(mID) {
var currentState = getCurrentState(mID);
document.getElementById(aPrefix+mID).title = (currentState == 1? 'show' : 'hide') + ' this menu';
document.getElementById(aPrefix+mID).style.cursor = 'pointer';
var kids = document.getElementById(mID).childNodes;
for (var i = 0; i < kids.length; i++) {
if (kids[i].tagName == 'LI' && kids[i].className!= 'header') {
kids[i].style.display = currentState == 1? 'none' : 'block';
}
}
}

function toggleMenu(e) {
if (window.event) e = window.event;
var mID = e.srcElement? e.srcElement.id : e.target.id;
mID = mID.substr(aPrefix.length);
// write the cookie
var oneyear = new Date(); oneyear.setFullYear(oneyear.getFullYear() + 1);
document.cookie = mID + '=' + (getCurrentState(mID) == 1? 2 : 1) + '; expires=' + oneyear.toGMTString() + '; path=/';
// show or hide the menu
showMenu(mID);
}
// -->
</script>

<ul id="menu2">
<li class="header">Header</li>
<li><a href="/foo.html">&raquo; foo</a></li>
<li><a href="/bar.html">&raquo; bar</a></li>
</ul>
<script type="text/javascript">initMenu('menu2');</script>
7:16 pm on Jan 28, 2006 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Apr 15, 2004
posts:2047
votes: 0


Try this one out. No ids used. It could be part of a cookie-based persistence system, if the cookie stored the index of the <dd> element in the list.

<html><head>
<style type="text/css">

.togList
{
font-family: verdana;
}

.togList dt
{
cursor: pointer; cursor: hand;
}

.togList dt span
{
font-family: monospace;
}

.togList dd
{
width: 200px;
padding-bottom: 15px;
}

html.isJS .togList dd
{
display: none;
}

</style>
<script type="text/javascript">

/* Only set closed if JS-enabled */
document.getElementsByTagName('html')[0].className = 'isJS';

function tog(dt)
{
var display, dd=dt;
/* get dd */
do{ dd = dd.nextSibling } while(dd.tagName!='DD');
toOpen =!dd.style.display;
dd.style.display = toOpen? 'block':''
dt.getElementsByTagName('span')[0].innerHTML
= toOpen? '-':'+' ;
}
</script>

</head><body>

<dl class="togList">
<dt onclick="tog(this)"><span>+</span> Header 1</dt>
<dd>
<p>Info info info info Info info info info
Info info info info Info info info info</p>
<p>Info info info info Info info info info
Info info info info Info info info info</p>
</dd>
<dt onclick="tog(this)"><span>+</span> Header 2</dt>
<dd>
<p>Info info info info Info info info info
Info info info info Info info info info</p>
<p>Info info info info Info info info info
Info info info info Info info info info</p>
</dd>
</dl>

</body>
</html>

7:24 pm on Jan 30, 2006 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member jab_creations is a WebmasterWorld Top Contributor of All Time 10+ Year Member

joined:Aug 26, 2004
posts:3175
votes: 22


Neo did you get the script working? If not please let me know (you can send me a sticky if you like).

John

6:28 am on Feb 3, 2006 (gmt 0)

New User

10+ Year Member

joined:Jan 27, 2006
posts:13
votes: 0


I have to admit I found another script... It is moo.fx and it uses cookies. It has a very nice transitional effect, as well as other cool effects. The only problem is that moo.fx has no documentation and it's difficult for me to figure out how to use a changing background image in the link. See it at <umm no, since URLs aren't allowed per the TOS [WebmasterWorld.com]>

[edited by: DrDoc at 6:33 am (utc) on Feb. 3, 2006]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members