Solved

Expand/Collapse blocks of text.

Posted on 2002-05-20
3
619 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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
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…

786 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