Solving Expandable Content Box Issue in Programming Forum

  • Thread starter raolduke
  • Start date
  • Tags
    Box
In summary, the script I am using doesn't collapse properly the first box when the other two boxes are clicked.
  • #1
raolduke
156
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
  • #2
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.
 
  • #3
Someone
Anyone?
 
  • #4
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.
 
  • #5
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 ^_^
 

1. How do I create an expandable content box in a programming forum?

To create an expandable content box in a programming forum, you will need to use a combination of HTML, CSS, and JavaScript. First, create a container div to hold your content and give it a class or ID. Then, use CSS to set the initial height and overflow properties of the container. Finally, use JavaScript to toggle the height of the container when a user clicks on a button or link.

2. What is causing my expandable content box to not work properly?

There could be several reasons why your expandable content box is not working properly. Some common issues include incorrect HTML structure, conflicting CSS styles, or errors in your JavaScript code. It is important to carefully check your code and use debugging tools to identify and fix any errors.

3. How can I make my expandable content box responsive?

To make your expandable content box responsive, you will need to use CSS media queries to adjust the height and width of the container based on the screen size. You can also use percentage values for the height and width instead of fixed pixel values to make the box adapt to different screen sizes.

4. Can I use a different animation for my expandable content box?

Yes, you can use different animations for your expandable content box by modifying the CSS transitions or using a JavaScript library like jQuery. You can also experiment with different easing functions or keyframe animations to achieve a unique effect.

5. Is it possible to have multiple expandable content boxes on one page?

Yes, it is possible to have multiple expandable content boxes on one page. Each box will need to have a unique ID or class and separate JavaScript functions to toggle their heights. You can also use a loop in your JavaScript code to make the process more efficient if you have a large number of boxes.

Similar threads

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

Hot Threads

Recent Insights

Back
Top