twome Posted April 25, 2006 Share Posted April 25, 2006 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\" /] Quote Link to comment Share on other sites More sharing options...
zq29 Posted April 25, 2006 Share Posted April 25, 2006 Thats a part of the IPB Forum software, looks like its done with JavaScript altering the styles on a div tag. Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted April 25, 2006 Share Posted April 25, 2006 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. Quote Link to comment Share on other sites More sharing options...
twome Posted April 25, 2006 Author Share Posted April 25, 2006 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] Quote Link to comment Share on other sites More sharing options...
wildteen88 Posted April 26, 2006 Share Posted April 26, 2006 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> </td> <td> </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"> </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] Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.