Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>

<a href ='#' id = 'title'> Сладости (нажми, друг)!
    <span id = 'arrowClosed' >▶</span>
    <span id = 'arrowOpened' style = display:none; >▼</span>

</a>

<ul id="list" style="display: none;">
        <li>Торт</li>
        <li>Пончик</li>
        <li>Пирожное</li>
</ul>

<script>

    document.querySelector('#title').addEventListener('click',function(event) {
        var target = event.target;

        target.classList.toggle('active');

        if(target.classList.contains('active')) {
            document.querySelector('#arrowClosed').style.display = 'none';
            document.querySelector('#arrowOpened').style.display = 'inline-block';
            document.querySelector('#list').style.display = 'block';

        } else {

            document.querySelector('#arrowClosed').style.display = 'inline-block';
            document.querySelector('#arrowOpened').style.display = 'none';
            document.querySelector('#list').style.display = 'none';

        }
    })
</script>


</body>
</html>