JSFiddle - React, Tailwind, and code Playground

by Fernando Souza

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').bind('click',function(){
    $('.list').children().css({ 'display': 'block' });
    
  })
 
  
   $('.heading-list').bind('dblclick',function(){
    $('.list').children().css({ 'display': 'none' });
    
  
   })
  
 
  
});