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

--EDIT OF FULL POST---

OK - I manage to hide the div on click - then fade in the_content of the post.

However - the_content is outside my loop - so it doesnt display the_content of the related post I have click.

I attach a fast picture to explain the situation, with the name of the relevant class and the code.

Like we can see, I have a UL LI - where are listed my post. the ul as a width of 66%. Next to it - outside of the loop, I have a div image.

What i want to achieve is: On click on one title of the ul li post> To hide the image on the right side ( which is outside the loop) - and display instead this image, the_content of the post I have click.

As I just said at the moment, it display the_content -but not the one of the post I have click previously.

Then - If i click to another post_title - the actual content should disappear - to show the_content of the new post i just clicked . ..

I hope it make more same this way :)

Thank you for all your time !

Below the image and code:

Code:

<?php get_header(); ?>   
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){
     $(".event-info").hide(); 
        $(".event-title").click(function(){
            $(this).parent().children(".event-info").toggle("slide", {direction: "up"}, 500);       
        })
        });
</script>     
<?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">

      <div class="event-title"></div>  
        <h2> 
           <a href="javascript:void(0)" onclick="$('.img_side').hide();$('.event-info').show();"> 
               <?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>
            </li>
        <?php
endwhile; wp_reset_query();
        ?>          

</ul>

    <div class="img_side">
           <img  src="http://ift.tt/1vZRjsC" alt="">
        </div>

      <div class="event-info"><h2><?php the_title(); ?> </h2> <?php the_content(); ?></div>

    </div>
</div>

<?php get_footer(); ?>

How it looks in Html:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function($){

        $(".event-info").hide(); // make sure all content in event-info class is hidden

        $(".event-title").click(function(){
            // find the .event-info within the same div as .event-title is and slide to show
            $(this).parent().children(".event-info").toggle("slide", {direction: "up"}, 500);           })

});
</script>     

<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">
            <li>

    <div class="single-featured-image">
      <div class="event-title"></div>  <h2> <a href="javascript:void(0)" onclick="$('.img_side').hide();$('.event-info').show();"> Laminate </a></h2>
<img width="1200" height="1244" src="http://mysite/wp-content/uploads/2014/10/011.jpg" class="attachment-full wp-post-image" alt="01" />

                <div class="second_image"><img width="150" height="150" src="http://mysite/wp-content/uploads/2015/01/laminate-150x150.jpg" class="attachment-thumbnail" alt="laminate" /></div>
</div>
            </li>
            <li>

    <div class="single-featured-image">
      <div class="event-title"></div>  <h2> <a href="javascript:void(0)" onclick="$('.img_side').hide();$('.event-info').show();"> Rigid Core DIY Waterproof Flooring </a></h2>
<img width="1771" height="1244" src="http://mysite/wp-content/uploads/2015/01/rigide.jpg" class="attachment-full wp-post-image" alt="rigide" />

                <div class="second_image"><img width="150" height="150" src="http://mysite/wp-content/uploads/2015/01/rigid_close-150x150.jpg" class="attachment-thumbnail" alt="rigid_close" /></div>
</div>
            </li>
            <li>

    <div class="single-featured-image">
      <div class="event-title"></div>  <h2> <a href="javascript:void(0)" onclick="$('.img_side').hide();$('.event-info').show();"> Luxury Vinyl </a></h2>
<img width="1200" height="797" src="http://mysite/wp-content/uploads/2015/01/03.jpg" class="attachment-full wp-post-image" alt="03" />

                <div class="second_image"><img width="150" height="150" src="http://mysite/wp-content/uploads/2015/01/vinyle-150x150.jpg" class="attachment-thumbnail" alt="vinyle" /></div>
</div>
            </li>
            <li>

    <div class="single-featured-image">
      <div class="event-title"></div>  <h2> <a href="javascript:void(0)" onclick="$('.img_side').hide();$('.event-info').show();"> Wood </a></h2>
<img width="1873" height="1244" src="http://mysite/wp-content/uploads/2015/01/032.jpg" class="attachment-full wp-post-image" alt="03" />

                <div class="second_image"><img width="150" height="150" src="http://mysite/wp-content/uploads/2015/01/wood-150x150.jpg" class="attachment-thumbnail" alt="wood" /></div>
</div>
            </li>



</ul>


    <div class="img_side">

        <img  src="http://mysite/wp-content/uploads/2015/02/man_ok.jpg" alt="">
        </div>
                            <div class="event-info"><h2>Laminate </h2> <ol>
<li><i> </i><i>AtroGuard</i><i>: the most water resistant HDF based laminate floor on the market</i></li>
</ol>
<p><i>Full bathroom installations</i></p>
<p><i>Can be wet-mopped!</i></p>
<p><i>Install on 4x the area without transition vs. traditional laminate!</i></p>
<p><i>Up to 48 unique visuals within one color – The look &amp; feel of real Hardwood!</i></p>
<ol start="2">
<li><i> The </i><i>Future in Flooring Designs</i></li>
</ol>
<p><i>Designs so close to real hardwood even industry professionals (YOU) can’t tell apart!</i></p>
<p><i>Unique </i><i>Patended</i><i> Chiseled Bevel!</i></p>
<p><i>Mixed Widths collections that you will find nowhere else!</i></p>
<ol start="3">
<li><i> Stock </i><i>programs available in North America, Europe and </i><i>China</i></li>
</ol>
</div>


    </div>
</div>

                <div id="cs-bottom-wrap" class="clearfix">
            <div class="container">
                <div class="row">
                    <div id="bottom-top" class="bottom-top clearfix">
                                            <div class='bottom-top-1 col-xs-12 col-sm-6 col-md-3 col-lg-3'>
                                                </div>
                                            <div class='bottom-top-2 col-xs-12 col-sm-6 col-md-3 col-lg-3'>
                                                </div>
                                        </div>
                </div>
            </div>
        </div>