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;
});