add_action('media_buttons','add_sc_select',11); function add_sc_select(){ echo ' <select id="sc_select"><option>TSG Read More</option><option value="[read_more_start]">Read More Start</option><option value="[read_more_end]">Read More Close</option></select>'; } add_action('admin_head', 'button_js'); function button_js() { echo '<script type="text/javascript"> jQuery(document).ready(function(){ jQuery("#sc_select").change(function() { send_to_editor(jQuery("#sc_select :selected").val()); return false; }); }); </script>'; } function custom_read_more_start( $attr) { ob_start();?> <div class="ts-read-more"> <a href="javascript:void(0)" class="read-more-toogle">Read More</a> <div class="read-more-div"> <?php return ob_get_clean(); } add_shortcode( 'read_more_start', 'custom_read_more_start' ); function custom_read_more_end( $attr) { ob_start();?> </div> <a href="javascript:void(0)" class="read-more-toogle read-less">Read Less</a> </div> <?php return ob_get_clean(); } add_shortcode( 'read_more_end', 'custom_read_more_end' );
function read_more_fe_function() {?> <script> jQuery(document).on('click', '.read-more-toogle', function(e) { jQuery('.ts-read-more').toggleClass('show'); //setTimeout(function() {jQuery('.ts-read-more.show .read-more-div').css('max-height', jQuery('.ts-read-more.show .read-more-div').innerHeight()+'px');}, 100); }); </script> <style> .read-more-div { max-height: 0; transition: max-height 0.15s ease-out; overflow: hidden; } .ts-read-more.show .read-more-div { overflow: visible; max-height: 1500px; } a.read-more-toogle { display: inline-block; background: #f5a528; color: #fff; font-weight: 600; font-size: 14px; padding: 10px 30px; line-height: 14px; border-radius: 8px; margin-bottom: 10px; text-transform: unset; width: 100%; max-width: 185px; border-color: #f5a528; box-shadow: none; text-align: center; } a.read-more-toogle.read-less { display: none; } .ts-read-more.show a.read-more-toogle { display: none; } .ts-read-more.show a.read-more-toogle.read-less { display: inline-block; } .ts-read-more { margin-top: 25px; } </style> <?php } add_action( 'wp_footer', 'read_more_fe_function' );
Jagdish Sarma Edited question February 22, 2022