Jump to content

Archived

This topic is now archived and is closed to further replies.

twome

programming on phpfreaks.com

Recommended Posts

I like the idea of the collapsible heading. How can I do the same thing on my website as on phpfreaks.com under "Poll Options" as displayed on the "Post a New Topic Form"?

I uploaded a picture so you can better understand what I am trying to ask. Take a look at the screen shots...

Any suggestions anyone??


[img src=\"http://www.eyedeaweb.com/pictures/phpfreaks.JPG\" border=\"0\" alt=\"IPB Image\" /]

Share this post


Link to post
Share on other sites
Thats a part of the IPB Forum software, looks like its done with JavaScript altering the styles on a div tag.

Share this post


Link to post
Share on other sites
Yeah that is done by a very simple javascript functions which changes a style on a div/table cell to [b]display: block[/b] as currently the defualt style before you click the link to a poll is [b]display: none[/b]. Then abit more javascript to strip out the link, or to hide it.

For little demo of what the javascript function looks like have a look at [a href=\"http://www.phpfreaks.com/forums/index.php?s=&showtopic=90723&view=findpost&p=363935\" target=\"_blank\"]this[/a] post.

Share this post


Link to post
Share on other sites
My javascript function 'toggleMenu' code is not collapsing and expanding the items I want. I have a long form and one of the headings is "Basics", I want the items underneath "basics" to display when basics is clicked and disappear when basics is clicked again.

I think the problem is because the div tags are in between a table (Basics is in the middle of a table) Take a look....

(I encourage you to copy the code and put it in a file, save it and run.... see it doesn't work!!!)

Any suggestions??

[code]
<html>
<head>
<script LANGUAGE="JavaScript">
function toggleMenu(objID) {
  if (!document.getElementById) return;
      var ob = document.getElementById(objID).style;
      ob.display = (ob.display == 'block')? 'none': 'block';
      alert (ob.display);
}
</SCRIPT>

<style type="text/css">
<!--
.mC {margin:5px; float:left;}
.mH {color:#60c; cursor:pointer; font-weight:bold;}
.mL {display:none; margin-bottom:10px;}
.mO {display:block;}
-->
</style>
</head>

<body>
<form action="processProfile.php" method="post" name="main">
<table width="756" height="91" border="0">
  <tr>
    <td> </td>
    <td> </td>
    <td bordercolor="#CCCCCC"><strong>Create/edit your profile ...</strong></td>
  </tr>
<!--.... ..... ......
.... ..... ......form fields here
.... ..... ...... -->
<tr bordercolor="#CCCCCC">
        <td colspan="6"><div class="mH" onclick="toggleMenu('menu1')">Basics</div>
              <hr/></td>
      </tr>
      <div id="menu1" class="mL">
      <tr>
        <td width="16%" rowspan="2" valign="top">Height:</td>
        <td width="1%" rowspan="2"> </td>
        <td colspan="4">Between
          <select name="heightStart" id="heightStart" class="mO">
            <option value="3">3'1"</option>
            <option value="4">3'2"</option>
            <option value="5">3'3"</option>
              </select>
          and
          <select name="heightEnd" id="heightEnd" class="mO">
            <option value="3">3'1"</option>
            <option value="4">3'2"</option>
            <option value="5">3'3"</option>
          </select></td>
      </tr>
</div>
<!--.... ....
...... ..... ..... rest of the table here
. .... .... ...... ..... ...... -->
</table>
</form>
</body>
</html>
[/code]





Share this post


Link to post
Share on other sites
Your code does work if you dont use divs and put the id and the classes in the td or tr tag. Then your code will work. You dont have to use divs as nearly all html tags have the onclick attribute. The following is your revised code (NOTE: this only the html inside the body tag h=just replace the following with your old code):
[code]<form action="processProfile.php" method="post" name="main">
  <table width="756" height="91" border="0">
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td bordercolor="#CCCCCC"><strong>Create/edit your profile ...</strong></td>
    </tr>

    <tr bordercolor="#CCCCCC">
      <td colspan="6" class="mH" onclick="toggleMenu('menu1')">Basics</td>
    </tr>

    <tr id="menu1" class="mL">
      <td width="16%" rowspan="2" valign="top">Height:</td>
      <td width="1%" rowspan="2">&nbsp;</td>
      <td colspan="4">
        Between <select name="heightStart" id="heightStart" class="mO">
          <option value="3">3'1"</option>
          <option value="4">3'2"</option>
          <option value="5">3'3"</option>
        </select> and <select name="heightEnd" id="heightEnd" class="mO">
          <option value="3">3'1"</option>
          <option value="4">3'2"</option>
          <option value="5">3'3"</option>
        </select>
      </td>
    </tr>

  </table>
</form>[/code]

Share this post


Link to post
Share on other sites

×

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.