What I have tried:$('a.slick-hide').bind('click', function(){var $div1 = $('#box1'), $div2 = $('#box2')if ( $div2.is(':visible') ) {$div2.hide();} else if ( $div1.is(':visible') && $div2.is(':hidden) ) {$div1.hide();} else {$div1.show();$div2.hide();}}); <html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/JavaScript" src="test.js">
</script>
</head>
</head>
<body>
<div id="box1">
<p> JavaScript is the programming language of HTML and the Web. <br />
Programming makes computers do what you want them to do. <br />
JavaScript is easy to learn. </p>
</div>
<div id="box2">
<p>hello</p>
</div>
<a class="slick-hide" href="#">link</a>
</body>
</html>