Fixing Expandable Content Java Script Issues

  • Thread starter raolduke
  • Start date
In summary: 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 id="exp1159471380" style="padding: 3px;"><b><font face="Verdana" size="1"> might have a music player here</font></b></div>
  • #1
raolduke
156
0
Java script. Expandable content box. The problem with the script is that only the first box works correctly and the other two don't collapse.

<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>
 
Technology news on Phys.org
  • #2
</html>The problem is that the script is referring to the same div ID in all three of the expandable content boxes. The div IDs need to be different for each box in order for the script to work correctly.<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
 
  • #3


Thank you for bringing this issue to our attention. It seems like there may be some errors in the JavaScript code that is causing the expandable content boxes to not work correctly. Without being able to see the full code and test it, it is difficult to pinpoint the exact issue. However, here are a few possible solutions:

1. Check for errors: The first step in troubleshooting any JavaScript issue is to check for errors in the console. Open the developer tools in your browser and see if there are any error messages related to the JavaScript code. If there are, try to fix those errors first and see if it resolves the issue.

2. Make sure the IDs are unique: Each expandable content box has a unique ID that is used in the JavaScript code to toggle its display. Make sure that these IDs are unique and not repeated anywhere else on the page. If they are repeated, it can cause conflicts and prevent the boxes from working correctly.

3. Check the toggle function: The toggle function in the JavaScript code is responsible for showing and hiding the content boxes. Double check that the function is correctly referencing the IDs of the links and content boxes. Also, make sure that the function is being called correctly when the links are clicked.

4. Use a different expandable content script: If none of the above solutions work, it may be worth trying a different expandable content script. There are many available online that may work better for your specific needs.

I hope this helps resolve the issue with the expandable content boxes. If you continue to experience problems, please provide more details and the full code so that we can further assist you.
 

What are expandable content Java Script issues?

Expandable content Java Script issues refer to problems that arise when using JavaScript code to create expandable or collapsible content on a webpage. This can include issues with the functionality, compatibility with different devices or browsers, or errors in the code itself.

Why do expandable content Java Script issues occur?

Expandable content Java Script issues can occur due to a variety of reasons, such as incorrect syntax in the code, conflicts with other JavaScript or CSS code on the webpage, or compatibility issues with different browsers or devices. They can also occur if the code is not properly optimized or if there are errors in the logic of the code.

How can I fix expandable content Java Script issues?

To fix expandable content Java Script issues, you can start by checking the code for any syntax errors and ensuring that it is properly structured. Next, you can try debugging the code to identify any logic errors or conflicts with other code. It may also help to test the code on different browsers and devices to ensure compatibility. Additionally, optimizing the code and using best practices can help prevent future issues.

What are some best practices for avoiding expandable content Java Script issues?

Some best practices for avoiding expandable content Java Script issues include using unique variable names, avoiding global variables, and using proper indentation and formatting. It is also important to test the code on different devices and browsers, and to regularly review and optimize the code for efficiency and compatibility.

When should I seek help with fixing expandable content Java Script issues?

If you are unable to identify and fix the issue on your own, it may be time to seek help from a more experienced JavaScript developer. Additionally, if the issue is causing significant problems on your webpage or impacting user experience, it is important to address it promptly by seeking assistance or finding alternative solutions.

Similar threads

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
Solving Expandable Content Box Issue in Programming Forum
    • Computing and Technology
Replies
4
Views
2K
PHP Advice on how to set column widths in php
    • Programming and Computer Science
Replies
7
Views
6K
Struggling with Bayesian Truth Serum formula
    • Set Theory, Logic, Probability, Statistics
Replies
1
Views
2K
Different Button Background and Text Colors
    • Programming and Computer Science
Replies
4
Views
2K

Hot Threads

Recent Insights

Back
Top