1

So,

I have a product post type with custom meta boxes. One of the meta box is for additional details. I show the custom post type inside other posts using a shortcode.

I can show the additional details on the frontend. When the details is kind of long I want to add a show more link which will show the rest of the details when clicked.

How do I do that?

Something like they have here. https://www.retailmenot.com/ When clicked on the 'More', full details are shown.

Thanks in advance.

1

What you're describing, and the example you linked, is using javascript to toggle the display style attribute of a container div.

The example you linked is only using it when additional details are available, and they have placed them within a separate div to the description text, etc.

The functionality works as follows:

We have a some divs with ids, and a <span> with an onclick calling our javascript function, showHide(). In this example, we are concerned with showing/hiding the div with id showAndHide:

<div id="somewrapper">
    <div id="always-visible">
        <span onclick="showHide()">Read More</span>
    </div>
    <div id="showAndHide">
        <p>This is the show-and-hide div.</p>
    </div>
</div>

For the javascript portion:

We get the div by its id and set it to a variable, here sh. Then we check the state of sh's style:display attribute. If it is none, the onclick() sets it to block to show it. If it has block, then it sets it none, "hiding" it.

All of that is done very easily in a few lines of code:

<script>
function showHide() {
    var sh = document.getElementById('showAndHide');
    if (sh.style.display === 'none') {
        sh.style.display = 'block';
    } else {
        sh.style.display = 'none';
    }
}
</script>

W3C gives a very clean example of this you can try in your browser

As a sidenote, you could achieve similar functionality with the css visibility attribute, but it behaves differently. Display:none; will not take up space, it is effectively removed; while with visibility:hidden; the element's place is preserved. That is unless you are dealing with table elements and using the collapse value. Since the example you linked was not using trs, and the space does expand/collapse, I opted for Display:Block/None. Read More on Visibility: visible/hidden/collapse here.

A much more knowledgeable explanation on the differences between Display and Visibility

Adding this functionality to a shortcode's output in wordpress

1) You need the id(s) of the element(s) you wish to show/hide.

2) If you're going to add a "read more" text and onclick, you will need to know either a) a measurable point at which to insert it in the containing div, or b) an element to which it can be prepended or appended.

3) take the full javascript function(s), add them to a file, myShowHide.js perhaps, and upload it to your child theme's directory.

4) In functions.php, Register the script with wp_register_script and Enqueue it with wp_enqueue_script to include that javascript file in your template pages. You can also wrap wp_enqueue_script in a function if you need it to only include the script on certain pages.

  • Thank you very much for the detailed explanation. I feel I can do it from here. – Imtiaz Rayhan May 20 '17 at 2:42
0

you can try this for you meta box data:

Query your meta data with this:

<?php 
    $slider = new WP_Query(array(
            'post_type' => 'post',
            'posts_per_page' => 5,
            'post_status'   => 'publish',
             'meta_query' => array(
                         array(
                            'key' => 'your metabox key',
                            'value' => 'your metabox value',
                            'compare' => 'IN'
                        ) 
                    )


    ));

    if($slider->have_posts()) :
    while($slider->have_posts()) : $slider->the_post();
    $idd = get_the_ID();
?>

         <?php echo get_excerpt(); ?>
    <?php   

    endwhile;
    endif;



    ?>

And put this code into functions.php:

function get_excerpt(){

$excerpt = get_the_content();

$excerpt = preg_replace(" (\[.*?\])",'',$excerpt);

$excerpt = strip_shortcodes($excerpt);

$excerpt = strip_tags($excerpt);

$excerpt = substr($excerpt, 0, 820);

$excerpt = substr($excerpt, 0, strripos($excerpt, " "));

$excerpt = trim(preg_replace( '/\s+/', ' ', $excerpt));

$excerpt = $excerpt.'.... <a href="'.get_permalink().'"  class="read_more"><h4 style="margin:0;">Details</h4></a>';

return $excerpt;

}
  • Hi Porosh, Thanks for your answer. But I am not sure if I wanted that. I have updated my question. Sorry I wasn't elaborate before. Thank you. – Imtiaz Rayhan May 14 '17 at 20:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.