0

I am using this code in the JavaScript to show/hide div. Now i wanna add transition in JavaScript, But can't seem to get it to work.

Div Code

<div class="checkout_other"> <a class="jmbag" href="javascript:void(0);" onclick="showCheckoutOther(this);"><span>+</span>Order Message</a>
    <div class="subbox_other">
        <div class="p-message-title">Leave a message for Admin:</div>
        <textarea name="postscript" cols="100" rows="2" id="postscript" class="message-text ui-textfield ui-textfield-system multiple no-hit" placeholder="Mention If Any Special Request / Instructions About Your Order">{$order.postscript|escape}</textarea>
        <p class="message-text-tip">Max. 1,000 English characters or numerals only. No HTML codes.</p>
    </div>
</div>

JavaScript Code

<script type="text/javascript">
{literal}
function showCheckoutOther(obj){
    var otherParent = obj.parentNode;
    otherParent.className = (otherParent.className=='checkout_other') ? 'checkout_other2' : 'checkout_other';
    var spanzi = obj.getElementsByTagName('span')[0];
    spanzi.innerHTML= spanzi.innerHTML == '+' ? '-' : '+';
}
{/literal}
  </script>

Is it possible to make some animation, like fadout, easeout instead of just showing it?

John Snow
  • 11
  • 6
  • You have tagged jquery but you not want to use http://api.jquery.com/animate/ and then you can look for CSS https://developer.mozilla.org/en/docs/Web/CSS/transition – Anil Apr 25 '17 at 10:17
  • this answer might help you http://stackoverflow.com/questions/6121203/how-to-do-fade-in-and-fade-out-with-javascript-and-css – Rajesh Karunakaran Apr 25 '17 at 10:31

0 Answers0