Add up or down arrows to headers that are toggled to display text

Question

I have some scripts based on JQuery and Bootstrap that allow me to make blocks of text display or not display, controlled by clicking the preceding header.

Here's an example of a header and text block stored in my database:

<h2 id="where" data-toggle="collapse" data-target=".Header2,.Where">Where am I?</h2>
<section class="ConSec Where">
  <p>If you&#8217;ve ever worked in the Alaskan wilderness or explored Africa, you know how easy it is to get lost. (I&#8217;ve been temporarily lost three or four times &#8211; in fog, dense forests and in a blizzard on the Arctic Ocean.)</p>
</section>

My JavaScript skills are pretty weak, so I don't yet understand exactly how it works. I have some similar functions on my page that are controlled by this script:

<script>
 $("#intro").click(function(e) {
    e.preventDefault();
    $("#intro,.ConSec").toggleClass("texted");
 });
</script>

However, I can open and close blocks of text even if I delete the above script, so maybe it's controlled by CSS.

I would like to modify my code so that headers display up or down arrows, similar to Wikipedia's mobile pages; eg http://en.m.wikipedia.org/wiki/Mammal

If you scroll down to a header (eg "Distinguishing Features" or "Classification"), you'll see what I mean.

I'm not sure if those arrows are images or some sort of font characters. I wondered if anyone could tell me how to make something similar. I can probably figure out some way of doing it using images, but it would be pretty amateurish.

Answer 1

Try adding the following span to your h2:

<span class="glyphicon glyphicon-chevron-up"></span>

So it will look like...

<h2 id="where" data-toggle="collapse" data-target=".Header2,.Where">
    <span class="glyphicon glyphicon-chevron-up"></span>
    Where am I?
</h2>

You can find the codes for the different Bootstrap icons here: http://getbootstrap.com/components/

Just replace glyphicon-chevron-up with the one you want.