Three buttons(span's), jQuery IF clicked, addClass - removeClass

Question

I have three buttons (spans) that looks like this:

<span id="size_default"><?php echo JText::_('VIDEO_DEFAULT');?></span>
<span id="size_450"><?php echo JText::_('VIDEO_450');?></span>
<span id="size_600"><?php echo JText::_('VIDEO_600');?></span>

These are supposed to work like buttons, and they work now, but not correctly, what I need is, when for example "size_600" is cliked, 2 actions must occur ->

<span id="size_600">

must get a "active" class + remove the "active" class on other 2 spans if they were clicked before AND then add a class to OTHER div and remove other classes that are related to the other 2 spans...

The description I made may look confusing, but here is the jQuery code I wrote, this should be more clear:

        $('size_default').addEvent('click',function(){
        $('size_default').addClass('active');
            $('youtube-player').addClass('h_355');
            $('size_450').removeClass('active');
            $('size_600').removeClass('active');
            $('youtube-player').removeClass('h_450');
            $('youtube-player').removeClass('h_600');
        });
        $('size_450').addEvent('click',function(){
        $('size_450').addClass('active');
            $('youtube-player').addClass('h_450');
            $('size_355').removeClass('active');
            $('size_600').removeClass('active');
            $('youtube-player').removeClass('h_355');
            $('youtube-player').removeClass('h_600');
        });
        $('size_600').addEvent('click',function(){
        $('size_600').addClass('active');
            $('youtube-player').addClass('h_600');
            $('size_355').removeClass('active');
            $('size_450').removeClass('active');
            $('youtube-player').removeClass('h_355');
            $('youtube-player').removeClass('h_450');
        });

Currently it "does" it's work when you click ONE time for each 3 spans(buttons), but after that only the first block of jQuery code works (size_default)...

Can somebody give me a hand on this please.. I'm not to good in jQuery...

Thank you

Answer 1

In your post the id="youtube-player" is missing.

If you are using Mootools and jQuery can be more safe to avoid Mootools $.

So try this:

var all_spans = document.getElements('span#size_default,span#size_450,span#size_600');
document.id('size_default').addEvent('click', function () {
    all_spans.removeClass('active');
    this.addClass('active');
    document.id('youtube-player').removeClass('h_450').removeClass('h_600').addClass('h_355');
});
document.id('size_450').addEvent('click', function () {
    all_spans.removeClass('active');
    this.addClass('active');
    document.id('youtube-player').removeClass('h_355').removeClass('h_600').addClass('h_450');
});
document.id('size_600').addEvent('click', function () {
    all_spans.removeClass('active');
    this.addClass('active');
    document.id('youtube-player').removeClass('h_355').removeClass('h_450').addClass('h_600');
});

You can check the console in this FIDDLE