After trying multiple approaches, I'm still struggling to figure out how to toggle the class of a span from "die2" to "die3" and simultaneously toggle the display style of a div from 'block' to 'none'. Any suggestions or solutions? Essentially, when the page loads, an ad will be displayed. When you click the red x (die2), the ad should disappear and the red x should change to a green check box (die3). Here's the code snippet that successfully implements the div toggle:
<div id="mydiv" style="display:block">
<img src='http://www.test.com/mypopad.png' alt='' />
</div>
<a href="javascript:;" onmousedown="if(document.getElementById('mydiv').style.display == 'block'){ document.getElementById('mydiv').style.display = 'none'; }else{ document.getElementById('mydiv').style.display = 'block'; }"><span id="myspan" class="die2"><!-- --></span></a>With gratitude to JKing's response and another class added to the stylesheet, I managed to solve the issue. Initially, the divHide class did not function as expected, so I introduced divShow and utilized similar logic for the span toggling. Thank you all!
<div id="mydiv" class="divShow">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="javascript:;" onmousedown="document.getElementById('mydiv').classList.toggle('divHide');document.getElementById('mydiv').classList.toggle('divShow');document.getElementById('myspan').classList.toggle('die2');document.getElementById('myspan').classList.toggle('die3');">
<span id="myspan" class="die2"><!-- --></span>
</a>To address compatibility issues with Internet Explorer, I integrated Sven's script and resolved the problem by correcting the selector reference for #mydiv...
<script type="text/javascript">
$("document").ready(function(){
$("#myspan").click(function(){
$(this).toggleClass("die2").toggleClass("die3");
$("#mydiv").toggle();
});
});
</script>
<div id="mydiv" class="">
<img src='http://www.northpointemobilehomesales.com/wp-content/gallery/support-images/big-daves-sidebar-ad_03.png' alt='' />
</div>
<a href="#">
<span id="myspan" class="die2"><!-- --></span>
</a>I will test this solution further to ensure it meets my requirements. Thanks for your help! :)