A way to keep a link bold once selected (not the same as a:visited)

Question

I am creating a 'FAQ' page which has a list of questions at the top (links) and the answers appear below.

As each question is clicked the corresponding answer is shown (using show/hide divs). My questions is, is there a way to make the clicked question/link bold and for it to stay bold until another question is clicked, in which case the newly clicked question will be bold and the previously clicked question will go back to normal.

I have tried using a:active in the CSS but although this makes the text bold on clicking, as soon as you let go of the mouse it goes back to normal.

This is my CSS

    div#newboxes1, div#newboxes2, div#newboxes3
{
 border: 1px solid black;
 background-color: #CCCCCC;
 display: none;
 padding: 5px;
 width: 659px;
}

div#newboxes1 {
display:block;

}

ol#toc {
    height: 2em;
    list-style: none;
    margin: 0;
    padding: 0;
 border: none;
}

ol#toc li {
    float: left;
}

ol#toc li a img
{
 border: none;
}

ol#toc a {
    color: #676767;
    float: left;
    line-height: 2em;
    text-decoration: none;
}

ol#toc li.current {
    background-color: #e5e5e4;
    background-position: 0 -60px;
}

ol#toc li.current a {
    color: #676767;
}

ol#toc li.current a:hover {
    color: #fff;
    font-weight: bold;
}

div.content {
    background: #e6e5e4;
    padding: 20px;
 width: 669px;
 margin: 0px;
}

div.content a
{
 color: #000000;
 text-decoration: underline;
}

div.content a:active
{
 font-weight: bold;
}

div.content a:visited
{
 font-weight: bold;
}

This is my HTML

<ol id="toc"><li class="current"><a href="customer-service_delivery.html"><img src="delivery_0.jpg" alt="Delivery" /></a></li>
<li><a href="customer-service_returns.html"><img src="returns.jpg" /></a></li>
<li><a href="customer-service_contact.html"><img src="contact.jpg" /></a></li>
<li><a href="customer-service_shopping.html"><img src="shopping.jpg" /></a></li></ol>
<div class="content">
<p><a name="newboxes" href="javascript:showonlyone('newboxes1');" >Where is my order?    </a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes2');" >UK Standard Delivery</a></p>
<p><a name="newboxes" href="javascript:showonlyone('newboxes3');" >UK Next Day Delivery</a></p>
<div name="newboxes" id="newboxes1">
  <p>Where is my order answer</p>
  </div>
<div name="newboxes" id="newboxes2">
  <p>UK Standard Delivery answer</p>
  </div>

Javascript function is called when each link is clicked, this shows/hides the relevant divs which are currently on top of each other.

javascript is below (don't know if you need it!)

function showonlyone(thechosenone) {
  var newboxes = document.getElementsByTagName("div");
        for(var x=0; x<newboxes.length; x++) {
              name = newboxes[x].getAttribute("name");
              if (name == 'newboxes') {
                    if (newboxes[x].id == thechosenone) {
                    newboxes[x].style.display = 'block';
              }
              else {
                    newboxes[x].style.display = 'none';
              }
        }
  }

}

Thanks for your help :) Theresa

Answer 1

You have to add this style to your css file:

ol#toc li.current a:active {
    font-weight: bold;
}

Answer 2

Yes, just amend your Javascript to add or remove a class. Define that class as having text-weight bold or normal.

Answer 3

CSS selector :active will do it. Usage same as with :hover.

Answer 4

You can use something like this if you're able to use jQuery

var menu = new Array();
$('#your_ul').children().each(function() {
    menu.push($(this));
    $(this).click(function(e) {
        for (x = 0; x < menu.length; x++) {
            if ($(menu[x]).text() == $(this).text()) {
                $(menu[x]).css('font-weight','bold');
            } else {
                $(menu[x]).css('font-weight','normal');
            }
        }
    });
});

http://jsfiddle.net/CRnkS/

Answer 5

using jquery something like this may work. you can substitute ".css" for ".addClass('class')" and ".removeClass('class')" in the relevant places.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"&gt;&lt;/script&gt;
<script type="text/javascript">
$(document).ready(function()
{
    $('ol#foo li').click(function() {
        $('ol#foo li').css('font-weight','normal');                   
        $(this).css('font-weight','bold');
    });
});


// or:

$(document).ready(function()
{
    $('ol#foo li').click(function() {
        $('ol#foo li').removeClass('active');             
        $(this).addClass('active')
    });
});

 </script>

should note - where "active" is your css class to style the LI. and ol#foo is your OL.