用原生js代码实现手风琴效果

在实际网页开发中，手风琴出现频率也居高。
简单地做了一个手风琴，但觉得它的过渡效果没实现，内容列表出现得很突兀，效果图如下：

实现代码如下：

    
    
    
    
    



    

        

            
标题1
            

                

                    
1
                    
2
                    
3
                    
4
                
            
            
标题2
            

                

                    
1
                    
2
                    
3
                    
4
                
            
            
标题3
            

                

                    
1
                    
2
                    
3
                    
4
                
            
            
标题4
            

                

                    
1
                    
2
                    
3
                    
4
                
            
            
标题5
            

                

                    
1
                    
2
                    
3
                    
4
                
            
            
标题6
            

                

                    
1
                    
2
                    
3
                    
4
                
            
        
    
    

过渡效果加了代码：transition: all 1s;
但并未起作用，有点疑问？！