JSFiddle - React, Tailwind, and code Playground

by Sergio Crisostomo

HTML

<title>jquery effect</title>
<link rel="stylesheet" href="css/custom.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>


<body>

    <div class="primary">

        <h1 class="heading-list">Músicos</h1>
        <div class="list">
            <ul>
                <li><a href="#">Roberto Carlos</a></li>
                <li><a href="#">Caetano Veloso</a></li>
                <li><a href="#">Elvis Presley</a></li>
                <li><a href="#">Green Day</a></li>
                <li><a href="#">The Strokes</a></li>
                <li><a href="#">Red Hot Chille Peppers</a></li>
            </ul>
        </div>

        <h1 class="heading-list">Músicos</h1>
        <div class="list">
            <ul>
                <li><a href="#">Roberto Carlos</a></li>
                <li><a href="#">Caetano Veloso</a></li>
                <li><a href="#">Elvis Presley</a></li>
                <li><a href="#">Green Day</a></li>
                <li><a href="#">The Strokes</a></li>
                <li><a href="#">Red Hot Chille Peppers</a></li>
            </ul>

        </div>
    </div>

</body>

</html>

CSS

body {
    margin: 0;
    padding: 0;
    line-height: 1.5;
}

.heading-list {
    font-family: sans-serif;
    font-size: 24px;
    color: #333;
    font-weight: bold;
    margin-top: 40px;
    margin-left: 40px;
    margin-bottom: 0;
    padding: 5px 0;
    color: coral;
}


/*.heading-list:hover + ul {
  display: block;

}*/

ul a {
    color: burlywood;
    text-decoration: none;
}

ul a:hover {
    color: aquamarine;
}

.primarary {
    height: 1000px;
}

ul {
    font-family: sans-serif;
    font-size: 22px;
    padding: 10px 0;
    margin-left: 40px;
    list-style: none;
    color: burlywood;
    margin: 0 0 0 40px;
    display: none;
}

JavaScript

jQuery(document).ready(function() {
    $('.heading-list').on('click', function() {
        $(this).next('.list').children().toggle();
    });
});