Expand/collapse excerpt and content

Question

Setting up a simple WordPress blog, that only contains a single page which is the blog archive. But I have run in to a problem, I want to have a toggle the excerpt and content show more/show less functionality, so that visitors easy can go through the posts on the same page without page reloads or being sent to the single post page.

I know this has been asked here before but none of those examples work for me. Just want a simple show/hide functionality to show the excerpt automatic and when users click show more, the whole post slides open to show complete content, and when they click show less, the post goes back to excerpt. I tried most that is here on stack but nothing works so now I rolled back to my original files to start over. So this script does nothing right now as you see in the loop-custom file. But this is what I have tried.

Here is my js:

    $(function () {
     $('.mainContent').hide();
     $('a.read').click(function () {
         $(this).parent('.excerpt').slideUp('fast');
         $(this).closest('.post').find('.mainContent').slideDown('fast');
  //       $('.mainContent').show();
         return false;
     });
     $('a.read-less').click(function () {
         $(this).parent('.mainContent').slideUp('fast');
         $(this).closest('.post').find('.excerpt').slideDown('fast');
         return false;
     });
 });

Here is my index file:

    <div id="content">

    <div id="inner-content" class="row">

        <main id="main" class="large-8 medium-8 columns" role="main">           
        
            <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
         
                <!-- To see additional archive styles, visit the /parts directory -->
                <?php get_template_part( 'parts/loop', 'custom' ); ?>
                
            <?php endwhile; ?>  

                <?php joints_page_navi(); ?>
                
            <?php else : ?>
                                        
                <?php get_template_part( 'parts/content', 'missing' ); ?>
                    
            <?php endif; ?>
                                                                                            
        </main> <!-- end #main -->
        
        <?php get_sidebar(); ?>

    </div> <!-- end #inner-content -->

</div> <!-- end #content -->

And here is my loop-custom file:

<article class="post" id="post-<?php the_ID(); ?>" <?php post_class(''); ?> role="article">                 
<header class="article-header">
    <?php get_template_part( 'parts/content', 'byline' ); ?>
    <h2><?php the_title(); ?></h2>
    
</header> <!-- end article header -->
                
<section class="entry-content" itemprop="articleBody">
    <a href="<?php the_permalink() ?>"><?php the_post_thumbnail('full'); ?></a>
     

    <?php the_excerpt('<button class="tiny">' . __( 'Show more...', 'jointswp' ) . '</button>'); ?>
</section> <!-- end article section -->

Answer 1

EDIT: Answer updated after testing in fiddle.

<div class="post-wrap">
    <h2>The Title</h2>
    <div class="post">
        <div class="excerpt">
            Excerpt goes here
        </div>
        <div class="whole-post">
            Slidey read more content goes here
        </div>
        <a href="#" class="read">Read More</a>
    </div>
</div>


.whole-post {
  display: none;
}

.post {
  position: relative;
  padding-bottom: 50px;
}

a.read {
  position: absolute;
  bottom: 10px;
  right: 10px;
}



$('a.read').click(function () {
     $(this).siblings('.excerpt').slideToggle(500);
     $(this).siblings('.whole-post').slideToggle(500);
});

Further comment asking about changing "read more" button text on click - requires additional line of jQuery, like so:

  $('a.read').click(function () {
      $(this).siblings('.whole-post').is(':visible') ? $(this).html('Read More') : $(this).html('Read Less');
      $(this).siblings('.excerpt').slideToggle(500);
      $(this).siblings('.whole-post').slideToggle(500); 
  });

jsfiddle here.

Note: The ternary query ? truthy : falsey ; syntax is short for if (query) { truthy } else { falsey } ;