Dev.to

JS DOM shortcuts for easy coding

Payilagam 15-March-2025 Topic: Javascript Contents: Part I: JS DOM shortcuts. nextElementSibling. previousElementSibling. lastElementChild. children. Part II. UI Element. Accordion making Part I - JS DOM shortcuts nextElementSibling - It returns the immediate next sibling to the given DOM element that presented in a same div. If none is present next to it it returns null; previousElementSibling - It return the immediate previous element of the given DOM element in a same div. It also return null if no one is present. lastELementChild - It return the last element presented in the same division(at last element in a div). children - It returns the child elements if any present in a HTML Collection Format, we can access it using index accessing like method -> varName[0] : 0th element in the HTML Collection. Part II - UI Element Accordion making. Accordion making is a simple process. step 1: Group the Accordion title & Accordion Content in a div. step 2: Set the default height=0 & overflow = hidden for the accordion content element.(it will disappear now). step 3: Add a css styles for the new class .active. Set height = fit-content & other styles you needed for the accordion content. (this .active class is used to make appear for the accordion-content so the given height is the important logic). step 4: In js, add a function that receives an element and get the next element to it using element.nextElementSibling.(it gives the respective accordion content element to the clicked accordion-question). step 5: Define the HTML elements. In the Accordion header element add the javascript functions's name with (this) argument.(it calls the function with this element, hence we can easily find out the accordion content). step 6: After defining the HTML, go to the js function & add an extra line to the function. step 7: Finish the program. element.nextElementSibling.classList.toggle('active'); => actual magic happens here Explanation: The above line adds the '.active' class to the accordian content if not present. In default the accordian content's height is 0, hence will not shown to us. Here in this '.active' class we define the height as fit-content, so the accordian content will appear when .active class append to its styles and disappear when it removed, the toggle() method adds the argument as a class to the element's class list if it is not present, if it is present already it will remove the class instead of adding.

Mar 15, 2025 - 14:02

Payilagam 15-March-2025

Topic: Javascript

nextElementSibling - It returns the immediate next sibling to the given DOM element that presented in a same div. If none is present next to it it returns null;
previousElementSibling - It return the immediate previous element of the given DOM element in a same div. It also return null if no one is present.
lastELementChild - It return the last element presented in the same division(at last element in a div).
children - It returns the child elements if any present in a HTML Collection Format, we can access it using index accessing like method -> varName[0] : 0th element in the HTML Collection.

Part II - UI Element

Accordion making. Accordion making is a simple process.

step 1: Group the Accordion title & Accordion Content in a div.

step 2: Set the default height=0 & overflow = hidden for the accordion content element.(it will disappear now).

step 3: Add a css styles for the new class .active. Set height = fit-content & other styles you needed for the accordion content. (this .active class is used to make appear for the accordion-content so the given height is the important logic).

step 4: In js, add a function that receives an element and get the next element to it using element.nextElementSibling.(it gives the respective accordion content element to the clicked accordion-question).

step 5: Define the HTML elements. In the Accordion header element add the javascript functions's name with (this) argument.(it calls the function with this element, hence we can easily find out the accordion content).

step 6: After defining the HTML, go to the js function & add an extra line to the function.

step 7: Finish the program.

element.nextElementSibling.classList.toggle('active'); => actual magic happens here

Explanation: The above line adds the '.active' class to the accordian content if not present. In default the accordian content's height is 0, hence will not shown to us. Here in this '.active' class we define the height as fit-content, so the accordian content will appear when .active class append to its styles and disappear when it removed, the toggle() method adds the argument as a class to the element's class list if it is not present, if it is present already it will remove the class instead of adding.