It's done with Javascript or you could use JQuery too. JQuery is just a Javascript library. I like JQuery, it saves a lot of time.
You can do something like this:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
$("#target").hide();
$(".arrow").click(function(){
$(this).toggleClass('open_arrow closed_arrow');
$("#target").toggle();
});
});
</script>
</head>
<body>
<a href='#' class='arrow closed_arrow'>Click Me</a>
<div id='target'>
<p>This is the target of the arrow</p>
</div>
</body>
</html>
This starts with the target hidden. If you want to start with it visible, just remove the $("#target").hide();
Obviously, you're going to want to change the "click me" to an arrow using the classes 'open_arrow' and 'closed_arrow' appropriately.
Hope that helps!
