Databases
StackOverflow2013
Postsdbo
POContainer div not expanding in IE when using jquery show() on div inside it
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POContainer div not expanding in IE when using jquery show() on div inside it
    text
    copied!<p>I have been building a form that contains expandable sections with it. The divs are toggled using the hide() and show() methods of jquery.</p> <p>It all works ok in Chrome and FF, but in IE the main div containing the other ones does not expand to fit when a section is opened up inside it.</p> <p>I have tried changing various properties such as setting the height of the container div, </p> <pre><code>&lt;div id='form'&gt; &lt;form id='form2'&gt; // some form fields &lt;div id="section1" style="display: none"&gt; // more fields &lt;/div&gt; &lt;div id="section2" style="display: none"&gt; // more fields &lt;/div&gt; &lt;/form&gt; &lt;/div&gt; </code></pre> <p>So when I call show() on #section1 or #section2, #form is not expanding and just staying the same height, which the actual divs being expanded and closed seem to be working ok, they just don't have their nice container behind them.</p> <p><strong><em>UPDATE</em></strong> Thanks all for helping - I am now providing more information.</p> <p>Please view the page in question by going here: <a href="http://utilitiessavings.co.uk/wordpress/business-energy/business-electricity/" rel="nofollow noreferrer">Form Page</a> and pressing submit (I have filled in the form with some test data). Then you will see the second form page, which is the one with the problem.</p> <p>The green icons in the two sections control the div, here is the jQuery script for the first section, as they are both the same:</p> <pre><code>var toggleMinus = 'wp-content/uploads/2010/01/delete.png'; var togglePlus = 'wp-content/uploads/2010/01/add.png'; $("#openelec").click(function() // when button clicked { var toggleSrc = $(this).attr('src'); // check which icon is shown if(toggleSrc == toggleMinus) // if it is a minus { $(this).attr('src', togglePlus); // change to plus $(".elecsite").slideUp(1500); // close the div } else { $(this).attr('src', toggleMinus); // change to minus $(".elecsite").slideDown(1500); // open the div }; }); </code></pre> <p>View in Chrome or FF and you will see how I want it to act - in IE it just isn't playing ball.</p> <p>Here is the css as well: (only the main div and the one expanding)</p> <pre><code>#form{ width: 770px; background: #DDEEEE; padding: 10px; border-top: 1px solid #c60; height: auto; text-align: left; -moz-border-radius-bottomleft: 10px; -webkit-border-bottom-left-radius: 10px; -moz-border-radius-bottomright: 10px; -webkit-border-bottom-right-radius: 10px; } .elecsite{ width: 760px; height: auto; background: #EFE0E0; padding: 5px; border-bottom: 1px solid #DF7401; float: left; } </code></pre> <p>So let's see if any of you mad programmers out there can help me ;) Thanks for helping.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload