Click on anchor link and display div with same ID

Hi there,

I am trying to create a list of services which you can click on to display more information.

I've set my HTML like so:
<section id="home-header">
<div class="col-sm-5">
<div class="service-box"><h2>Business Law</h2>                
<ul>
<li><a href="#creating-a-business"><h3>Creating a Business</h3></a></li>
<li><a href="#growing-a-business"><h3>Growing a Business</h3></a></li>
<li><a href="#operating-a-business"><h3>Operating a Business</h3></a></li>
<li><a href="#selling-a-business"><h3>Selling a Business</h3></a></li></ul>
</div>
</div>            

<div class="service-details" id="creating-a-business">
<h3>Creating a Business</h3>
<p>... </p>
</div>

<div class="service-details" id="growing-a-business">
<h3>Growing a Business</h3>
<p>...</p>
</div>

<div class="service-details" id="operating-a-business">
<h3>Operating a Business</h3>
<p>...</p>
</div>

<div class="service-details" id="selling-a-business">
<h3>Selling a Business</h3>
<p>...</p>
</div>
</section>

I've set all my .service-details divs to display:none, and I would like to display one .service-details when I click on the corresponding anchor link:

<a href="#selling-a-business"> would display the div id="selling-a-business".

I must keep the HTML as is. Can someone please help?

Thanks!