show/hide not showing all content and adding a scroll bar
I have a page with multiple form sections. I am trying to show/hide those sections to make the page cleaner. I first had all the form section in one large html file broken up by accordion div/h3 tags. i was able to see the entire form of each section just fine. Then i broke my html page up into smaller pages and did an ajax get call to pull each html form into the container page. This worked but now when I click the h3 section to show the form it only opens a little bit like it is opening based on the amount of code on the container page and based on what is being passed in.
i am planning on moving away from using the accordion because i need the sections to show/hide independent of each other but the issue still happens in that scenario as well. I assume I should maybe be using something different than .html in the get or there is a setting to make it full size for the included content but i don't know what that is.
Below is a code fragment if it helps:
- $(document).ready(function () {
$.ajax({
url: 'incidentForm.html',
type: 'GET',
dataType: 'html',
success: function (response) {
$('#incForm').html(response);
$('incDisplay').hide();
}
});
});
- <script type="text/javascript" src="../js/unity.js" charset="utf-8"></script>
<div id="content" class="container_12">
<div class="grid_12">
<div id="accordion">
<!-- START INCIDENT SECTION -->
<h3><a id="incHeader" href="#">Incident</a></h3>
<div>
<div id="incForm"></div>
<div id="incDisplay"></div>
</div>
<!-- END INCIDENT SECTION -->
</div>
</div>
</div>
I would greatly appreciate any help you all can provide. i am just starting out on jQuery and having some seemingly simple issues.