Collapsable div, but from a certain point defined in a variable
<p>E.g. I have a div that contains all the text like:</p>

<pre><code>&lt;div class="text-container"&gt;
&lt;p&gt;
Though we welcome the idea of a smaller connector, we're miffed that Apple couldn't just adopt the semi-industry standard of Micro-USB. That would make things easier for smartphone users across the globe. Yet, even so, the smaller connector may be a smart move for the future. The 30-pin connector has been around since 2003, long before the iPhone even existed: frankly, it's a dust magnet. A smaller connector helps shave extra space to achieve a smaller phone with perhaps a bigger battery. The new connector cable will mainly be used for syncing and charging by most people who own an Apple TV or Bluetooth/AirPlay accessories.
&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>And I would like to create something like this:</p>

<pre><code>&lt;div class="text-container"&gt;
&lt;p&gt;
Though we welcome the idea of a smaller connector...&lt;a href="some-javascript-to-show-more"&gt;[show more]&lt;/a&gt;
&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>I guess I should get all the content of the div and then Find the first e.g. 50 character and put there a link and all the other text put in some div which will be hidden, and after the click on the link the other stuff show up.</p>

<p>It should be toggle-like and change the text from [show more] to [show less] if it is expanded and vice versa.</p>

<p>Any advice how to achieve this with plain javascript and jquery itself and without other jQuery plugins?</p>
