如何使用CSS或Javascript隐藏和显示DIV

Question

Basic Information:

Web Address: http://roverplusnine.xyz/product/RPN-9999-94-FD/ (This is a Wordpress site using N-Media WooCommerce Personalized Product Meta Manager Plugin"

Goal: Turn "Click Here To Choose A Logo" into a toggle button to show and hide image options. I have tried several different codes & javascript suggestions but I haven't been able to get it to work.

Any help that can be offered is appreciated.

I have the following HTML & CSS Mark-up:

 .showimagesdiv{ cursor: pointer; background-color:#a3000c; width: 175px; text-align: center; padding: 11px; color: #fff; } #pre-uploaded-images-choose_logo label { } .pre_upload_image_box{ border: 1px solid; background: #333; text-align: center; margin-top: 15px; position: absolute; z-index: 999; right: 0; display:none; } .pre_upload_image_box .pre_upload_image{ width: 100px; overflow: hidden; float: left; text-align: center; background-color: #FFF; margin: 5px; position: relative; } 

 <div data-dataname="choose_logo" id="pre-uploaded-images-choose_logo" style="width: 99%; margin-right: 1%;"> <label for="choose_logo"> <div class="showimagesdiv">Click Here To Choose A Logo </div> </label> <br> <div class="pre_upload_image_box"> <div class="pre_upload_image"> <img src="http://roverplusnine.xyz/wp-content/uploads/2017/07/2AndABrew-150x150.jpg"> <div style="display:none" id="pre_uploaded_image_choose_logo-0"> <img style="margin: 0 auto;display: block;" src="http://roverplusnine.xyz/wp-content/uploads/2017/07/2AndABrew.jpg"></div> <div class="input_image"> <input data-price="" data-title="2 &amp; A Brew" data-type="image" name="choose_logo" value="{&quot;link&quot;:&quot;http:\\/\\/roverplusnine.xyz\\/wp-content\\/uploads\\/2017\\/07\\/2AndABrew.jpg&quot;,&quot;id&quot;:&quot;5111&quot;,&quot;title&quot;:&quot;2 &amp; A Brew&quot;,&quot;price&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;}" type="radio"><a href="#TB_inline?width=600&amp;height=450&amp;inlineId=pre_uploaded_image_choose_logo-0" class="thickbox" title="2 &amp; A Brew"> <img src="http://roverplusnine.xyz/wp-content/plugins/nm-woocommerce-personalized-product/images/zoom.png" width="15"></a> <div class="p_u_i_name">2 &amp; A Brew </div> </div> 

Answer 1

 .showimagesdiv{ cursor: pointer; background-color:#a3000c; width: 175px; text-align: center; padding: 11px; color: #fff; } #pre-uploaded-images-choose_logo label { } .pre_upload_image_box{ border: 1px solid; background: #333; text-align: center; margin-top: 15px; position: absolute; z-index: 999; right: 0; display:none; } .pre_upload_image_box .pre_upload_image{ width: 100px; overflow: hidden; float: left; text-align: center; background-color: #FFF; margin: 5px; position: relative; } 

 <div data-dataname="choose_logo" id="pre-uploaded-images-choose_logo" style="width: 99%; margin-right: 1%;"> <label for="choose_logo"> <script>var n=0;</script> <div class="showimagesdiv" onclick="n++;if(n==1){dd.style.display='block';}else{n=0;dd.style.display='none';}">Click Here To Choose A Logo </div> </label> <br> <div class="pre_upload_image_box" id="dd"> <div class="pre_upload_image"> <img src="http://roverplusnine.xyz/wp-content/uploads/2017/07/2AndABrew-150x150.jpg"> <div style="display:none" id="pre_uploaded_image_choose_logo-0"> <img style="margin: 0 auto;display: block;" src="http://roverplusnine.xyz/wp-content/uploads/2017/07/2AndABrew.jpg"></div> <div class="input_image"> <input data-price="" data-title="2 &amp; A Brew" data-type="image" name="choose_logo" value="{&quot;link&quot;:&quot;http:\\/\\/roverplusnine.xyz\\/wp-content\\/uploads\\/2017\\/07\\/2AndABrew.jpg&quot;,&quot;id&quot;:&quot;5111&quot;,&quot;title&quot;:&quot;2 &amp; A Brew&quot;,&quot;price&quot;:&quot;&quot;,&quot;url&quot;:&quot;&quot;}" type="radio"><a href="#TB_inline?width=600&amp;height=450&amp;inlineId=pre_uploaded_image_choose_logo-0" class="thickbox" title="2 &amp; A Brew"> <img src="http://roverplusnine.xyz/wp-content/plugins/nm-woocommerce-personalized-product/images/zoom.png" width="15"></a> <div class="p_u_i_name">2 &amp; A Brew </div> </div> 

Answer 2

I suggest you should use jquery for this.

And the javascript code will be like that

$(document).ready(function(){
       $('.showimagesdiv').on('click',function(){
           $('.pre_upload_image_box').toggle();
        });
});