Mootools의 HTML과 CSS의 maniplation 도움

Question

내가 링크를 클릭에 나는 display:none가 display:block가 될

<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을 만들고 싶어 다음 HTML을 원했다

도움이 될 것입니다.

Answer 1

이렇게하면 dom에있는 요소를 숨기고 링크를 클릭 할 때이를 볼 수있게해야합니다.

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'); 
    }); 

});