Currently, I am in the process of creating a TreeView using only CSS and JS. My goal is to include a subtle transition effect when expanding or collapsing a node. The transition effects are successfully implemented for collapsing nodes, however, they do not seem to be working as intended for expanding actions. I have utilized the max-height property to control the transition values.
To view the code sample, please click on the following link: https://codepen.io/justinus-hermawan/pen/RwoGKmq
I have made some changes to the code:
Removed transition: all .4s ease; and replaced it with
transition: max-height 0.4s ease-in-out;Added the following to the CSS:
.tree .node.active > .subitems {
max-height: 1000px;
transition: max-height 0.4s ease-in-out;
}
Note: In the demo below, I have added a setTimeout in your JavaScript to create an animation effect for the toggler icons. Feel free to remove it if you prefer using the default JavaScript behavior.
Demo
$(function() {
$('#tree .node .toggler').on('click', function() {
var obj = this;
$(this).closest('.node').toggleClass('active').find('.subitems').slideToggle();
if ($(obj).closest('.node').hasClass('active')) {
$(obj).html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h-2v5h-5v-2z"/></svg>');
} else {
$(obj).html('<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h-2v5h-5v-2z"/></svg>');
}
});
});@import url(https://fonts.googleapis.com/css?family=Roboto);
/* Your existing CSS styles are here */
/* I've only included additional CSS rules that were added above */<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Tree structure</p>
<!-- Rest of the HTML code from your original snippet -->Despite the claims on the official website that gltf files should load in three.js scenes using IE11, I have been experiencing issues with the loader. Even the examples provided by three.js fail to work on Internet Explorer when it comes to loading gltf fi ...
I have a challenge where I need to create a program that can connect to a website and click on all buttons it finds. The catch is that the buttons are identical in text, link, and CSS properties. Imagine this scenario: <content> <line1> & ...
I am a newcomer to node.js, although I have been writing Javascript for many years. Recently, I encountered an interesting pattern that has left me puzzled: a Flag that is used to set a modifier on the object. For example, in the socket.io documentation: ...
Here is the code for my custom TextField component: <TextField fullWidth: true, classes, helperText: errorText, FormHelperTextProps: getInputProps({ error }), InputProps: getInputProps({ error, endAdornment: error ? <Warning ...
Review the code snippet provided below <div id="post-1234"> <h3><a href="some link">text</a></h3> <div> <div> <div> <span class"Event-Date">Event Date 1</span> </div> < ...
Here is a function I have created to submit forms: function submit_form(form) { $( form ).submit(function(e) { // Prevent form submission e.preventDefault(); // Get the form instance ...
Is it possible to work with 2 .json files simultaneously? My attempt did not succeed, so I am looking for an alternative method. If you have a suggestion or know the correct syntax to make this work, please share. And most importantly, does the second .j ...
I currently have a dropdown list on my page with the ID of "mainDDL" and some pre-existing data. Now, I am looking to duplicate this dropdown list and add it to another specific div element. To accomplish this, I used the following code snippet: var dd ...
Within my Next.js project, I incorporated a query client into a page component, utilizing getServerSideProps for server-side rendering. The structure of the page is as follows: const Index = ({ configData }) => { const { t } = useTranslation(); cons ...
Feel free to check out my contact form on benlevywebdesign.com, located at the bottom of the page. <form id="form1" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="text/plain" method="get"> <fieldset> ...
When I run my code, mydocuments.find({}).toArray is returning empty. I have seen some solutions posted but they don't apply to my situation since I am using MongoClient.connect. Any help would be greatly appreciated. var MONGOHQ_URL="mongodb://harish ...
I'm feeling a bit embarrassed to admit it, but I am still learning the ropes when it comes to Javascript development. I've hit a roadblock and could really use some help from the experts here. Thank you in advance for all the assistance this comm ...
I am struggling to correctly stub out Stripe from my tests CartCheckoutButton.ts import React from 'react' import { loadStripe } from '@stripe/stripe-js' import useCart from '~/state/CartContext' import styles from '. ...
I am currently in the process of developing a website. The navigation on the website starts off as transparent (background: transparent) when opened, but as soon as you start scrolling, it should transition to a colorful state with shades like grey, midnig ...
I am in the process of creating a functionality where clicking on one element will fill another element's content from bottom to top. Although I have managed to make it work on hover, the same functionality is not triggered when clicking on the eleme ...
After countless hours of research and experimentation, I find myself at a standstill. My web page is coded extensively, so I'll do my best to provide a concise summary. The core elements of my ASP CLASSIC page for creating tickets via a form are as f ...
After testing out 3-4 npm modules, I encountered issues with each one when trying to mask my ion-input for Credit Card numbers into groups of 4. Every module had its own errors that prevented me from achieving the desired masking result. I am looking for ...
I am wondering how I can leave the Room when I click on a new Room Here is what my page looks like: https://i.sstatic.net/vuwv0.png The list on the left side is from the MySQL Server and it displays a list of my chats. Each Room name has an id value whi ...
Working on a client-side class, I am in the process of changing an XHR request and getElementById function to a jQuery ajax request along with jQuery document manipulation. The task at hand is to display descriptions of items available from "Rob's Roc ...
While working on a modified version of the Jquery File Upload Plugin from Hayageek, I encountered an issue. The original code worked perfectly, but when I made modifications to insert the uploaded filename into a database, the JSON response did not include ...