Task requirements:

Selector manipulation.
Event handling (on mouse over/out, focus/blur etc.) – for example (a description of what you
get when clicking the link)
Hide/Fade some text/menu options elements
Slide effect,
Animation effects

Index.html

<html>
<head>
	<title>Dawid Andrejczuk</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
	<script>
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
	</script>
	<script>
$(document).ready(function(){
    $("p").dblclick(function(){
        $("p:first").hide();
    });
});
	</script>
	<script>
$(document).ready(function(){
    $("#hide").click(function(){
        $("#ex3").hide();
    });
    $("#show").click(function(){
        $("#ex3").show();
    });
});
	</script>
	<script>

$(document).ready(function(){
    $("#ex2").mouseenter(function(){
        alert("You entered example 2!");
    });
});
</script>
<script>
$(document).ready(function(){
    $("#ex5").click(function(){
        var div = $("#anim");
        div.animate({height: '300px', opacity: '0.4'}, "slow");
        div.animate({width: '300px', opacity: '0.8'}, "slow");
        div.animate({height: '100px', opacity: '0.4'}, "slow");
        div.animate({width: '100px', opacity: '0.8'}, "slow");
    });
});
</script> 
	<style> 
#panel, #flip {
    padding: 5px;
    text-align: center;
    background-color: #e5eecc;
    border: solid 1px #c3c3c3;
}

#panel {
    padding: 100px;
    display: none;
}

li:hover{
            background-color:cyan;
        }
	</style>
</head>
<body>
	<h1>Using jQuery - Task 7</h1>
	
	<div id="flip">Example to click to slide down or up</div>
	<div id="panel">
		<ul>
		<li><p id="ex3">Example with hide and show buttons</p>
		<button id="hide">Hide</button>
		<button id="show">Show</button></li>
		<li><p>Example with double click manipulation</p></li>
		<li><p id="ex2">Example with event on entry</p></li>
		<li><div id="anim" style="background:orange;height:100px;width:100px;position:absolute;"></div>
		<button id="ex5">Start animation</button></li>
	</ul>
	</div>
</body>
</html>

On next page you can check demo version.