I have been trying to mimic this website for a while now.

I need to make a page where the customer can click "View 360" and then it changes the DIV to show the product 360 (for which I already have the code for).

I also need to make it so that when it is clicked the span text then changes to "Back to Image"

I have tried many times and have failed to get the Javascript code and HTML to work well together. My efforts can be seen here:

As you can see it is a plete fail as it doesn't change the DIV it just displays a new one. Also when you click the button it then changes to text instead of a new button.

My current code is here:

<div id="product_images">
    <div id="product_image_preview_holder" class="clearfix">

<script language="javascript"> 
function toggle() {
   var ele = document.getElementById("toggleText");
   var text = document.getElementById("displayText");
   if(ele.style.display == "block") {
      ele.style.display = "none";
      text.innerHTML = "hello";
   }
   else {
      ele.style.display = "block";
      text.innerHTML = "hide";
   }
} 
</script>

         <a id="displayText" href="javascript:toggle();" class="s_button_1 s_main_color_bgr" style="<?php if ($tbData->is_mobile == '0'): ?>position: relative;<?php else: ?>position: absolute;<?php endif; ?> z-index:99999;">
         <span class="s_text s_icon_24"><span class="s_icon"></span> View 360</span></a>
         <div id="toggleText" style="display: none; position: relative; z-index:99998;" ><?php if ($tags): ?><link rel="stylesheet" type="text/css" href="magic360/magic360/magic360.css" /><script type="text/javascript"  src="magic360/magic360/magic360.js"></script><?php foreach ($tags as $tag): ?><center><a class="Magic360" href="#" onclick="return false;" rel="columns:15; filename:<?php echo $tag['tag']; ?>-{col}.jpg;" id="bar"><img src="magic360/images/apple/<?php echo $tag['tag']; ?>-01.jpg"/ ></a></center><?php endforeach; ?><?php else: ?><?php endif; ?>               
         </div>
    </div>
</div>

Although I feel that the above code is rather messy because I have been fiddling with it a bit to try and get it to work?!

I have been trying to mimic this website http://www.designrattan.co.uk/daybed/apple for a while now.

I need to make a page where the customer can click "View 360" and then it changes the DIV to show the product 360 (for which I already have the code for).

I also need to make it so that when it is clicked the span text then changes to "Back to Image"

I have tried many times and have failed to get the Javascript code and HTML to work well together. My efforts can be seen here: http://designliving.tk/winchester-rattan-garden-round-table-set

As you can see it is a plete fail as it doesn't change the DIV it just displays a new one. Also when you click the button it then changes to text instead of a new button.

My current code is here:

<div id="product_images">
    <div id="product_image_preview_holder" class="clearfix">

<script language="javascript"> 
function toggle() {
   var ele = document.getElementById("toggleText");
   var text = document.getElementById("displayText");
   if(ele.style.display == "block") {
      ele.style.display = "none";
      text.innerHTML = "hello";
   }
   else {
      ele.style.display = "block";
      text.innerHTML = "hide";
   }
} 
</script>

         <a id="displayText" href="javascript:toggle();" class="s_button_1 s_main_color_bgr" style="<?php if ($tbData->is_mobile == '0'): ?>position: relative;<?php else: ?>position: absolute;<?php endif; ?> z-index:99999;">
         <span class="s_text s_icon_24"><span class="s_icon"></span> View 360</span></a>
         <div id="toggleText" style="display: none; position: relative; z-index:99998;" ><?php if ($tags): ?><link rel="stylesheet" type="text/css" href="magic360/magic360/magic360.css" /><script type="text/javascript"  src="magic360/magic360/magic360.js"></script><?php foreach ($tags as $tag): ?><center><a class="Magic360" href="#" onclick="return false;" rel="columns:15; filename:<?php echo $tag['tag']; ?>-{col}.jpg;" id="bar"><img src="magic360/images/apple/<?php echo $tag['tag']; ?>-01.jpg"/ ></a></center><?php endforeach; ?><?php else: ?><?php endif; ?>               
         </div>
    </div>
</div>

Although I feel that the above code is rather messy because I have been fiddling with it a bit to try and get it to work?!

• javascript
• html
• css

• 1 could you post your js script plz? – M Abbas Commented Jul 10, 2012 at 15:16

1 Answer 1

You could do it with jQuery pretty easily:

$('#toggleDiv').toggle(function() {
    $('#img360').hide();
    $('#imgNormal').show();
    $(this).html('View 360');
}, function() {
    $('#img360').show();
    $('#imgNormal').hide();
    $(this).html('Hide');
});​

JSFiddle
http://jsfiddle/LDVun/