My script is functioning properly for a single class, but it fails to work for multiple classes with the same purpose. I attempted to transfer from div (#panel) to class (.panel) as I am using several classes. However, this adjustment did not resolve the issue. Does anyone have a solution for this? Please refer to my jsfiddle link to identify the problem: http://jsfiddle.net/2FPZE/1/
Here is the HTML code:
<div class="more-link"> more </div>
<div class="panel">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
<div class="more-link"> more </div>
<div class="panel">
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
</div>
This section presents my script:
$(document).ready(function(){
$(".more-link").click(function(){
$(".panel").slideDown("slow");
$(".more-link").remove();
});
});
And here is the CSS styling:
.panel {
display:none;
}