Title: Javascript Show/Hide in widget options
Last modified: August 19, 2016

---

# Javascript Show/Hide in widget options

 *  [pezholio](https://wordpress.org/support/users/pezholio/)
 * (@pezholio)
 * [16 years ago](https://wordpress.org/support/topic/javascript-showhide-in-widget-options/)
 * Hi,
 * I’m putting together a widget, and am struggling to show/hide elements when clicking
   on an radio button using jQuery. Here’s my code:
 *     ```
       <p><label for="postcode">Postcode</label> <input type="radio" name="type" onclick="jQuery('#postcodepanel').toggle()" value="postcode" /></p>
       <p><label for="postcode">Local Authority</label> <input type="radio" name="type" onclick="jQuery('#authoritypanel').toggle()" value="authority" /></p>
       <div id="postcodepanel" style="display:block;">
       Postcode panel stuff here
       </div>
       <div id="authoritypanel" style="display:block;">
       Authority panel stuff here
       </div>
       ```
   
 * I’ve tried using jQuery and vanilla Javascript and nothing seems to work. I’ve
   enabled Firebug and I don’t get any errors. If I change the onlick to do an alert()
   it works fine, so it’s not an issue with JS per se. Any ideas?

Viewing 8 replies - 1 through 8 (of 8 total)

 *  [Taylor Dewey](https://wordpress.org/support/users/taylorde/)
 * (@taylorde)
 * [16 years ago](https://wordpress.org/support/topic/javascript-showhide-in-widget-options/#post-1479310)
 * I’m not a jQuery expert, but from what I know jQuery should’t really be implemented
   within onClick.
 * Try moving your code outside of onClick into a `<script type="text/javascript"
   ></script>` block. For example:
 *     ```
       <script type="text/javascript">
       jQuery(document).ready(function($){
   
       $('#localauthorityradiobuttonid').click(function(){
          $('#authoritypanel').show();
         },function(){
          $('#authoritypanel').hide();
         });
       });
       </script>
       ```
   
 * Be sure to define an ID or class for your radio buttons in order to easily access
   them with jQuery.
 *  Thread Starter [pezholio](https://wordpress.org/support/users/pezholio/)
 * (@pezholio)
 * [16 years ago](https://wordpress.org/support/topic/javascript-showhide-in-widget-options/#post-1479376)
 * Yeah, admittedly I was being a bit lazy there doing an onclick! Just wanted to
   get it working first, and then tidy up later.
 * Doing it properly still doesn’t seem to work, even if I just try an alert and
   again, I don’t see any errors in Firebug??!
 *  Thread Starter [pezholio](https://wordpress.org/support/users/pezholio/)
 * (@pezholio)
 * [16 years ago](https://wordpress.org/support/topic/javascript-showhide-in-widget-options/#post-1479383)
 * On reflection, my problem looks very much related to this:
 * [http://wordpress.org/support/topic/289414?replies=1](http://wordpress.org/support/topic/289414?replies=1)
 * Although there are no replies – seems like it’s been an issue since 2.8. Anyone
   know whey the WP team would put this ‘feature’ in?
 *  [Taylor Dewey](https://wordpress.org/support/users/taylorde/)
 * (@taylorde)
 * [16 years ago](https://wordpress.org/support/topic/javascript-showhide-in-widget-options/#post-1479449)
 * I just threw this code up into my development blog (granted, it’s WP 3.0) without
   issue — I used this js code:
 *     ```
       <script type="text/javascript">
       jQuery(document).ready(function($){
   
       $('#postcodebutton').click(function(){
          $('#postcodepanel').toggle();
       	});
   
       $('#authoritycodebutton').click(function(){
          $('#postcodepanel').toggle();
       	});
   
       });
       </script>
       ```
   
    - Be sure jQuery is being loaded. You should be using `wp_enqueue_script('jquery');`
      and calling it before `wp_head();`. Check to make sure it’s loaded and not
      giving a 404 error using Firebug or similar tool.`
    - Be sure your code is wrapped in `jQuery(document).ready(function($){` to avoid
      conflicts and allow you to use the `$`
 *  Thread Starter [pezholio](https://wordpress.org/support/users/pezholio/)
 * (@pezholio)
 * [16 years ago](https://wordpress.org/support/topic/javascript-showhide-in-widget-options/#post-1479466)
 * Thanks, but that’s still not working for me. I probably didn’t make it clear 
   that this is in widget options in the backend, rather than on the main frontend
   of the site, so using `wp_enqueue_script('jquery')` before `wp_head` isn’t an
   option unfortunately. I’ve also set up an alert that runs onload, which actually
   runs twice, could that have something to do with it?
 * I’ve put my code in a Gist here to give you more of an idea of what I want to
   achieve:
 * [https://gist.github.com/896f11d7ca928681a253](https://gist.github.com/896f11d7ca928681a253)
 * Thanks a lot for your help so far 🙂
 *  [Taylor Dewey](https://wordpress.org/support/users/taylorde/)
 * (@taylorde)
 * [16 years ago](https://wordpress.org/support/topic/javascript-showhide-in-widget-options/#post-1479467)
 * Phew. Not sure why the jquery selectors we were using before didn’t work within
   the context of a widget, but here’s how I ended up getting it to work:
 *     ```
       <script type="text/javascript">
   
       	jQuery(document).ready(function($) {
   
       	$('input[id=postcodebutton]').click(function(){
       		alert('postcodebutton');
       	});
   
       	$('input[id=authoritybutton]').click(function(){
       		alert('authoritybutton');
       	});	
   
       	});
       	</script>
       ```
   
 * Note that I also ran this code within the <head> tags by `echo`ing it within 
   a function and hooking the function to admin_head.
    `add_action("admin_head","
   pa_script");`
 *  Thread Starter [pezholio](https://wordpress.org/support/users/pezholio/)
 * (@pezholio)
 * [16 years ago](https://wordpress.org/support/topic/javascript-showhide-in-widget-options/#post-1479471)
 * Ah, seems like I’ve nailed it. I changed the IDs to classes and, presto changeo,
   it worked! Thanks for the pointers!
 *  [Taylor Dewey](https://wordpress.org/support/users/taylorde/)
 * (@taylorde)
 * [16 years ago](https://wordpress.org/support/topic/javascript-showhide-in-widget-options/#post-1479504)
 * No problem, glad it was able to get figured out.

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Javascript Show/Hide in widget options’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [widgets](https://wordpress.org/support/topic-tag/widgets/)

 * 8 replies
 * 2 participants
 * Last reply from: [Taylor Dewey](https://wordpress.org/support/users/taylorde/)
 * Last activity: [16 years ago](https://wordpress.org/support/topic/javascript-showhide-in-widget-options/#post-1479504)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics