Solved

Expand/Collapse blocks of text.

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

MS Dynamics Made Instantly Simpler

Make Your Microsoft Dynamics Investment Count  & Drastically Decrease Training Time by Providing Intuitive Step-By-Step WalkThru Tutorials.

Question has a verified solution.

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

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. …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

751 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