Hide a div to Fade_in another one ( the_content) for custom post type

I'm having few problem with my jquery . ..

Here is my situation:

i've create a custom post type, which wokrs perfectly. Outside my ul li, I have an image on the side.

on click of the title of the archive of my custom post type, I'd like to hide this image,to fade in the_content of the post.

Then, If i click to the title of another "post" from the archive, to hide the_content previously open to display the new one, etc.

here is my archive:

<?php get_header(); ?>
<?php $mainID = $post->ID; ?>

<div class="content-wrap col-xs-12 col-sm-12 col-md-12 col-lg-12">
                    <main id="main" class="site-main" role="main">


      <ul class="archive_ad">
       <?php
global $wp_query;
$args = array_merge( $wp_query->query_vars, array( 'posts_per_page' => 50, 'category_name' => '' ) );
query_posts( $args );
while(have_posts()): the_post();
?>
    <li>


    <div class="single-featured-image">
<h2><a class="more_prod"> <?php the_title(); ?></a></h2>
<?php if ( has_post_thumbnail()) : the_post_thumbnail('full'); endif; ?>


                <div class="second_image"><?php echo MultiPostThumbnails::the_post_thumbnail(get_post_type(), 'close-up', get_the_ID(), 'thumbnail'); ?></div>
</div>
                                                                                 <div class="content_post"> <?php the_content(); ?></div>
            </li>
        <?php
endwhile;
wp_reset_query();
?>  


</ul>


    <div class="img_side">

        <img  src="mywebsite/man_ok.jpg" alt="">
        </div>


    </div>
</div>

<?php get_footer(); ?>

in the index.php I've add this jquery:

 <script type="text/javascript"> 

 $('.more_prod').click(function() {
    var i = $(this).index();
    $('.img_side').hide();
    $('.content_post' + (i+1)).show();
});

    </script>   

in my css I've put the class of content_post in display:none

Nothing happen on click of the_title . ..

Any highlight .. would be awesome ! Thank you for your time !