How to switch a div content that has php values

Question

I have two php variables. I want to create a read more button to toggle these two values, one is the excerpt, the other is the full content. I am very new to php and jQuery. Have spent few hours trying to figure it out :( I really appreciated if someone can help...

I tried to change id and class to achieve my goal. I believe this might be really stupid. But I really don't know the smart way.

Can somebody give me some direction please? Right now, the Alert I put in the codes returns "undefinied"...

PHP :

$trimmed = '<p id="short_desc" class="show_desc">' . chinese_excerpt( get_the_content(), $lenth  = 260 ) . '</p>';
            $full    = '<p id="full_desc" class="hide_desc">' . get_the_content() . '</p>';

            echo apply_filters( 'the_resume_description', $trimmed );
            echo apply_filters( 'the_resume_description', $full );

            echo '<div style="float:right; margin-top:-30px"><div id="show_more">Read More...</div></div>'

HTML :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script>
        $( document ).ready( function () {

            $( "#show_more" ).click( function ( ) {
                if ( $( '#short_desc' ).attr( 'id' ) === "short_desc" ) {
                        $( "#short_desc" ).removeClass("show_desc");
                            $( "#short_desc" ).addClass("hide_desc");
                            $( "#short_desc" ).attr( 'id',$( "#full_desc" ) );  
                            $( "#full_desc" ).removeClass("hide_desc");
                            $( "#full_desc" ).addClass("show_desc");
                    } else if ( $( '#full_desc' ).attr( 'id' ) === "full_desc" ){                               
                            $( "#full_desc" ).removeClass("show_desc");
                            $( "#full_desc" ).addClass("hide_desc");
                            $( "#full_desc" ).attr( 'id',"#short_desc" );
                            alert($( '#short_desc' ).attr( 'id' ));
                            $( "#short_desc" ).removeClass("hide_desc");
                            $( "#short_desc" ).addClass("show_desc");
                                };
                    } );
} );
                                    </script>

Thank you very much!

Answer 1

Try this : LINK

$( ".show_hide" ).click(function() {   
    if ($('.hide_desc').css('display') == 'none') {
        $(".hide_desc").show();
    $(".show_desc").hide();
    $(this).html('Read More');
    }else{
         $(".hide_desc").hide();
    $(".show_desc").show();
    $(this).html('Read Less');
    }
   
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<p class="show_desc" style="display:none">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet nisl vitae porttitor elementum. Aliquam lobortis, augue in molestie convallis, metus nibh euismod sapien, vitae egestas nisl nunc eu diam. Ut elit elit, fringilla eu ultricies vel, pulvinar a metus. Sed quis urna feugiat, lacinia metus eget, sodales dui. Suspendisse potenti. Duis in turpis quis tellus vulputate ornare. Fusce adipiscing tellus diam, ut pellentesque tortor rhoncus sit amet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet nisl vitae porttitor elementum. Aliquam lobortis, augue in molestie convallis, metus nibh euismod sapien, vitae egestas nisl nunc eu diam. Ut elit elit, fringilla eu ultricies vel, pulvinar a metus. Sed quis urna feugiat, lacinia metus eget, sodales dui. Suspendisse potenti. Duis in turpis quis tellus vulputate ornare. Fusce adipiscing tellus diam, ut pellentesque tortor rhoncus sit amet.</p>
        <p class="hide_desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer aliquet nisl vitae porttitor elementum. Aliquam lobortis, augue in molestie convallis, metus nibh euismod sapien, vitae egestas nisl nunc eu diam. Ut elit elit, fringilla eu ultricies vel, pulvinar a metus. Sed quis urna feugiat, lacinia metus eget, sodales dui. Suspendisse potenti. Duis in turpis quis tellus vulputate ornare. Fusce adipiscing tellus diam, ut pellentesque tortor rhoncus sit amet.</p>
       
    <div style="float:right;"><div class="show_hide">Read More...</div></div>