Question

My html page content is below

<div>
    <div>
        Summary 1
    </div>
    <div style="display:none">
        Details 1
    </div>
    <button>Read More</button>
</div>

Details content is collapsed initially. When user clicks the Read More button, I need to show details content. I can make it possible. i will define id for details div tag and javascript for onclick event of button. Using id i will change the div style display.

But i have multiple list of sections based on the back end data. so my page would be renderd like below

<div>
    <div>
        Summary 1
    </div>
    <div style="display:none">
        Details 1
    </div>
    <button>Read More</button>
</div>

<div>
    <div>
        Summary 2
    </div>
    <div style="display:none">
        Details 2
    </div>
    <button>Read More</button>
</div>

<div>
    <div>
        Summary 3
    </div>
    <div style="display:none">
        Details 3
    </div>
    <button>Read More</button>
</div>

Now How can i acheive the expand and collapse functionality when Read More button is clicked.

Answer 1

Using plain javascript and with the strategic addition of some classes, you could do this which would make each button into a toggle that even changes it’s text according to the toggle state. Then one piece of javascript would serve for all the repeated instances of this structure and the code would be independent of the exact HTML layout of the summary, details and button (as long as they retained the same classes and were in the same container div.

HTML:

<div>
    <div>
        Summary 1
    </div>
    <div class="details" style="display:none">
        Details 1
    </div>
    <button class="readMore">Read More</button>
</div>

<div>
    <div>
        Summary 2
    </div>
    <div class="details" style="display:none">
        Details 2
    </div>
    <button class="readMore">Read More</button>
</div>

<div>
    <div>
        Summary 3
    </div>
    <div class="details" style="display:none">
        Details 3
    </div>
    <button class="readMore">Read More</button>
</div>​

And the javascript:

function toggleVis(el) {
    var vis = el.style.display != "none";
    if (vis) {
        el.style.display = "none";
    } else {
        el.style.display = "block";
    }
    return(!vis);
}

(function() {
    var readMore = document.getElementsByClassName("readMore");
    for (var i = 0; i < readMore.length; i++) {
        readMore[i].onclick = function(e) {
            var vis = toggleVis(e.target.parentNode.getElementsByClassName("details")[0]);
            e.target.innerHTML = vis ? "Read Less" : "Read More";
        }
    }
})();            

Working Demo: http://jsfiddle.net/jfriend00/aMBkJ/

Note: This would require a shim for getElementsByClassName() on older versions of IE.
​