0

Hi so a i am trying to buttons and each button deals with the visibility of two side bars. Clicking on Color button will open Color Bar and clicking the theme button will open the Theme Bar. I am doing this by creating two Jquery click functions and adding Classes.

HTML Part of two buttons

    <table width="100%" border="0">
        <tr>
            <td class="colorClicked" id="color">Color</td>
            <td class="themeOff" id="theme">Theme</td> 
        </tr>
    </table>

This is my CSS for Buttons and Bars

    .colorClicked {
    width:50%;
    border-top: 1px solid #818181;
    border-right: 1px solid #818181;
    border-left: 1px solid #818181;
    border-bottom: 0px solid #818181;
    height: 3em;
    text-align: center;
    font-size: 2em;
    font-family: 'Wire One', Gadget, sans-serif;
    cursor:pointer;
    }

.colorOff {
    width:50%;
    border-bottom: 1px solid #818181;
    border-top: 0px solid #818181;
    border-right: 0px solid #818181; 
    border-left: 0px solid #818181;
    height: 3em;
    text-align: center;
    font-size: 2em;
    font-family: 'Wire One', Gadget, sans-serif;
    cursor:pointer;
    }

.themeClicked {
    width:50%;
    border-top: 1px solid #818181;
    border-right: 1px solid #818181;
    border-left: 1px solid #818181;
    border-bottom: 0px solid #818181;
    height: 3em;
    text-align: center;
    font-size: 2em;
    font-family: 'Wire One', Gadget, sans-serif;
    cursor:pointer;
    }   

.themeOff {
    width:50%;
    border-top: 0px solid #818181;
    border-right: 0px solid #818181;
    border-left: 0px solid #818181;
    border-bottom: 1px solid #818181;
    height: 3em;
    text-align: center;
    font-size: 2em;
    font-family: 'Wire One', Gadget, sans-serif;
    cursor:pointer;
    }

CSS for Bars

.colorTabOn {
    visibility:visible;
    }

.colorTabHidden {
    position:absolute;
    width: 100%;
    visibility:hidden;
    }

.themeTabOn {
    position:relative;
    width: 100%;
    visibility:visible;
    }   

.themeTabHidden {
    top: -31.5em;
    position:relative;
    width: 100%;
    visibility:hidden;
    }

Jquery

    $('#theme').click(function(){
        $('#colorTab').addClass('colorTabHidden', 500);
        $('#themeTab').addClass('themeTabOn', 500);
        $('#theme').addClass('themeClicked', 500);
        $('#color').addClass('colorOff', 500);
});

$('#color').click(function(){
        $('#colorTab').addClass('colorTabOn', 500);
        $('#themeTab').addClass('themeTabHidden', 500);
        $(this).addClass('colorClicked', 500);
        $('#theme').addClass('themeOff', 500);  
});

However once i click the #theme button nothing happens to the visibility of the bar. New class is only applied to button and after clicking the #Color button again NOTHING HAPPENS AT ALL.

Help me maybe i am a beginner in Jquery. Thank You

4

1 Answer 1

1

Well, try this:

$('#theme').click(function(){
    $('#colorTab').addClass('colorTabHidden').removeClass('colorTabOn');
    $('#themeTab').addClass('themeTabOn').removeClass('themeTabHidden');
    $('#theme').addClass('themeClicked');
    $('#color').addClass('colorOff');
});

$('#color').click(function(){
    $('#colorTab').addClass('colorTabOn').removeClass('colorTabHidden');
    $('#themeTab').addClass('themeTabHidden').removeClass('themeTabOn');
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.