jeyjack

I am using THIS SCRIPT from W3schools but I was wondering, is there a way to add a transition effect so that when clicking on items, they are not expanded/contracted too fast but with a slide effect? This is the actual CSS of the Treeview menù: ul, #myUL { list-style-type: none; } #myUL { margin: 0; padding: 0; } .caret { cursor: pointer; -webkit-user-select: none; /* Safari 3.1+ */ -moz-user-select: none; /* Firefox 2+ */ -ms-user-select: none; /* IE 10+ */ user-select: none; } .caret::before { content: "\25B6"; color: black; display: inline-block; margin-right: 6px; } .caret-down::before { -ms-transform: rotate(90deg); /* IE 9 */ -webkit-transform: rotate(90deg); /* Safari */' transform: rotate(90deg); } .nested { display: none; } .active { display: block; }

I want to use this script and functionality (Animated Collapsible) taken from w3schools, it works perfect with text <p> or static content. but my goal is to insert content that can be expanded or reduced on click (i.e.: Tree view content) inside the Collapsible Div. I tried, but if I do, when I click on arrow to expand one item, collapsible div is not auto expanded/reduced according to my click. Is there a way to make it auto expand or reduce itself ? Otherwise can you suggest me another script that includes this functionality?? Thank you in advance