Show button only when post is clicked WordPress

I am creating a wordpress theme.
I have a box with some social network buttons.
This box with the buttons should only appear underneath the article when you click on a post.

In my index.php I have the following

Read More
<div class="left-column">
            <?php if (have_posts()) :
            while(have_posts()): the_post(); ?>

            <article class="post">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                <p class="info author-info centered">by <a class="info" href="<?php echo get_author_posts_url(get_the_author_meta('ID')); ?>"> <?php the_author(); ?></a> 
                <p><?php the_time('F d, Y'); ?></p>
                </p>
                <?php the_content('MORE'); ?>

            </article>

            <?php

                endwhile; 

                else:
                    echo '<p>No content found</p>';

                endif; 

            ?>
            <!-- Widget underneath post -->
            <div class="undereath-post">
                <?php dynamic_sidebar('underpost1');?>
                <!-- Social buttons -->
                <div class="social-button-box">
(Here would go the code for all the social media buttons)
</div>

For the first post, the social icon box only shows when I click on the post.
On the last post however, I can see the social media icons also on the main page underneath the “More” button.

Does anyone know why that is and how I can fix it?

Related posts

Leave a Reply

1 comment

  1. use some jquery and do somthing like this

    $(".social-button-box").hide();    
    $(".post").click(function(){
        $(this).each(".social-button-box", function(){$(this).show();});
    
        });