Show/hide selected form with jQuery/CSS

Question

i try to make an jQuery function for hide/show a form based on the user's choice!

Here is my code that you will understand better.

…               
<p id="joinChoice" class="parent">
    <a href="" id="mastercardChoice"><span class="overlay"></span></a>
    <a href="" id="visaChoice"><span class="overlay"></span></a>
    <a href="" id="discoverChoice"><span class="overlay"></span></a>
</p>
…


    <div class="joinForm">
        <div id="noneForm"></div>
        <div id="mastercardForm"></div>
        <div id="visaForm"></div>
        <div id="discoverForm"></div>
    </div>

The span#overlay in is a simple checkbox image replacement !

I just need a function for hide/view each form for selected Card type !

For the #joinChoice i've already make this :

    $('#joinChoice a').click(function(){
    $(this).addClass('on')
        .siblings().removeClass('on');
  });

Could you help me more please

Answer 1

Update

I was missing an important line:

e.preventDefault();

That prevents the page to reload when clicking on the <a>s.

The HTML:

<p id="joinChoice" class="parent">
    <a href="" id="mastercardChoice" data-form-id="mastercardForm"><span class="overlay"></span></a>
    <a href="" id="visaChoice" data-form-id="visaForm"><span class="overlay"></span></a>
    <a href="" id="discoverChoice" data-form-id="discoverForm"><span class="overlay"></span></a>
</p>

The Javascript:

$('#joinChoice a').click(function (e) {

    // prevents the click event to propagate up the DOM tree
    // And thus, prevents the page to reload, in that case..
    e.preventDefault();

    var $this = $(e.target);

    // Reset others
    var $links = $this.siblings();
    $links.removeClass('on');
    $links.each(function(linkEl) {
      $( '#'+$(linkEl).data('form-id') ).hide();
    });

    // Activate user choice..
    $this.addClass('on')
    $('#'+$this.data('form-id')).show();

});

Answer 2

Something like this?

HTML

<p id="joinChoice" class="parent">
    <a href="javascript:void(0)" id="mastercard"><span class="overlay">Mastercard</span></a>
    <a href="javascript:void(0)" id="visa"><span class="overlay">Visa</span></a>
    <a href="javascript:void(0)" id="discover"><span class="overlay">Discover</span></a>
</p>

<div class="joinForm">
    <div id="noneForm">noneForm</div>
    <div id="mastercardForm">mastercardForm</div>
    <div id="visaForm">visaForm</div>
    <div id="discoverForm">discoverForm</div>
</div>

CSS

.joinForm div {
    display: none;
}
.on {
    color: red;
    background: yellow;
}

jQuery

$('#joinChoice a').click(function(){
    $('#joinChoice a').removeClass('on'); /* remove class from all siblings */
    $(this).addClass('on'); /* add class to active sibling */

    $('.joinForm div').hide(); /* hide all other forms */
    var subElement = '#' + $(this).attr("id") + 'Form';
    $( subElement ).show(); /* show active form */
});

And a demo