I have images displayed beside each other, when I click on a particular image, its description should appear below with out changing other images' position. The code I have is this: 

```
<div class="team">
  <h3>OUR TEAM</h3>
  <div class="toggle" style="display:inline-block;">
    <a href="#"><img src="http://imgur.com/gallery/I7kTE" width="20" height="15"/></a> 
    <h4>name1</h4>
  </div>
  <div class="content">
    Img 1 description texttexttexttexttexttexttexttexttext
  </div>
  <div class="toggle" style="display:inline-block;">
    <a href="#"><img  src="http://imgur.com/gallery/I7kTE" width="20" height="15"/></a> 
    <h4>name2</h4>
  </div>
  <div class="content">
    Img 2 description texttexttexttexttexttexttexttexttext
  </div>
  <div class="toggle" style="display:inline-block;">
    <a href="#"><img src="http://imgur.com/gallery/I7kTE" width="20" height="15"/></a> 
    <h4>name3</h4>
  </div>
  <div class="content">
    Img 3 description text text text text text text text text
  </div>
</div>

```

jQuery code:

```
   $(document).ready(function () {
     var $content = $(".content").hide();
     $(".toggle").on("click", function (e) {
        $(this).toggleClass("expanded");
        $(this).next().slideToggle();
     });
     });

```

<http://jsfiddle.net/pnhLyjb6/>