Solved

Expand/Collapse blocks of text.

Posted on 2002-05-20
3
617 Views
Last Modified: 2010-08-05
The output below was generated by an html help aplication. I have added the java script and implementation of doExpand. My goal is to be able to expand/collapse sections of the document. As you will see I have 2 blocks that I want this to work with but I can't seem to get working. When I click the first section it collapses everything. When I click the 2nd section it collapses nothing. Perhaps I need a better script? The one listed in this document was listed in an example of the html help application I am using. Any insight would be apprecitated.

Thanks!


<html>
<head>
   <title>Expanding Sections in Action</title>
   <meta name="generator" content="Help & Manual">
   <meta name="keywords" content="">
   <style type="text/css">
      #nsr
       {
       padding: 6px 6px 0px 6px;
       border-bottom: none;
       background: #C0C0C0;
       vertical-align: top;
       z-index: 2;
       visibility: visible;
       left: 0;
       top: 0;
       position: absolute;
       width: 100%;
       }
      #mainbody
       {
       left: 0;
       top: 0px;
       margin: 0;
       position: absolute;
       padding: 10px;
       overflow: auto;
       height: 100%;
       z-index: 1;
       background-repeat: no-repeat;
       background-position: bottom right;
       background-attachment: fixed;
       }
   </style>
   <script type="text/javascript" language="JavaScript" src="nonscroll.js"></script>
<script language="JavaScript">
function doExpand(paraNum) {
if (paraNum.style.display=="none") {paraNum.style.display=""; }
else {paraNum.style.display="none"; }
}
</script>
</head>
<body bgcolor="#FFFFFF" scroll="no">



<div id="mainbody">

<p align="center"><span style="font-family:Helvetica,Arial; font-size:12pt; color:#000000"><u><!--JavaScript - this script is used by both sections-->



<br>
</u></p><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:12pt; color:#000000"><p align="center"></span><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"></p></span></td></tr></table><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"></span><span style="font-family:Helvetica,Arial; font-size:12pt; color:#000000"><u><!-- Start 2. Section -->
<a onclick="doExpand(section1)" href="#dummy">
<border=0>
<b>This is the heading of the 1st section</b>
</a>
<DIV ID="section1" STYLE="display:;">


<br>
</u><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:12pt; color:#000000"></span></span><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">1
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">2
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">3
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">4
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">5
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">6
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">7
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">8
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">9
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">10
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="8"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"></span></td></tr></table><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"><!--End 2. Section-->
</DIV>

&nbsp;<br>
<a onclick="doExpand(section2)" href="#dummy">
<border=0>
<b>This is the heading of the 2nd section</b>
</a>
<DIV ID="section2" STYLE="display:;">
</span></span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000"></span><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">Following Should Always be displayed!!!
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">1
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">2
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">3
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">4
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">5
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">6
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">7
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">8
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">9
&nbsp;<br>
</span></td></tr></table><table width="100%" border="0" cellpadding="0" cellspacing="0"><tr valign="top"><td width="14"></td><td><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000"></span></td></tr></table><span style="font-family:Helvetica,Arial; font-size:9pt; color:#000000">  10</span><span style="font-family:Helvetica,Arial; font-size:10pt; color:#000000">
<br>
</DIV>
</span></span>
</div>

</body>
</html>

0
Comment
Question by:WDB
  • 2
3 Comments
 
LVL 2

Accepted Solution

by:
jpoesen earned 100 total points
ID: 7021956
<html>
<head>
<style>
  .header {font-family:Helvetica,Arial; font-size:12pt; color:blue;cursor:hand}
  .content {font-family:Helvetica,Arial; font-size:9pt; color:#000000;padding-left:5}
  #sub1,#sub2 {display:block}
</style>
<script>
function showHide(elementID){
var element = document.getElementById(elementID)
if (element.style.display == "block") element.style.display = "none"
else element.style.display = "block"
}  
</script>
</head>
<body>

<span class="header" id="header1" onClick="showHide('sub1')">SECTION 1</span>
<div class="content" id="sub1">
1<br>2<br>3<br>4<br>5
</div>

<span class="header" id="header2" onClick="showHide('sub2')">SECTION 2</span>
<div class="content" id="sub2">
1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9<br>10
</div>

</body>
</html>

this is a bit shorter, cleaner and it works.

jpoesen
0
 
LVL 2

Author Comment

by:WDB
ID: 7022079
thanks. the code is shorter and cleaner. I don't know why the generator tries to get so creative. It turns out I had the same problem even with the new code and it turns out to be some kind of margin problem that's causing the generator to f*** up the code. Anyway, I appreciate your comment and you deserve the points.
0
 
LVL 2

Expert Comment

by:jpoesen
ID: 7022173
thanks :)
0

Featured Post

Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now