Jquery
<script>
//Code snippet
$(document).ready(function(){
$(".team").click(function(){
$(".panel").fadeToggle("3000");
});
$(".team").click(function(){
$(".teamh").fadeToggle("3000");
});
});
</script>
HTML
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
//Code snippet
$(document).ready(function(){
$(".team").click(function(){
$(".panel").fadeToggle("3000");
});
$(".team").click(function(){
$(".teamh").fadeToggle("3000");
});
});
</script>
</head>
<body>
<!--Buttons-->
<a><span class="team"></span></a>
<a><span class="events"></span></a>
<a><span class="media"></span></a>
<a><span class="contact"></span></a>
<span class="panel"></span>
<span class="teamh"></span>
<script src="assets/js/bootstrap.min.js"></script> <span class="panel"></span>
</body>
</html>
In the code above, I am attempting to toggle a panel's display with a fade effect using JQuery when a certain button is clicked.
I want the panel to show and have hover effects applied to the "button" which is represented by an <a> tag in the HTML structure.
Therefore, my goal is: When the .team element is toggled to display the panel, I also want to apply hover effects on it.