Table of contents

• Overview
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
• Author

Overview

Screenshot

Links

• Solution URL: Solution URL here
• Live Site URL: Live Site URL here

My process

Built with

• Semantic HTML5 markup
• Flexbox
• Mobile-first workflow

What I learned

I learned to use the "overflow" CSS property and used JS and put into practice what little I've learned

function listener(question, answer, span, height, questionContent) {
    question.addEventListener("click", () => {
        const styleConfirm = span.style.transform == "rotate(-180deg)";

        if (styleConfirm) {
            span.style.transform = "rotate(0)";
            question.style.overflow = "hidden";
            question.style.height = "3rem";
            answer.style.color = "hsl(240, 6%, 50%, 0)";
            questionContent.className = "question-content";
        } else {
            span.style.transform = "rotate(-180deg)";
            question.style.overflow = "visible";
            answer.style.color = "hsl(240, 6%, 50%)";
            question.style.height = height + "px";
            questionContent.className = "question-content-clicked";
        }

    })
}

Author

• Linkedin - Mateus Moura Domingos
• Frontend Mentor - @Theuz1nh0