Click here to Skip to main content
15,513,655 members
Home / Discussions / JavaScript
   

JavaScript

 
QuestionFormulario js Pin
Member 155607559-Mar-22 8:18
Member 155607559-Mar-22 8:18 
AnswerRe: Formulario js Pin
RedDk9-Mar-22 8:33
RedDk9-Mar-22 8:33 
QuestionCreating a responsive menu Pin
Member 1554804125-Feb-22 5:58
Member 1554804125-Feb-22 5:58 
AnswerMessage Closed Pin
25-Feb-22 6:40
Member 1554804125-Feb-22 6:40 
AnswerMessage Closed Pin
25-Feb-22 6:41
Member 1554804125-Feb-22 6:41 
AnswerRe: Creating a responsive menu Pin
Member 1554804125-Feb-22 6:44
Member 1554804125-Feb-22 6:44 
AnswerRe: Creating a responsive menu Pin
Richard Deeming27-Feb-22 22:12
mveRichard Deeming27-Feb-22 22:12 
QuestionAdding auto expand functionality to collapsible script Pin
Member 1554681524-Feb-22 4:38
Member 1554681524-Feb-22 4:38 
I have used THIS SCRIPT to create collapsible sections into my website.

as you can see I have problem since inside the collapsible section, I inserted a drop down menu',
when I expand section and I click on drop down menu' to see more voices, the collapsible section doesn't expand automatically with the content. How can I make the collapsible section automatically expand\contract according to its content?

this is the javascript part:

JavaScript
<pre><script>

window.addEventListener("DOMContentLoaded", e => {

  const getContainerHeight = el => {
    return window.getComputedStyle(el).getPropertyValue("height");
  };

  const setTransitionHeights = el => {

    let containerWasOpen = el.classList.contains("open");

    el.style.height = null;

    el.classList.remove("open", "ready");
    el.dataset.initial = getContainerHeight(el);

    el.classList.add("open");
    el.dataset.final = getContainerHeight(el);
    el.classList.remove("open");

    if(containerWasOpen) {
      el.classList.add("open");
      el.style.height = el.dataset.final;
    } else {
      el.style.height = el.dataset.initial;
    }

    el.classList.add("ready");

  };

  document.querySelectorAll(".collapsible.slow").forEach(current => {

    let toggler = document.createElement("div");
    toggler.className = "toggler";
    current.appendChild(toggler);

    setTransitionHeights(current);

    toggler.addEventListener("click", e => {
      current.style.height = current.classList.toggle("open") ? current.dataset.final : current.dataset.initial;
    });

  });

  window.addEventListener("resize", e => {

    document.querySelectorAll(".collapsible.slow").forEach(current => {
      setTransitionHeights(current);
    });

  });

});

</script>


and this is the CSS part:


<pre lang="CSS"><pre> .boxed {
    border: 1px solid #ccc;
    padding: 1em 2em;
  }

  .collapsible.slow {
    position: relative;
    overflow: hidden;
    padding-bottom: 0.5em;
    transition: height 0.5s ease-out;
  }
  .collapsible.slow > * {
    display: none;
  }
  .collapsible.slow > p:first-child,
  .collapsible.slow.open > *,
  .collapsible.slow.ready > * {
    display: revert;
  }

  .collapsible.slow > .toggler {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    background: #fff;
    text-align: center;
    cursor: pointer;
  }
  .collapsible.slow > .toggler::after {
    content: "\25bc";
  }
  .collapsible.slow.open > .toggler::after {
    content: "\25b2";
  }


If required I can write also the drop down menu' code.

Thanks in advance for sharing your experience.
Regards,
jeyjack

modified 26-Feb-22 8:05am.

AnswerRe: Adding auto expand functionality to collapsible script Pin
Member 1554681524-Feb-22 10:52
Member 1554681524-Feb-22 10:52 
QuestionProper decoding using Vanilla Javascript Pin
jkirkerx17-Feb-22 13:04
professionaljkirkerx17-Feb-22 13:04 
AnswerRe: Proper decoding using Vanilla Javascript Pin
Richard Deeming17-Feb-22 22:33
mveRichard Deeming17-Feb-22 22:33 
GeneralRe: Proper decoding using Vanilla Javascript Pin
jkirkerx18-Feb-22 7:49
professionaljkirkerx18-Feb-22 7:49 
GeneralRe: Proper decoding using Vanilla Javascript Pin
Richard Deeming24-Feb-22 1:21
mveRichard Deeming24-Feb-22 1:21 
GeneralRe: Proper decoding using Vanilla Javascript Pin
jkirkerx24-Feb-22 6:37
professionaljkirkerx24-Feb-22 6:37 
QuestionAngular JS A href in View source Pin
Member 367124116-Feb-22 2:36
Member 367124116-Feb-22 2:36 
AnswerRe: Angular JS A href in View source Pin
Richard Deeming17-Feb-22 2:58
mveRichard Deeming17-Feb-22 2:58 
QuestionWhy is my last input box not centering (class: powerwall-battery-input)? Pin
WannaBeAWebDev11-Feb-22 15:20
WannaBeAWebDev11-Feb-22 15:20 
AnswerRe: Why is my last input box not centering (class: powerwall-battery-input)? Pin
rnbergren15-Feb-22 4:03
rnbergren15-Feb-22 4:03 
QuestionUsing modules in a regular PHP Web Application - function is undefined Pin
jkirkerx9-Feb-22 13:23
professionaljkirkerx9-Feb-22 13:23 
AnswerRe: Using modules in a regular PHP Web Application - function is undefined - Think I got it now Pin
jkirkerx9-Feb-22 14:25
professionaljkirkerx9-Feb-22 14:25 
AnswerRe: Using modules in a regular PHP Web Application - function is undefined Pin
Richard Deeming9-Feb-22 22:49
mveRichard Deeming9-Feb-22 22:49 
GeneralRe: Using modules in a regular PHP Web Application - function is undefined Pin
jkirkerx10-Feb-22 6:00
professionaljkirkerx10-Feb-22 6:00 
GeneralRe: Using modules in a regular PHP Web Application - function is undefined Pin
jkirkerx10-Feb-22 11:52
professionaljkirkerx10-Feb-22 11:52 
QuestionModules and scripts, common modules and scripts, just want to call some functions from a common external script, sort of ES6 Pin
jkirkerx28-Jan-22 11:29
professionaljkirkerx28-Jan-22 11:29 
AnswerRe: Modules and scripts, common modules and scripts, just want to call some functions from a common external script, sort of ES6 Pin
jkirkerx28-Jan-22 11:52
professionaljkirkerx28-Jan-22 11:52 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.