jQuery tabs hide/show panels plus tab background change

Question

I tried everything I know (not much as I am new with javascript/jquery).

I have two buttons A and B. Each button when clicked shows/hides (toggles) A respective B content. Only one button can have a pressed state at a time and it's content displayed, so if B button and it's content are active if I click A, A button goes to pressed state, A content shows, the B button goes to unpressed state and the B content hides. By "pressed state" I mean a different background color. Also if only A button is pressed and it's content visible, if I press it again, A button goes to unpressed and it's content hides, same for B.

The code bellow it's a mess I think, I really tried everything but js and jquery are not my thing..

Can anybody tell me how to make this work? Thank you so much!..

$(function() {
                $('#login').click(function() {
                    $('.login').slideToggle('slow');
                    $('#login').toggleClass('btn_on');
                    $("#register:visible").toggleClass("btn_off");
                    $('.register:visible').slideToggle('slow');

                    return false;
                });

                $('#register').click(function() {
                    $('.register').slideToggle('slow');
                    $('#register').toggleClass('btn_on');
                    $("#login:visible").toggleClass("btn_off");
                    $('.login:visible').slideToggle('slow');
                    return false;
                });

            });

Answer 1

Try this: jsfiddle

CSS:

.press
{
background-color:green;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
#input_text
{
background-color:black;
color:white;
font-weight:bold;
width:300px;
height:100px;
}

HTML:

<input type='button' id='but_a' class='normal' value='button A' />
<input type='button' id='but_b' class='normal' value='button B' />

<br />
<br />
<div id='input_text'></div>

Jquery:

$('#input_text').hide()

var textim = new Array();
    textim['but_a'] = 'button A text is now displayed';
    textim['but_b'] = 'button B text is now displayed';

$('.normal').click(function() {
    if($(this).hasClass('press'))
    {
        $(this).removeClass('press');
        $('#input_text').slideUp('slow', function(){  $('#input_text').empty(); });
    }
    else
    {
        $('.normal').removeClass('press');
        $(this).addClass('press');
            var idd = $(this).attr('id');
            $('#input_text').empty();
            $('#input_text').slideDown('slow', function() {  $('#input_text').text(textim[idd]); } );

    }
});

Have fun...

Edit:

note that - the array (textim) key's should be set to the same id of the button you want to trigger.