Native js to achieve accordion effect

In actual web page development, accordions also appear frequently.

I made a simple accordion, but I felt that its transition effect was not realized, and the content list appeared abruptly. The effect picture is as follows:

The implementation code is as follows:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Accordion</title>
    <style>
        body,
        ul {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .nav {
            width: 150px;
            height: 310px;
            margin-top: 30px;
            margin-left: 50px;
            font-size: 20px;
            border: 1px solid #ccc;
        }

        .nav>ul>li:nth-child(2n+1) {
            background-color: cadetblue;
        }

        .nav>ul>li:nth-child(2n+2) {
            height: 160px;
            display: none;
            transition: all 1s;
        }

        .nav>ul>#selected {
            background-color: rgb(46, 115, 117);
        }

        .nav>ul>li:nth-child(2) {
            display: block;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li id="selected">Title 1</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>Title 2</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>Title 3</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>Heading 4</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>Title 5</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
            <li>Title 6</li>
            <li>
                <ul>
                    <li>1</li>
                    <li>2</li>
                    <li>3</li>
                    <li>4</li>
                </ul>
            </li>
        </ul>
    </div>
    <script>
        var title = document.querySelectorAll(".nav>ul>li:nth-child(2n+1)");
        for (var i = 0; i < title.length; i++) {
            title[i].onmouseover = function () {
                for (var j = 0; j < title.length; j++) {
                    title[j].nextElementSibling.style.display = "none";
                    title[j].id = "";
                }
                this.id = "selected";
                this.nextElementSibling.style.display = "block";
            }
        }
    </script>
</body>

</html>

The transition effect is added with code: transition: all 1s;
But it didn't work, a little doubtful? !

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

Pure js to achieve accordion effect code
Use ReactJS to implement tab page switching, menu bar switching, accordion switching and progress bar effects
js to achieve a simple accordion effect
Accordion effect navigation menu made by native js
Vue.js accordion menu component development example
js realizes the effect of foldable and expandable accordion menu
Pure js to achieve accordion effect
JS realizes the picture accordion effect
Native JS to achieve vertical accordion effect
Html5 js to achieve accordion effect

<<: Detailed tutorial for downloading, installing and configuring MySQL 5.7.27

>>: Detailed explanation of Nginx Rewrite usage scenarios and code examples