Solving Expandable Content Box Issue in Programming Forum

  • Thread starter Thread starter raolduke
  • Start date Start date
  • Tags Tags
    Box
AI Thread Summary
The discussion centers on issues with a JavaScript script for expandable content obtained from Flooble. The user reports that while the first expandable box functions correctly, the subsequent boxes do not collapse properly and affect the behavior of the first box. Key points include the identification of structural errors in the HTML, such as the presence of two body tags and duplicate IDs, which are problematic. A suggestion is made to correct the HTML structure and ensure unique IDs for each expandable box. The user acknowledges the guidance received, indicating that the corrections clarified the functionality of the script. There is also an inquiry about the possibility of implementing a similar design using CSS, though the user expresses doubt about its feasibility.
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 ^_^
 

Thread 'MS 365 Profile Badge colour'

Sorry if 'Profile Badge' is not the correct term. I have an MS 365 subscription and I've noticed on my Word documents the small circle with my initials in it is sometimes different in colour document to document (it's the circle at the top right of the doc, that, when you hover over it it tells you you're signed in; if you click on it you get a bit more info). Last night I had four docs with a red circle, one with blue. When I closed the blue and opened it again it was red. Today I have 3...
View full post »
Thread 'ChatGPT Examples, Good and Bad'

Thread 'ChatGPT Examples, Good and Bad'

I've been experimenting with ChatGPT. Some results are good, some very very bad. I think examples can help expose the properties of this AI. Maybe you can post some of your favorite examples and tell us what they reveal about the properties of this AI. (I had problems with copy/paste of text and formatting, so I'm posting my examples as screen shots. That is a promising start. :smile: But then I provided values V=1, R1=1, R2=2, R3=3 and asked for the value of I. At first, it said...
View full post »

Similar threads

HTML/CSS How to achieve a paper effect in CSS for Joplin?
Replies
1
Views
2K
Java Javascript multiplication tables
Replies
9
Views
4K
JavaScript Need insert of mathcode in Table element
Replies
13
Views
2K
Struggling with Bayesian Truth Serum formula
Replies
1
Views
2K
JavaScript Problem using dat.GUI controller library
Replies
9
Views
4K
PHP Advice on how to set column widths in php
Replies
7
Views
7K
Different Button Background and Text Colors
Replies
4
Views
2K

Hot Threads

Recent Insights

Back
Top