Jquery 在Img下隐藏/显示Img

总体目标：单击一行图标，显示图像、链接等

我现在正在使用Jquery来完成整个隐藏/显示工作。但是，当我一次测试一个时，图像显示在图标下方。当我在一行中一起测试它们时，图像出现在图标的左侧，将其余图标推到另一行

我能做些什么，当有人点击图标（这是一个图像本身）时，隐藏的图像会出现在整行图标下面

有四个图标，我把它们放在中间

<center><p>
<a id="BioButton"><img src="http://static.tumblr.com/6s0fefr/Lt4na0jnr/bionew.png">    </a><img id="MyBio" style="display:none;"  src="http://static.tumblr.com/6s0fefr/ce9na0k4w/bioimage.png">

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
   $(document).ready(function(){
      $('#BioButton').on("click", function(){
         $('#MyBio').toggle();
      });
   });
</script>
<a href="http://www.britrodriguez.com/music"><img     src="http://static.tumblr.com/6s0fefr/1QLn5uj1h/musicnew.png" style="width: 188px;     height: 188px;" /></a> 
<a href="http://www.britrodriguez.com/SHOWS"><img     src="http://static.tumblr.com/6s0fefr/vFQn5uj2h/tournew.png" style="width: 188px; height:     188px;" /></a>
<a href="http://www.britrodriguez.com/BOOK"><img     src="http://static.tumblr.com/6s0fefr/zOHn5uj3b/booknew.png" style="width: 188px; height:     188px;" /></a>
</center></p> 

问题在于第一张图像的正下方有div MyBio。将其移动到所有4个图标的末尾（在图标后面或之前）。那应该能解决你的问题

将此行移到图标集之后

<img id="MyBio" style="display:none;" src="http://static.tumblr.com/6s0fefr/ce9na0k4w/bioimage.png"/>

---

这里有一个简单的解决方案。与其将文本图像放在bio链接/图标中，为什么不将其放在自己的容器中？这样，文本将始终显示在所有内容下面

Html:

Jquery：

$(document).ready(function(){
      $('#BioButton').on("click", function(){
         $('#MyBio').toggle();
      });  
});

---

请给我们一个简单的例子：）所以，这应该说明问题所在。当您单击“生物”时，生物标记将显示在旁边，而不是下方。如果我将所有图标隐藏/显示在下方，此选项是否仍然有效？看起来是这样的！非常感谢。伟大的这是我的荣幸

.icon-container{
    display:inline-block;
    margin-bottom: 25px;
}

$(document).ready(function(){
      $('#BioButton').on("click", function(){
         $('#MyBio').toggle();
      });  
});