hide/show selected form with jQuery and 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" 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>
…


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

My CSS Code :

.joinForm { width: 55%; position: relative; height: 396px;}

#noneForm {
    background: url("../img/ccard-none.jpg") no-repeat scroll 0 0 #FFF;
    height:396px;
    width:616px;
    position: absolute;
    top: 0;
    display: block;
}

#mastercardForm {
    background: url("../img/mastercard-form.jpg") no-repeat scroll 0 0 #FFF;
    height:396px;
    width:616px;
    position: absolute;
    top: 0;
    display: none;
}

#visaForm {
    background: url("../img/visa-form.jpg") no-repeat scroll 0 0 #FFF;
    height:396px;
    width:616px;
    position: absolute;
    top: 0;
    display: none;
}

#discoverForm {
    background: url("../img/discover-form.jpg") no-repeat scroll 0 0 #FFF;
    height:396px;
    width:616px;
    position: absolute;
    top: 0;
    display: none;
}

And jQuery code (by @8y5 )

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

        e.preventDefault();

    var $this = $(this);
    var i = 0;

    // 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 1

Try with this

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

        e.preventDefault();

    var $this = $(this);
    var i = 0;

    // 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().siblings().hide();

}); 

Fiddle

OR

$('#joinChoice a').click(function (e) {
    e.preventDefault();
    var $this = $(this);
    $(this).addClass('on').siblings().removeClass('on')
    $('#'+$this.data('form-id')).show().siblings().hide();

}); 

Fiddle

Answer 2

I would personally prefer to make something like this

<p id="joinChoice" class="parent">
    <a href="" id="mastercardChoice" onclick="openForm('mastercardForm')"><span class="overlay"></span></a>
    <a href="" id="visaChoice" onclick="openForm('visaForm')"><span class="overlay"></span></a>
    <a href="" id="discoverChoice" onclick="openForm('discoverForm')"><span class="overlay"></span></a>
</p>

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

JQUERY

function openForm(formname) {
  $('.joinForm').hide();
  $('#'+formname).show();
}

I hope it will help you achieve your aims!