JSFiddle - React, Tailwind, and code Playground

by bohdantheone

HTML

<ul>

<li><a id="m1" href="#" onclick="javascript: showhide(1,20);return false;">Первая ссылка</a></li>

   <div id="p1">

   Здесь много вложенных кнопочек.

   </div>

<li><a id="m2" href="#" onclick="javascript: showhide(2,20);return false;">Вторая ссылка</a></li>

   <div id="p2">

   Здесь много вложенных кнопочек.

   </div>

<li><a id="m3" href="#" onclick="javascript: showhide(3,20);return false;">Третья ссылка</a></li>

   <div id="p3">

   Здесь много вложенных кнопочек.

   </div>

<li><a id="m4" href="#" onclick="javascript: showhide(4,20);return false;">Четвёртая ссылка</a></li>

   <div id="p4">

   Здесь много вложенных кнопочек.

   </div>

<li><a id="m5" href="#" onclick="javascript: showhide(5,20);return false;">Пятая ссылка</a></li>

   <div id="p5">

   Здесь много вложенных кнопочек.

   </div>

</ul>
<script type="text/javascript" language="javascript">

        function show(obj, height)

        {

        var a = document.getElementById('p'+obj);

        var b = document.getElementById('m'+obj);

        document.getElementById('p'+obj).style.display="";

           b.className='sel';

           if (a.offsetHeight < height)

           {  a.style.height = (a.offsetHeight + 10) + "px";

              setTimeout (function(){show(obj, height)}, 30);

           }

           else {bl=0;document.getElementById('p'+obj).style.overflow="visible"};

        }

        

        function hide(obj) 

        {

        var a = document.getElementById('p'+obj);

        var b = document.getElementById('m'+obj);

        document.getElementById('p'+obj).style.overflow="hidden";

           if (a.offsetHeight > 1)

           {  a.style.height = (a.offsetHeight - 10) + "px";

              setTimeout (function(){hide(obj)}, 30);

           }

           else {bl=0;

        b.className='';

        document.getElementById('p'+obj).style.display="none";

        }

        }

        

        var bl=0;

        function showhide(obj, height)

    ...

CSS

a {outline:none;}

        #content {width:300px;margin:0 auto;}

        #footer {width:700px;margin:0 auto;text-align:center;}

        #p1, #p2, #p3, #p4, #p5 {height:0;overflow:hidden;background:#ececec;}