simple example of telescopic text, made with jQuery

Inspired by http://www.telescopictext.com/

HTML

<!--
Expanders – the elements which toggle sectios to be expanded, need to have a class "expander" and an id. 
Sections depend on the element that needs to be clicked, so they need to have a class, corresponding to the id of their expander.
Example:
expander – 
<span id="section-foo">I will toggle sections with class "section-foo".</span>
sections that will be expanded on click – 
<span class="section-foo section">FOO!</span>
<span class="section-foo section">BAR!</span>

Expanding happens one by one, from left to right for each section with corresponding class. 

In order to style expanders, use CSS (class ".expander").

-->
<p>
    <span class='section section-i'>Yawning,</span>
    <span  class='section section-i'>and smearing my eyes with my fingers,</span>
    <span id="section-i" class="expander">I</span>
    <span  class='section section-i'><span class="expander" id="section-walked">walked</span>
        <span class="section section-walked">bleary eyed</span> into the kitchen and </span>
    <span id="section-made" class="expander">made</span>
    <span class="section section-made">myself</span>
    <span class="section section-tea">a cup of</span>
    <span id="section-tea" class="expander">tea</span>
</p>

CSS

.section {
    display:none;
}
.section.expanded {
    display:inline;
}
.expander {
    cursor:pointer;
    background:#ccc;
    color:#fff;
}

JavaScript

// attach event handlers to all expanders
$('.expander').on('click', function () {
    // find all sections with class name
    // corresponding to expander's id
    // that haven't been expanded yet
    var sections = $('.' + this.id + ':not(.expanded)');
    // if there's only one section left
    // and we are doing our "last" expanding for this section
    // remove "onclick" handler from this expander
    // and stop highligting it (remove CSS class "expander")
    if ( sections.length <= 1 ) {
       $(this).removeClass('expander').unbind('click');
    }
    // expand first section
    sections.first().addClass('expanded');
});