MooTools HTML и CSS maniplation помощь

Question

я следующий HTML

<div class="goto_step3"> 
<a href="<?= $this->sitePfx ?>/cart/paypal/" id="js_checkout_now" class="arrow">Checkout &amp; Pay</a> 
<? if($this->discountCodeErrorMessage): ?> 
    <p class="error discountError"><?= $this->discountCodeErrorMessage ?></p> 
<? endif; ?> 
<div class="discountCode fncFixedHeight <?= $this->has_discount ? 'redeemed': ''; ?>"> 
<? if(!$this->has_discount): ?> 
    <label for="inptdiscountcode">Enter discount code</label> 
    <input class='fncInpDiscountCode' id="inptdiscountcode" type="text" name="discount_code" value="" /> 
<? else: ?> 
    <? if(!(empty($this->discount['discount_message']))): ?> 
    <?= $this->discount['discount_message']; ?> 
    <? else: ?> 
    Voucher code redeemed 
    <? endif; ?> 
<? endif; ?> 

На DomReady я хочу MooTools сделать .discountCodedisplay:none, а также .goto_step3 pdisplay:none, по нажатию на ссылку, я хочу, чтобы display:none стать display:block

Любая помощь будет замечательной

Answer 1

Это должно скрыть элементы на dom ready и сделать их видимыми при щелчке ссылки.

window.addEvent('domready', function() { 

    // you can pass multiple selectors to $$ each separated with a comma 
    $$('.discountCode, .goto_step3 p').setStyle('display', 'none'); 

    $$('.goto_step3 a').addEvent('click', function() { 
     $$('.discountCode, .goto_step3 p').setStyle('display', 'block'); 
    }); 

});