javascript - Hiding overflowing element based on its height -

i'm writing (using pure javascript = no jquery) custom control container collapses it's contents when span multiple lines , show first one. when click button in control (down arrow), container expands of it's content. if content spans 1 line, don't show button @ all , behaves regular container.

the 2 pictures below show control collapsed (upper one) , expanded (bottom one).

the problem face how know when show button , when not = how detect if content multiline or spans single line. approach getting height of element, collapsing , seeing if height changed (if did, must multiline).

the problem approach inside function createcollapsingpanel() element i'm creating hasn't been yet appended dom - function returns element, appended dom (illustrated architecture 1 below). if concern 1 function, of course move appending inside function (architecture 2 below). unfortunately way wrote of functions (they return elements, appended parent elements in outer functions called them) , mean re-writing other parent functions in end call one, in general whole architecture of functions.

---

architecture 1

function createouterelement() {   var outerelement = document.createelement(...);    outerelement.appendchild(createinnerelement());   /* other things outerelement */    return outerelement; }  function createinnerelement() {   var innerelement = document.createelement(...);    /* things innerelement */    return innerelement; } 

architecture 2

function createouterelement(parentelement) {   var outerelement = document.createelement(...);    parentelement.appendchild(outerelement);   createinnerelement(outerelement);   /* other things outerelement */ }  function createinnerelement(parentelement) {   var innerelement = document.createelement(...);    parentelement.appendchild(innerelement);   /* other things innerelement */ } 

---

main question

any ideas on how deal in current architecture (architecture 1)? maybe there's event attatch control element , invoked after element inserted dom , browser styles calculated it?

additional question

is writing functions in architecture 1 considered bad practice? i'm pretty new non-basic javascript, unsure practices are.

you have inner container multiline , clip outer container.

on outer container use:

• overflow: hidden
• height:somevalue

on inner container use:

• position: absolute
• height: auto

put span's inside inner container.

you can measure inner containers height independently outer ones.