CODEWITHSUNDEEP
jquery
Mac Taylor
Mac Taylor

Reputation: 5148

manipulation with radio input in jquery

hey guys i made a form with jquery and the only problem is in slideToggle function

jquery

   $(".ChoosePayMethod").click(function(){
        var ID = $(this).attr("id");
    if ($('input[name=ChoosePayMethod]:checked')) {
        $("#PayMethod_"+ID).slideToggle("slow");

    }

html

<label><input type="radio" name="ChoosePayMethod" value="epay" id="epay" class="ChoosePayMethod"/>پرداخت آنلاین  توسط درگاه های اینترنتی </label><br />    
<label><input type="radio" name="ChoosePayMethod" value="bpay" id="bpay" class="ChoosePayMethod" />پرداخت به روش ارسال شماره فیش بانکی </label><br />
<label><input type="radio" name="ChoosePayMethod" value="cpay" id="cpay" class="ChoosePayMethod" />پرداخت به روش کارت به کارت و ثبت رسید</label><br />


    <div id="PayMethod_bpay" class="hidden" > soon </div>
    <div id="PayMethod_cpay" class="hidden" > soon </div>
    <div id="PayMethod_epay" class="hidden" > soon </div>

it slidetoggle when i click on radio box but question is how to close other opened div boxes ?

i need this as i click on one radio input i have one opened div

Upvotes: 2

Views: 785

Answers (3)

John Hartsock
John Hartsock

Reputation: 86882

   $(".ChoosePayMethod").click(function(){
     $("div[id*='PayMethod_']:visible").slideToggle("slow");
       var ID = $(this).attr("id");
       if (this.checked) {
         $("#PayMethod_"+ID).slideToggle("slow");
       }
   });

Upvotes: 1

Jim Mitchener
Jim Mitchener

Reputation: 9003

Add a class to the divs such as pay-method-details and do

$('.pay-method-details').each(function() {
    $(this).hide();
});

Before you show the new one. You could also track the currently selected one and then close it by itself.

Upvotes: 0

BeemerGuy
BeemerGuy

Reputation: 8269

You should call slideDown() on the selected div, and slideUp() on the other two.

Upvotes: 0

Related Questions