Если я нажимаю кнопку Введение, то появляется блок (по идее я планирую туда вставлять ссылки). Так вот, первую ссылку видит, остальные две ссылки не видит...
Даже почему-то сама кнопка ускакала наверх от остальных...
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="robots" content="noindex,nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>
<div class="container">
<div class="codrops-top clearfix">
</div>
<header>
<h1>Добро пожаловать гость!</h1>
<p>Внимание! Для ускорения работы закройте программу.</p>
</header>
<section class="color-8">
<nav class="cl-effect-7">
<body>
<div class="view-source">
<a href="#">Введение</a>
<div class="hide"> Спрятанная ссылка 1 </div>
<div class="hide">Спрятанная ссылка 2 </div>
<div class="hide">Спрятанная ссылка 3 </div>
</div>
<a href="#">Word</a>
<a href="#">Excel</a>
<a href="#">Access</a>
<a href="#">Практика</a>
<script>
$(function(){
$('.view-source .hide').hide();
$a = $('.view-source a');
$a.on('click', function(event) {
event.preventDefault();
$a.not(this).next().slideUp(500);
$(this).next().slideToggle(500);
});
});
</script>