I'm trying to create a checkbox option for one of my widgets in Wordpress, so that when it is checked, it will display/reveal some content (two labels with two input fields below each).
The idea on how it should reveal the content is like this:http://jsfiddle.net/GhZDP/functions.php:\[code\]// Create the Logo widgetclass logo_widget extends WP_Widget { public function __construct() { parent::__construct( 'logo_widget', // Base ID 'Logo', // Name array( 'description' => __( 'Display your logo' )) // Args ); } // Front-end display of the widget public function widget($args, $instance) { extract( $args ); $checkbox = $instance['checkbox']; $select = $instance['select']; echo $before_widget; if ( ! empty( $title ) ) echo $before_title . $title . $after_title; // If the checkbox is checked - use the site title and tagline instead. if ( $checkbox == true && $select == 'Left' ) { ?><a href=http://stackoverflow.com/questions/15637431/<?php echo home_url() ?> style="text-align: left;"><h1 class="widget-title"><?php echo get_bloginfo( 'name' ); ?></h1></a> <p style="text-align: left;"><?php echo get_bloginfo( 'description' ); ?></p> <?php } if ( $checkbox == true && $select == 'Center' ) { ?><a href=http://stackoverflow.com/questions/15637431/<?php echo home_url() ?> style="text-align: center;"><h1 class="widget-title"><?php echo get_bloginfo( 'name' ); ?></h1></a> <p style="text-align: center;"><?php echo get_bloginfo( 'description' ); ?></p> <?php } if ( $checkbox == true && $select == 'Right' ) { ?><a href=http://stackoverflow.com/questions/15637431/<?php echo home_url() ?> style="text-align: right;"><h1 class="widget-title"><?php echo get_bloginfo( 'name' ); ?></h1></a> <p style="text-align: right;"><?php echo get_bloginfo( 'description' ); ?></p> <?php } // Output image depending on which option is picked if ( $checkbox == false && $select == 'Left' ) { ?> <a href="http://stackoverflow.com/questions/15637431/<?php echo home_url() ?>"><img src="http://stackoverflow.com/questions/15637431/<?php echo of_get_option('logo_image'); ?>" class="widget logo" alt="Logo" /></a> <?php } if ( $checkbox == false && $select == 'Center' ) { ?> <a href="http://stackoverflow.com/questions/15637431/<?php echo home_url() ?>"><img src="http://stackoverflow.com/questions/15637431/<?php echo of_get_option('logo_image'); ?>" class="widget logo" alt="Logo" style="margin: 0 auto;" /></a> <?php } if ( $checkbox == false && $select == 'Right' ) { ?> <a href="http://stackoverflow.com/questions/15637431/<?php echo home_url() ?>"><img src="http://stackoverflow.com/questions/15637431/<?php echo of_get_option('logo_image'); ?>" class="widget logo" alt="Logo" style="margin: 0 0 0 auto;" /></a> <?php } echo $after_widget; } // Sanitize widget form values as they are saved. public function update( $new_instance, $old_instance ) { $instance = array(); $instance['title'] = strip_tags( $new_instance['title'] ); $instance['description'] = strip_tags($new_instance['description'] ); $instance['checkbox'] = strip_tags($new_instance['checkbox']); $instance['select'] = strip_tags($new_instance['select']); return $instance; } // Back-end widget options on admin public function form($instance) { if ( isset( $instance[ 'title' ] ) ) { $title = $instance[ 'title' ]; } else { /* $title = get_bloginfo ( 'name'); */ } if ( isset( $instance[ 'description' ] ) ) { $desc = $instance[ 'description' ]; } else { /* $desc = get_bloginfo( 'description' ); */ } $checkbox = esc_attr($instance['checkbox']); $select = esc_attr($instance['select']); ?> <p>This widget will display your uploaded logo from the Theme Options page.</p> <p> <input type="checkbox" id="logocheckbox" class="checkbox" name="<?php echo $this->get_field_name('checkbox'); ?>" value="http://stackoverflow.com/questions/15637431/1" <?php checked( '1', $checkbox ); ?>/> <label for="<?php echo $this->get_field_id('checkbox');?>"><?php _e('Show site title and tagline instead.'); ?></label> <div id="logocheckboxdiv" style="display:none"> <p>Title:</p> <p><input type="text" class="widefat" name="blog-name" placeholder="<?php echo get_bloginfo( 'name' ); ?>" readonly></p> <p>Description:</p> <p><input type="text" class="widefat" name="blog-description" placeholder="<?php echo get_bloginfo( 'description' ); ?>" readonly></p> </div> </p> <p> <label for="<?php echo $this->get_field_id('select'); ?>"><?php _e( 'Alignment:' ); ?></label> <select name="<?php echo $this->get_field_name('select'); ?>"id="<?php echo $this->get_field_id('select'); ?>"> <?php $options = array('Left', 'Center', 'Right'); foreach ($options as $option) { echo '<option value="' . $option . '" id="' . $option. '"', $select == $option ? ' selected="selected"' : '', '>', $option, '</option>'; } ?> </select> </p> <script type="text/javascript"> jQuery(window).load(function() { $('#logocheckbox').change(function() { $("#logocheckboxdiv").fadeToggle("slow"); }); }); </script> <?php }}register_widget('logo_widget');\[/code\]The problem is that it won't reveal the content when the checkbox is checked.How do I correctly make the checkbox display the fields when it is ticked and hide it otherwise, in the Wordpress widgets panel?Thank you.