hide show div (but display first 200px)
<p>I am using some code from a fiddle made by a member of StackOverflow. To hide show divs on click.</p>

<p>My issue is I wish to extend this , I will explain.</p>

<p>I have content loading from database, which lets say is approx 500px in height.
But On page load, I only want to show the first 200px height of this content, so user can click "Show More" and the remainder of the div slides down.</p>

<p>To keep things tidy, I would like to extend the use of the code , given on here if possible, so that my JS is tidy.</p>

<p>The code to hide/show content thus far is:</p>

<p>JS</p>

<pre><code>$(document).ready(function() {
$("#setup-ofi").click(function() {
    $("#closeable-ofi").slideToggle(function() {
        if ($(this).is(":visible")) {
            $("#setup-ofi").text("Hide Details \u25b2");
        }
        else {
            $("#setup-ofi").text("Show Details \u25bc");
        }
    });
});
</code></pre>

<p>});</p>

<p>The HTML</p>

<pre><code>&lt;h3&gt;Property Details - &lt;span class="sub-searchBlue"&gt;&lt;a id="setup-ofi" href="javascript:;"&gt; Show Details &amp;#x25BC;&lt;/a&gt;&lt;/span&gt;&lt;/h3&gt;
    &lt;div id="closeable-ofi" style="display:none"&gt;
    content of db shows here
    &lt;/div&gt;
</code></pre>

<p>FIDDLE : <a href="http://jsfiddle.net/3x2uG/" rel="nofollow">http://jsfiddle.net/3x2uG/</a></p>
