Change div to class active only when needed

Question

I am trying to get each title/block bar of my little carousel controls to change to blue when 'active' and showing its content. Right now they will keep switching between blue and black when clicked, this is pretty much just be testing things out but overall is there anyone which may be able to amend my javascript to control the active/non active state of each button to do this.

I've left a live url to have a look so you can see and some code:

Live URL: http://bit.ly/1bijza0 (Homepage, next to the large image.)

HTML

<ul id="index-controls">
    <li><div id="1" class="active">FREE DISC Profile</div>
        <ul>
            <li><h2>Training that fits like a glove</h2></li>
            <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
        </ul>
    </li>
    <li><div id="2">Last Minute Availability</div>
        <ul>
            <li><h2>Training that fits like a glove</h2></li>
            <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
        </ul>
    </li>
    <li><div id="3">Bespoke Training</div>
        <ul>
            <li><h2>Training that fits like a glove</h2></li>
            <li><p>Your company is as individual as the people it employs; and as such, it’s likely that your training requirements don’t tick any one, particular box. You may currently have a personnel issue that requires urgent attention. Or, you are taking a serious look at the management strategies you use to run your organisation and are considering an overhaul.</p></li>
        </ul>
    </li>
</ul>

JavaScript

jQuery('#1').click(function () {
    jQuery(this).toggleClass('active');
});
jQuery('#2').click(function () {
    jQuery(this).toggleClass('active');
});
jQuery('#3').click(function () {
    jQuery(this).toggleClass('active');
});

CSS

#index-controls div { display: block; background-color: #222424; font-weight: bold; margin: 0px; cursor: pointer; padding: 19px 20px 20px 20px; border-bottom: 1px solid #4e92ad; color: #fff; font-size: 1.1em; }
#index-controls .active { background-color: #4e92ad; }
#index-controls ul { padding-left: 0; margin-top: 0; }
#index-controls ul{ display: none; background-color: transparent; padding: 10px 10px 0px 10px; }
#index-controls ul li { list-style-type: none; background-color: transparent; width: 240px; color: #fff; font-size: 12px; }

Answer 1

Firstly, don't use a number for your id, and don't use a number as the first letter of an id.

Secondly, don't use id's for the jquery part of this.

Give all those divs the same class, such as class="same-class"

like this:

<div id="one" class="active same-class">FREE DISC Profile</div>

<div id="two" class="same-class">Last Minute Availability</div>

<div id="three" class="same-class">Bespoke Training</div>

And then for your jquery do this.

jQuery('.same-class').click(function(){
  jQuery('.same-class').removeClass('active');
  jQuery(this).addClass('active');
});

So whenever you click on an element that has class="same-class" , it will remove any active class from any of the elements with same-class, but then it will add the class active to the one you clicked on.

So this will work for all three of those div's, as well as if you added a thousand more divs with that same class.

EDIT : Here's a demo http://jsfiddle.net/az4c3/

Answer 2

As a quick fix you could just do that:

jQuery('#1,#2,#3').click(function(){
  jQuery('#1,#2,#3').removeClass('active');
  jQuery(this).addClass('active');
});

Keep in mind, that this is no flexible solution and you want to keep your code reusable. So in the long run you want to work with classes rather than id's to keep your code flexible. There is also one unnecessary "search-query" in the above code. A refactored, much nice approach would be something like:

var $clickables = $('.clickable');
$clickables.click(function(){
  $clickables.removeClass('active');
  jQuery(this).addClass('active');
});

This will make your code scale with the number of .clickable elements you add, if you once want to extend your accordion to a 4th or 5th element.

Answer 3

Something like this should do the trick for you:

jQuery("#input-controls div").click(function() {
    jQuery("#input-controls div.active").add(this).toggleClass("active");
});

Answer 4

Here's a JSFiddle that is very flexible:

http://jsfiddle.net/8VxLw/1/

var list = jQuery('#index-controls li div');
list.click(function() {
    list.removeClass('active');
    jQuery(this).addClass('active');
});