How to dynamically exapnd and collapse blocks of content on a page?

Question

I have one doubt,
I am using the following code to expand and collapse,

<div>
    <span id="r1_summary" class="summary_link">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer.. 
        <a href="#" onclick="document.getElementById('r1_summary').style.display='none'; document.getElementById('r1_more').style.display='block'; return false;">more</a>
    </span> 
    <span id="r1_more" class="full_review" style="display: none">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
        <span id="r1_summary" class="summary_link"> 
            <a href="#" onclick="document.getElementById('r1_summary').style.display='block'; document.getElementById('r1_more').style.display='none'; return false;">less</a>
        </span>
    </span>  
</div>

I am facing a problem here...
for the first div the expand and collapse is workong, If i copy the same div 2nd and 3rd time the, in the 2nd time it is not coming..

Please check the above code.

Answer 1

You should change the ids if you copy the same div. Id must be unique in an HTML document. See this jsfiddle for changed ids: See the fiddle

Also try the jQuery version with classes, so you don't have to change the ids all the time. See the fiddle: http://jsfiddle.net/ndbQM/1/

To avoid # character in url, there are two options I know:

The first option is to replace # character with javacript:; in href attribute. For example:

<a href="javascript:;" class="less_link">less</a>

The other option is to use return false; in event listeners. This will prevent the default click functionality of clicked element. For example:

$(document).on('click', '.summary_holder .more_link', function () {
    var parent = $(this).closest(".summary_holder");
    parent.find(".full_review").show();
    parent.find(".short_review").hide();
    return false;
});

$(document).on('click', '.summary_holder .less_link', function () {
    var parent = $(this).closest(".summary_holder");
    parent.find(".full_review").hide();
    parent.find(".short_review").show();
    return false;
});

Answer 2

Yes the problem is the ids are not uniqe for your elements.

Like first div this pattern should be followed

<div>
    <span id="r1_summary"

For second div this should be followed

<div>
    <span id="r2_summary"

Also it's not good practice to add inline javascript. Here is how you convert your code into function

function showDiv (summary, more){
    document.getElementById(summary).style.display='none'; 
    document.getElementById(more).style.display='block'; 
    return false;
 }

 function hideDiv (summary, more){
    document.getElementById(summary).style.display='block'; 
    document.getElementById(more).style.display='none'; 
    return false;
 }

By using above function you can use pass the id which want to display or hide, into onclick('r1_summary', 'r1_more') event.

You need to pass differnt id for different div like.

onclick('r2_summary', 'r2_more') //for second div

onclick('r3_summary', 'r3_more') //for third div

DEMO