Solving Expandable Content Box Issue in Programming Forum

  • Thread starter Thread starter raolduke
  • Start date Start date
  • Tags Tags
    Box
Join the discussion
Ask a follow-up here, or get your own question answered by working scientists, mathematicians and engineers — people, not an autocomplete.
Real named experts · corrections over time · the nuance an AI answer skips
Sign up Log in
4 replies · 3K views
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>
 
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.
 
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

HTML/CSS How to achieve a paper effect in CSS for Joplin?
  • shivajikobardan
  • · Replies 1 ·
  • Programming and Computer Science
Replies
1
Views
3K
Java Javascript multiplication tables
  • adjacent
  • · Replies 9 ·
  • Programming and Computer Science
Replies
9
Views
4K
JavaScript Need insert of mathcode in Table element
  • aheight
  • · Replies 13 ·
  • Programming and Computer Science
Replies
13
Views
2K
Graduate Struggling with Bayesian Truth Serum formula
  • Illmaticus
  • · Replies 1 ·
  • Set Theory, Logic, Probability, Statistics
Replies
1
Views
2K
JavaScript Problem using dat.GUI controller library
  • aheight
  • · Replies 9 ·
  • Programming and Computer Science
Replies
9
Views
5K
PHP Advice on how to set column widths in php
  • Robbie8
  • · Replies 7 ·
  • Programming and Computer Science
Replies
7
Views
7K
Different Button Background and Text Colors
  • jjiimmyy101
  • · Replies 4 ·
  • Programming and Computer Science
Replies
4
Views
2K