Display hidden Div on "Add to cart" button click.

**deltacreative** · 17 Nov 2008, 06:34 PM

Hi Everyone, hopefully one of you can help me with this small issue as I cannot find exact details anywhere on the forum.

I am trying to add an animated .gif (repeating loading image) inside an initially hidden div below the "Add to cart" button. I would then require the div to load once the user clicks on the "add to cart" button.

The reason for adding this feature is so when a user chooses to upload a file with their order, instead of them thinking the browser has crashed whilst the file is uploading, a loading image will appear and will ensure they don't quit.

I have already successfully added the div to the "tpl_product_info_display.php" file below the add to cart section.

Can anyone tell me what code I need to add to hide the div initially, and have it appear when the "Add to cart" button is clicked.

Many thanks in advance!

**stepterr** · 9 Apr 2009, 03:40 AM

Originally Posted by deltacreative

Hi Everyone, hopefully one of you can help me with this small issue as I cannot find exact details anywhere on the forum.

I am trying to add an animated .gif (repeating loading image) inside an initially hidden div below the "Add to cart" button. I would then require the div to load once the user clicks on the "add to cart" button.

The reason for adding this feature is so when a user chooses to upload a file with their order, instead of them thinking the browser has crashed whilst the file is uploading, a loading image will appear and will ensure they don't quit.

I have already successfully added the div to the "tpl_product_info_display.php" file below the add to cart section.

Can anyone tell me what code I need to add to hide the div initially, and have it appear when the "Add to cart" button is clicked.

Many thanks in advance!

Deltacreative,
You may have already found your answer to this. I stumbled on your post while I was looking for something else and thought I'd give you an example that you could apply to your situation in case you are still looking for a solution. Hope this helps you or someone else that is looking for it.

HTML Code:

<script type="text/javascript">
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}

</script>
<style type="text/css">
div.hidden {
display: none;
}
div.promptshow {
background: #bbb;
display: block;
}
</style>
</head>
<body>
<div>
<a href="#" onclick="change('hiddendiv1', 'promptshow');">Display div 1</a>
<a href="#" onclick="change('hiddendiv2', 'hidden');">hide div 2</a>

<div class="hidden" id="hiddendiv1">hide this div</div>
<div id="hiddendiv2">previously hiding div</div>

</div>