たとえば、次のようなすべてのテキストを含む div があります。
<div class="text-container">
<p>
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.
</p>
</div>
そして、私はこのようなものを作成したいと思います:
<div class="text-container">
<p>
Though we welcome the idea of a smaller connector...<a href="some-javascript-to-show-more">[show more]</a>
</p>
</div>
divのすべてのコンテンツを取得してから、最初のたとえば50文字を見つけてリンクを配置し、他のすべてのテキストをdivに配置して非表示にし、リンクをクリックすると他のものが表示されるはずです.
これはトグルのようで、展開されている場合はテキストを [show more] から [show less] に変更し、その逆にする必要があります。
プレーンなjavascriptとjquery自体を使用し、他のjQueryプラグインを使用せずにこれを達成する方法についてアドバイスはありますか?