Read more, Read less Script - setting Initial div height and and another height when button is click
<p>Good morning everyone!</p>

<p>I have a <strong>read more/read less</strong> script. The user click the read more tab and more text appears. Here is how it is set up. there is a DIV which holds all the contents, within this DIV is another DIV which also holds the additional contents. Both DIVS does not have fixed heights. I would like to set an initial height to the container DIV which is the <strong>Content Box</strong>, Example: An initial height of say 200px, and when read more is click, make the <strong>Content Box</strong> 400px.</p>

<p>Here is the code (html):</p>

<pre><code>&lt;div class="contentBox"&gt;
&lt;p&gt;Initial Text goes here&lt;/p&gt;

&lt;a class="addlTextTrigger" href="#"&gt;Read More&lt;/a&gt;

&lt;div class="addlTextBox"&gt;
&lt;p&gt;Additional Text here.&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>And here is the JQuery, please not the JQuery switches styles but this is simply used to style the tab/links used for triggering the read more/read less function.</p>

<p>Here is the JQuery:</p>

<pre><code>$(document).ready(function() {
$('.addlTextBox').hide();
$('.addlTextBoxTrigger').toggle(function(){
$('.addlTextBox').fadeIn('fast');
$(this).text("Read Less");
},
function(){
$('.addlTextBox').hide('fast');
$(this).text("Read More");
});
});

$(document).ready(function() {
$('.addlTextBoxTrigger').click(function(){
$(this).toggleClass('readMoreClick');
});
});
</code></pre>
