如何用普通的javascript代替如下jquery代码

<div class="title">
<h2>1Table: with sorting and paging</h2>
<span class="hide"></span>
</div>
<div class="content">.............</div>
<div class="title">
<h2>2Table: adfasdfasdf</h2>
<span class="hide"></span>
</div>
<div class="content">.............</div>
如上代码中我用jquery来进行如下操作，但提示 $ is not defined.于是就想问如何用普通的javascript实现如下功能？ 
<script type="text/javascript">
$('.hide').click(function(){
    if($(this).parent().next().hasClass('content'))
    $(this).parent().next().removeClass('content').css('display','none');
     else
     $(this).parent().next().addClass('content').css('display','block')
});</script>