Having an issue with my custom accordion script where resizing the browser causes formatting problems in one of the sections. I want the content to remain intact and to utilize a scrollbar if necessary to view the content. The problem is visible in section 3 of my demo.
Tried using overflow: hidden, but applying it to the UI content removes the scrollbar. Also attempted overflow hidden on paragraphs without achieving the desired result. Any help would be appreciated.
View the demo here.
Here is the HTML code:
<head>
<meta charset="utf-8">
<style type="text/css">body{font:62.5% Verdana,Arial,sans-serif}</style>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
</head>
<body>
<div class="file_wrapper">
<div class="file_inner">
<h3><a href="#">Section 1</a></h3><div>
<span class="diff"><p>++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++</p></span>
...
$(this).removeClass('programatic');
}
});
accordion_expand_all()
})