jquery - How to switch a div content that has php values -


i have 2 php variables. want create read more button toggle these 2 values, 1 excerpt, other full content. new php , jquery. have spent few hours trying figure out :( appreciated if can help...

i tried change id , class achieve goal. believe might stupid. don't know smart way.

can give me direction please? right now, alert put in 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 much!

try : 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 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 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 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>


Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -