Solved

Expand/Collapse blocks of text.

Posted on 2002-05-20
3
626 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

In this article, we'll look how to sort an Array in JavaScript, including the more advanced techniques of sorting a collection of records either ascending or descending on two or more fields. Basic Sorting of Arrays First, let's look at the …
This article discusses how to implement server side field validation and display customized error messages to the client.
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…
Suggested Courses

630 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