How to add css transition in dropdown?

Question

I have dropdown or accordion, I just want to add css transition, so it's showing a slow effect after the click, but, it doesn't seem to work, I tried to add everywhere: transition: all 0.2s;

I have these texts: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

How is the transition actually works? normally I try to add it in the parent class.

const clickButton = document.querySelectorAll(".accordion");
clickButton.forEach(function (test) {
    const accordionHeader = test.querySelector(".accordion-header");
    accordionHeader.addEventListener("click", function () {
        test.classList.toggle('accordion-is-open')
    })
})

.accordion-wrapper {
    position: relative;
}
.accordion {
margin: auto;
    border-bottom: 1px solid #D4D9DD;
}
.accordion.accordion-is-open .accordion-content {
    display: inline-block;
}
.plus {
    display: block;
    cursor: pointer;
    color: #008CFD;
    font-size: 30px;
}
.minus {
    display: none;
    cursor: pointer;
    color: #008CFD;
    width: 20px;
    font-size: 50px;
}
.accordion.accordion-is-open .plus {
    display: none;
}
.accordion.accordion-is-open .minus {
    display: block;
}
.accordion-header {
    padding: 10px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.accordion-header p{
    font-size: 18px;
}
.side-line {
    background-color: #000;
    width: 20px;
    position: absolute;
    top: 0;
    height: 100%;
    border-radius: 20px 0 0 20px;
    opacity: 0.5;
}
.hideCheeseContent {
    display: none;
}
.accordion-content {
    padding: 0 0 20px 0;
    display: none;
}
.hide {
    display: none;
}

<div class="accordion-wrapper">
            <div class="accordion accordion-is-open">
                <div class="accordion-header">
                    <p>Title</p>
                    <span class="plus">+</span>
                    <span class="minus">-</span>
                </div>
                <div class="accordion-content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </div>
            <div class="accordion">
                <div class="accordion-header">
                    <p>Title</p>
                    <span class="plus">+</span>
                    <span class="minus">-</span>
                </div>
                <div class="accordion-content">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </div>
        </div>

transitions don't work when you set display: none, you need to change opacity for example, or height. — sambrmg
– sambrmg, Commented Jul 9, 2020 at 23:52

StrayAnt · Accepted Answer · 2020-07-10 03:46:26Z

You can do this with jQuery slideToggle(). I set unique id's to each content div you need to display and then added eventListeners to each of the div's the "accordian" class.

Link to more on slideToggle()--------->https://api.jquery.com/slidetoggle/

Example code below

<!DOCTYPE html>
<html>
<head>
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Test</title>
    <style type="text/css">
         .accordion-wrapper {
        position: relative;
    }
    .accordion {
    margin: auto;
        border-bottom: 1px solid #D4D9DD;
    }
    .accordion.accordion-is-open .accordion-content {
        display: inline-block;
        transition: 0.5s;
    }
    .plus {
        display: block;
        cursor: pointer;
        color: #008CFD;
        font-size: 30px;
    }
    .minus {
        display: none;
        cursor: pointer;
        color: #008CFD;
        width: 20px;
        font-size: 50px;
    }
    .accordion.accordion-is-open .plus {
        display: none;
    }
    .accordion.accordion-is-open .minus {
        display: block;
    }
    .accordion-header {
        padding: 10px 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .accordion-header p{
        font-size: 18px;
    }
    .side-line {
        background-color: #000;
        width: 20px;
        position: absolute;
        top: 0;
        height: 100%;
        border-radius: 20px 0 0 20px;
        opacity: 0.5;
    }
    .hideCheeseContent {
        display: none;
    }
    .accordion-content {
        padding: 0 0 20px 0;
        display: none;
    }
    .hide {
        display: none;
    }
    </style>
</head>
<body>

    <div class="accordion-wrapper">
                <div class="accordion">
                    <div class="accordion-header">
                        <p>Title</p>
                        <span class="plus">+</span>
                        <span class="minus">-</span>
                    </div>
                    <div class="accordion-content" id="content1">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
                <div class="accordion">
                    <div class="accordion-header">
                        <p>Title</p>
                        <span class="plus">+</span>
                        <span class="minus">-</span>
                    </div>
                    <div class="accordion-content" id="content2">
                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                    </div>
                </div>
            </div>

</body>
<script type="text/javascript">
     document.querySelectorAll('.accordion')[0].addEventListener('click', ()=>{
        $('#content1').slideToggle();
     });
      document.querySelectorAll('.accordion')[1].addEventListener('click', ()=>{
        $('#content2').slideToggle();
     });
</script>
</html>

Collectives™ on Stack Overflow

How to add css transition in dropdown?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related