How to switch div content having php values

Question

I have two php variables. I want to create a “read more” button to switch these two values, one is an excerpt, the other is full content. I am very new to php and jQuery. After spending several hours trying to figure this out :( I really appreciate if anyone can help ...

I tried to change id and class to achieve my goal. I think it can be really stupid. But I really do not know a reasonable way.

Can someone give me some direction please? Right now, the warning I entered 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> 

Many thanks!

Answer 1

Try the following: 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> 

Answer 2

Your code was almost there!

You should probably leave only the id and just add and remove the classes you need.

Also, if you really want to change the identifier, this is a text field, so you just change it using $( "#short_desc" ).attr( 'id',"full_desc"); , not $( "#short_desc" ).attr( 'id',$( "#full_desc" ) );

Finally, checking things against themselves, such as short_desc id against it id in $( '#short_desc' ).attr( 'id' ) === "short_desc" should always return true. If something always returns true, you can exclude the check. I'm going to suggest that you wanted to read more / read less instead.

Here's the working version:

 $(document).ready(function () { $("#show_more").click(function () { console.log("clicked"); if ($('#short_desc').hasClass("show_desc")) { $("#short_desc").removeClass("show_desc"); $("#short_desc").addClass("hide_desc"); $("#full_desc").removeClass("hide_desc"); $("#full_desc").addClass("show_desc"); $("#show_more").text("Read Less..."); } else { $("#full_desc").removeClass("show_desc"); $("#full_desc").addClass("hide_desc"); console.log($('#short_desc').attr('id')); $("#short_desc").removeClass("hide_desc"); $("#short_desc").addClass("show_desc"); $("#show_more").text("Read More..."); } }); }); 

And jsfiddle to play with it.