Home/ Questions/Q 6352377
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T22:11:40+00:00

I would like to add animation effect to following code when showing tree items.

  • 0

I would like to add animation effect to following code when showing tree items.

I know that jquery has slide functions, and css has “transition”, but not sure how to apply these to my code. Any ideas?

<head>
    <script language="JavaScript">
        function show(){
            var elements = document.getElementsByClassName("label");
            for(var i = 0, length = elements.length; i < length; i++) {
              elements[i].style.display = 'block';
            }
        }
    </script>
    <style>
        .label { 
            -webkit-padding-start: 20px;
            display: none; 
            }
    </style>
</head>
<body>
    <div>
        <div onclick="show()">1st Row</div>
        <div>
            <div class="label">First</div>
            <div class="label">Second</div>
            <div class="label">Third</div>
        </div>
        <div>2nd Row</div>
    </div>
</body>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    If you are planning to use jQuery then you can use slideDown and slideUp method to show/hide elements with animation. There is slideToggle method which alternatively show/hides the element with animcation. You can modify your show method as below

    Working demo

        function show(obj){
       var $this = $(obj);//Here obj points to the element clicked

       //Now you have to show/hide the next sibling of the element clicked
       //We will use next() method which gives the next sibling of element
       //And then call slideToggle on it to show/hide alternatively
       $this.next().slideToggle();
    }

    Change in the markup

    <div onclick="show(this)">1st Row</div>
    • 0