Use image maps to show and hide div elements
<p>This is my code so far..</p>

<p><a href="https://jsfiddle.net/moragw5/vr6wzuc2/" rel="nofollow"><strong>DEMO</strong></a></p>

<p>I'm wanting the user to be shown the blue text only if they click the blue circle etc...</p>

<p>I guess I just have to change the attributes of the div elements but I'm not very comfortable with jQuery and unsure of the most elegant way to do this.</p>

<p>HTML</p>

<pre><code>&lt;img src="http://www.j-creative.biz/wp-content/uploads/2015/10/primary-colours-300x171.png" usemap="#test1" alt="" /&gt;
&lt;map id="primarytest" name="test1"&gt;
  &lt;area shape="circle" coords="50,75,50" href="#" item="red"/&gt;
  &lt;area shape="circle" coords="150,75,50" href="#" item="blue"/&gt;
  &lt;area shape="circle" coords="250,75,50" href="#" item="yellow"/&gt; 
&lt;/map&gt;

&lt;div class="one" style="display:none" id="redtext"&gt;
&lt;h5&gt;
HelloRed
&lt;/h5&gt;
&lt;/div&gt;
&lt;div class="one" style="display:none" id="bluetext"&gt;
&lt;h5&gt;
HelloBlue
&lt;/h5&gt;
&lt;/div&gt;
&lt;div style="display:none" id="yellowtext"&gt;
&lt;h5&gt;
HelloYellow
&lt;/h5&gt;
&lt;/div&gt;
</code></pre>

<p>jQuery</p>

<pre><code>$('[item="red"]).click(function() {
$(".one").hide();
    $("#redtext").show();
    return false;
});
</code></pre>