How to open a partial view based on the img click?

I am writing you because I a bit lost.

I would like to create a page where there are 3 images, and each images are clickable.
When I click on one of the image, on the same page it should appear a partial view.

If I click another image, the all other partial view should disappear, and show only the partial view desired.

I have learned that in order to call a partial view the command line should be:
<pre>
@{
   Html.RenderPartial("_Android");
}

<pre><div class="container-fluid">
    <h2>MDMSection</h2>
    <p>The .thumbnail class can be used to display an image gallery.</p>
    <p>The .caption class adds proper padding and a dark grey color to text inside thumbnails.</p>
    <p>Click on the images to see all Q&A</p>
    <div class="row">
        <div class="col-md-4">
            <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
            <div class="caption">
                <p>Android</p>
            </div>
        </div>
        <div class="col-md-4">
            <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
            <div class="caption">
                <p>iOS</p>
            </div>
        </div>
        <div class="col-md-4">
            <img alt="Bootstrap Image Preview" src="http://lorempixel.com/140/140/" class="img-rounded" />
            <div class="caption">
                <p>Windows Phone</p>
            </div>
        </div>
    </div>
</div>
<div>
    <br/>
</div>
<div>
<p>
here it should appear my partial view.
</p>
@{
   Html.RenderPartial("_Android");
}
@{
   Html.RenderPartial("iOS");
}
@{
   Html.RenderPartial("_WindowsPhone");
}
</div>