CODEWITHSUNDEEP
jqueryshow-hide
Kamal
Kamal

Reputation: 2180

show() hide() elements using jQuery

I want to use show() and hide() in jQuery. I have developed something which you can see on:

Fiddle: http://jsfiddle.net/xMk2S/

The confusion part of my code is when I click on Click to Apply coupon code then a input will appear with text Apply ! when i click on Apply ! then Apply ! will go and on the place of it X will come when click on this it will take you on the first stage where Click to Apply coupon code only will show now confusion is when I again click on it then input will come but Apply ! will not come.

Basically I want it run this again and again. Please check my code.

Upvotes: 0

Views: 123

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

On click of the applyCoupn button the container span is hidden instead of the applyCoupn element, but in the addCoupon button click you are displaying the applyCoupn element

Try

$('.addCoupon').click(function(){
    $(this).parent('span').siblings('div.coupon').fadeIn(500);
    $(this).hide();

    $(this).parent('span').siblings('div.coupon').find('.applyCoupn').show();
    $(this).parent('span').siblings('div.coupon').find('.cancelCoupn').hide();      
})

$('.applyCoupn').click(function(){
    $(this).hide();
    $(this).parent('span').next('span').find('.cancelCoupn').show();
})

$('.cancelCoupn').click(function(){         
    $(this).parent('span').parent('div.coupon').slideUp(300);
    $(this).hide();
    $(this).parent('span').parent('div.coupon').siblings('span').children('.addCoupon').show();     
})

Demo: Fiddle

A better solution will be

<div class="coupon">
    <input type="text" name=" " />
    <span class="small applyCoupn"><a href="#">Apply !</a></span> 
    <span class="small cancelCoupn"><a href="#">X</a></span>
</div>
<span class="small addCoupon"><a href="#">Click to Apply coupon code</a></span>

then

$('.addCoupon').click(function(){
    var $this = $(this), $coupon = $this.siblings('div.coupon');

    $coupon.fadeIn(500);
    $this.hide();

    $coupon.find('.applyCoupn').show();
    $coupon.find('.cancelCoupn').hide();        
})

$('.applyCoupn').click(function(){
    var $this = $(this)

    $this.hide();
    $this.next('span.cancelCoupn').show();
})

$('.cancelCoupn').click(function(){
    var $this = $(this), $coupon = $this.closest('div.coupon');
    $coupon.slideUp(300);
    $this.hide();
    $coupon.siblings('span.addCoupon').show();      
})

Demo: Fiddle

Upvotes: 1

thepratt
thepratt

Reputation: 323

Your "Click to Apply coupon code" should create a new element and append to the beginning of the div where they are located. There should be a new id every time so when you POST you don't receive wrong values. You can append new to the beginning by doing:

var newBox = '';
var _init = jQuery('#div').html;
jQuery('#div').html(newBox + _init);

Upvotes: 0

Related Questions