JQuery button each click, show/hide forms

Question

Guess I'm just starting out here, so might as well look for any kind of help since I'm quite frustrated with this novice question...

I have a button that shows a form I created, with 1 click, but the problem comes when I want to show another form that comes with another button.

What I want, basically is that buttonA shows formA , but when I click buttonB , I want to hide formA and show formB . Now what's happening is that it's overlaying formA and formB .

Here's my current code..

function runEffect() {
  $( "#effect" ).show( "drop");
};

function runEffect2() {
  $( "#effect2" ).show( "drop");
};


//callback function to bring a hidden box back
function hideEffect() {
    $( "#effect:visible" ).hide( "drop");

};

// set effect from select menu value

$( "#button" ).each(function(index) {
  $(this).click(function(){
  runEffect();
    });
});

$( "#button2" ).each(function(index) {
  $(this).click(function(){
  runEffect2();
    });
});

$( "#effect" ).hide();
$( "#effect2" ).hide();

I know this is easy, but I can't seem to find the answer to it.

Thanks!

Answer 1

try this

function runEffect() {
  $( "#effect" ).show( "drop");
  $( "#effect2" ).hide( "drop");
};

function runEffect2() {
 $( "#effect2" ).show( "drop");
 $( "#effect" ).hide( "drop");
};

Answer 2

$('#buttonB').click(funciton()(
$('#formA').hide();
$('#formB').show();
});

something like this?

Answer 3

I haven't tested it, but maybe you want to a more dynamic function. Button class must be something like "formButton" and the id like "form1Button", the form id then should be "form1" and so on..

(Form 2 would have a button with class "formButton", id like "form2Button" and form 2 needs id "form2"

$(".formButton").click(function(e) {
    e.preventDefault(); //prevent default action

    var id = $(this).attr('id');
    var formId = id.replace('Button', '');

    $('#' + formId).show(); 
    $('form').not(document.getElementById(formId)).hide();

});

When a formButton is clicked, the form will be shown. All other forms, wich do not have the requested ID, will be hidden.