HTML - simple expander example

2 contributors

7 contributions

0 discussions

2 points

Created by:

Root-ssh

175450

In this article we would like to show you, how to create simple expander.

// ONLINE-RUNNER:browser;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple expander with jQuery</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <style>
        .section {
            width: 500px;
            border: solid black 1px;
            padding: 5px;
            margin: 5px;
        }

        .hidden-list {
            display: none;
            transition:opacity 1500ms;
        }
    </style>
    <script>
        $(document).ready(function() {
            function addElementToExpander(elemId) {
                var isVisible = false;
                var listId = elemId + "-list"; // section-1-list
                var signId = elemId + "-sign"; // section-1-sign
                $(elemId).click(function() {
                    if (isVisible) {
                        $(listId).hide(300);
                        $(signId).text("\\/");
                        isVisible = false;
                    } else {
                        $(listId).show(300);
                        $(signId).text("/\\");
                        isVisible = true;
                    }
                });
            }
            addElementToExpander("#section-1");
            addElementToExpander("#section-2");
        });
    </script>
</head>
<body style="height: 300px;">
    <div class="section" id="section-1" style="overflow: auto;">
        <div style="float: left;">Section 1</div>
        <div id="section-1-sign" style="float: right;">\/</div>
        <div style="clear: both;"></div>
        <ul id="section-1-list" class="hidden-list">
            <li>Apple</li>
            <li>Banana</li>
            <li>Orange</li>
        </ul>
    </div>
    <div class="section" id="section-2" style="overflow: auto;">
        <div style="float: left;">Section 2</div>
        <div id="section-2-sign" style="float: right;">\/</div>
        <div style="clear: both;"></div>
        <ul id="section-2-list" class="hidden-list">
            <li>A</li>
            <li>B</li>
            <li>C</li>
        </ul>
    </div>
</body>
</html>