Ok let's see if this post works... The last couple tries didn't! I was reading through this year-old thread which I found googling since I'm doing something similar, perhaps someone could give me a couple tips.
Here is the page with the example I'm dealing with: http://johnrdorazio.altervista.org/SitoFlatnukePersonale/index.php?mod=04_Mia_programmazione/04_Tabelle_con_Jquery Clicking on the checkboxes, two rows should appear (which were hidden from the beginning) in which more information can be inserted (that otherwise would not be necessary). The only problem is, it seems to work only in Internet Explorer. In Firefox the rows wind up appearing at the bottom of the table, and every time you un-click and re-click some mysterious space begins accumulating. Not only, but the cells of the two appearing rows don't line up with the cells of all the other rows of the table, the seem to want to line up with only the first column which really opens up wide that first column shifting the whole table over to the right. Google Chrome presents a similar problem, only the appearing rows don't wind up at the bottom of the table. They stay where they're supposed to be, but the cells still don't line up and they shift the whole table, and un-click re-click still creates that mysterious gap. At first I was applying JQuery directly to the rows that were involved, then reading this thread I tried creating different "tbody" sections and applying the JQuery to those sections, but the problems remain. Perhaps it could be a problem of parent-child relationships? I'm not sure how those work though, if anyone has any thoughts I would be very grateful. Here is my code: <script type="text/javascript" src="/SitoFlatnukePersonale/include/ javascripts/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".showhidesection").hide(); $("#pastoralcounsel").click(function(){ if ($("#pastoralcounsel:checked").val()!=null) { $("#represents").show("fast"); } else { $("#represents").hide("fast"); } }); $("#i_am_a_catechist").click(function(){ if ($("#i_am_a_catechist:checked").val()!=null) { $("#catechizes").show("fast"); } else { $("#catechizes").hide("fast"); } }); $("#volunteer").click(function(){ if ($("#volunteer:checked").val()!=null) { $("#volunteers").show("fast"); } else { $("#volunteers").hide("fast"); } }); }); </script> <table class="sample"> <tbody class="alwaysshowsection"> <tr><td><input type="checkbox" name="pastoralcounsel" id="pastoralcounsel"></td><td><label for="pastoralcounsel">Cons. Pastorale</label></td></tr> </tbody> <tbody id="represents" class="showhidesection"> <tr><td>---</td><td><label for="i_represent"> -> rappresenta:</label></ td></tr> <tr><td>...</td><td><input type="text" name="i_represent" id="i_represent"></td></tr> </tbody> <tbody class="alwayshowsection"> <tr><td><input type="checkbox" name="i_am_a_catechist" id="i_am_a_catechist"></td><td><label for="i_am_a_catechist">Catechista</label></td></tr> </tbody> <tbody id="catechizes" class="showhidesection"> <tr><td>---</td><td><label for="i_catechize_this_group"> -> del gruppo:</label></td></tr> <tr><td>...</td><td><select name="i_catechize_this_group" id="i_catechize_this_group"><option>I^ Anno Comunioni</option></ select></td></tr> </tbody> <tbody class="alwaysshowsection"> <tr><td><input type="checkbox" name="volunteer" id="volunteer"></ td><td><label for="volunteer">Volontario parrocchiale</label></td></ tr> </tbody> <tbody id="volunteers" class="showhidesection">> <tr><td>---</td><td><label for="voluntaryservice"> -> servizio:</ label></td></tr> <tr><td>...</td><td><input type="text" name="voluntaryservice" id="voluntaryservice" /></td></tr> </tbody> </table>
