Solving Expandable Content Box Issue in Programming Forum

  • Thread starter Thread starter raolduke
  • Start date Start date
  • Tags Tags
    Box
Click For Summary

Discussion Overview

The discussion revolves around issues with an expandable content box script used in a programming forum. Participants explore the script's functionality, HTML structure, and potential improvements or alternatives.

Discussion Character

  • Technical explanation
  • Debate/contested

Main Points Raised

  • One participant expresses confusion about the script's functionality, noting that while the first box works as intended, the subsequent boxes do not collapse properly and affect the first box's behavior.
  • Another participant suggests that there may be an easier way to implement the design, questioning the feasibility of using CSS for this purpose.
  • A participant points out structural issues in the HTML, including the presence of two body tags and duplicate IDs, recommending corrections to ensure proper functionality.
  • The original poster acknowledges the oversight regarding the IDs and expresses gratitude for the assistance received in identifying the problem.

Areas of Agreement / Disagreement

Participants generally agree on the need to correct the HTML structure and the importance of unique IDs for each expandable box. However, there is no consensus on the best approach to implement the design, particularly regarding the use of CSS.

Contextual Notes

Limitations include unresolved issues related to the overall design approach and the specific implementation details of the expandable content boxes.

raolduke
Messages
155
Reaction score
0
I posted in the programming forum.. Not sure if that was the right place. But this script I am using that I got from fooble confuses me. The first box acts how its suppose to but the other 2 don't collapse properly or causes the first box to act different than how its suppose to.

<html>

<head>
<title>Grey Matter</title>
<!-- flooble Expandable Content header start -->
<script language="javascript">
// Expandable content script from flooble.com.
// For more information please visit:
// http://www.flooble.com/scripts/expand.php
// Copyright 2002 Animus Pactum Consulting Inc.
//----------------------------------------------
var ie4 = false; if(document.all) { ie4 = true; }
function getObject(id) { if (ie4) { return document.all[id]; } else { return document.getElementById(id); } }
function toggle(link, divId) { var lText = link.innerHTML; var d = getObject(divId);
if (lText == '+') { link.innerHTML = '−'; d.style.display = 'block'; }
else { link.innerHTML = '+'; d.style.display = 'none'; } }
</script>
<!-- flooble Expandable Content header end -->
</head>

<body>

<p><img border="0" src="../gm_02.jpg" width="400" height="200"></p>
<!-- flooble Expandable Content box start -->
<div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; width:400; height:26"><table border="0" cellspacing="0" cellpadding="2" width="400" style="background:#000000 ; color: #FFFFFF; "><tr><td>
<font face="Impact" size="6">links</font></td><td align="right">
<font face="Arial Black">
<a title="show/hide" id="exp1159471379_link" href="javascript: void(0);" onclick="toggle(this, 'exp1159471379');" style="text-decoration: none; color: #FFFFFF; font-weight:700">
−</a></font></td></tr></table>
<div id="exp1159471379" style="padding: 3px;"><b><font face="Verdana" size="1">
these are where the links would be</font></b></div>
</div>



</html></noscript>
<!-- flooble Expandable Content box start -->
<div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; width:400; height:26"><table border="0" cellspacing="0" cellpadding="2" width="400" style="background:#000000 ; color: #FFFFFF; "><tr>
<td width="317">
<font face="Impact" size="6">news</font></td><td align="right" width="75">
<font face="Arial Black">
<a title="show/hide" id="exp1159471379_link2" href="javascript: void(0);" onclick="toggle(this, 'exp1159471379');" style="text-decoration: none; color: #FFFFFF; font-weight:700">
−</a></font></td></tr></table>
<div id="exp1159471380" style="padding: 3px;"><b><font face="Verdana" size="1">
this is where the news would be</font></b></div>
</div>

<!-- flooble Expandable Content box start -->
<div style="border: 1px solid #000000; padding: 0px; background: #EEEEEE; width:400; height:26"><table border="0" cellspacing="0" cellpadding="2" width="400" style="background:#000000 ; color: #FFFFFF; "><tr>
<td width="317">
<font face="Impact" size="6">music</font></td><td align="right" width="75">
<font face="Arial Black">
<a title="show/hide" id="exp1159471379_link1" href="javascript: void(0);" onclick="toggle(this, 'exp1159471379');" style="text-decoration: none; color: #FFFFFF; font-weight:700">
−</a></font></td></tr></table>
<div id="exp1159471381" style="padding: 3px;"><b><font face="Verdana" size="1">
might have a music player here</font></b></div>
</div>

</body>
 
Computer science news on Phys.org
If there is an easier way to implement this sort of design please feel free to tell me. I was wondering if you could make one using css but probably not.
 
Someone
Anyone?
 
Well, first of all, you have two body tags. Second of all, the second body tag is not within an html tag, and third when you added the second box you didn't change its id to be different then the first box (two elements with the same ID is bad).

Correct the html structure of the document, then replace every exp1159471379 that you find with exp1159471380, for example.
 
I am sorry that I posted the wrong code there.. I had updated one that I named differently. The exp works and makes sense.. I don't know why I didn't see it till you helped me. Thanks a lot ^_^
 

Similar threads

  • · Replies 1 ·
Replies
1
Views
3K
  • · Replies 9 ·
Replies
9
Views
4K
  • · Replies 13 ·
Replies
13
Views
2K
  • · Replies 1 ·
Replies
1
Views
2K
  • · Replies 9 ·
Replies
9
Views
4K
  • · Replies 7 ·
Replies
7
Views
7K
  • · Replies 4 ·
Replies
4
Views
2K