0

add_action('media_buttons','add_sc_select',11);
function add_sc_select(){
      echo '&nbsp;<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
Add a Comment