javascript - 单击主文本时显示(淡入淡出)隐藏文本？

Question

所以我试过这个https://jsfiddle.net/e1b88ktf/ 我想在单击正文时应用向下滑动效果。 并且再次单击主文本时，隐藏文本必须返回。

function showText(show,hide)
{
    document.getElementById(show).className = "show";
    document.getElementById(hide).className = "hide";
}

div.hide { 
display:none;}
div.show {
  
}

<a onclick="showText('text1','text2')" href="javascript:void(0);">main-text</a>

<div id="text1" class="hide">
hidden text
</div>

编辑:
感谢您的帮助。
文本显示有淡入效果，但背景颜色的div没有。 我怎样才能使背景颜色-div 与文本一起淡出。
查看更新 Fiddle.

Answer 1

检查这个解决方案 -

function showText(text)
{
  $(text).animate({opacity: 'toggle'}, 800); 
}

div.hide { 
        display:none;
    }

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
   <a onclick="showText('#text1')" href="javascript:void(0);">text</a>
<div id="text1" class="hide">
hidden text
</div>

<p><a onclick="showText('#text2')" href="javascript:void(0);">text2</a>
<div id="text2" class="hide">
hidden text 2
</div>