Question

I have a simple show/hide jquery script that works fine on its own, The problem is that I am using it on the comments section off a php/mysql driven site.

I am struggling to pass the commment id variable to the jquery script so that the show/hide function works for each comment independently.

I am new to jquery and javascript, so thanks in advance for your explanations.

Javacript

<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

    $('p.1').hide();    
    $('a.1').click(function(){

        $('a#read_more').hide(1700);
        $('p.1').slideDown(1500);   

        $('a#read_less').click(function(){

            $('p.1').slideUp(1500);
            $('a#read_more').show(1700);    

        });

    });         
});
</script>

HTML

<a href="#" class="1" id="read_more">Read More</a>
<p class="1" id="1">
LOREM IPSUM DOLOR SIT AMET, CONSECTETUER ADIPISCING ELIT, SED DIAM NONUMMY NIBH      UISMOD TINCIDUNT UT LAOREET DOLORE MAGNA ALIQUAM ERAT VOLUTPAT. UT WISI ENIM AD MINIM VENIAM, QUIS NOSTRUD EXERCI TATION ULLAMCORPER SUSCIPIT LOBORTIS NISL UT ALIQUIP EX EA COMMODO CONSEQUAT. DUIS AUTEM VEL EUM IRIURE DOLOR IN HENDRERIT IN VULPUTATE VELIT ESSE MOLESTIE CONSEQUAT, VEL ILLUM DOLORE EU FEUGIAT .<br />
    <a href="#" class="1" id="read_less">Read Less</a>
    </p>

Answer 1

Would something like this work? It doesn’t get the id of the comment, but it specifically targets each comment individually.

$(document).ready(function(){
    $('li.comment p.cText').hide();    
    $('li.comment a.read_more').click(function(){

        $(this).hide(1700);
        $(this).next("p").slideDown(1500);   

        $('li.comment a.read_less').click(function(){

            $(this).parent("p").slideUp(1500);
            $(this).parent("p").prev("a").show(1700);    

        });

    });         
});