Title: WordPress jQuery shortcodes
Last modified: September 1, 2016

---

# WordPress jQuery shortcodes

 *  [VVTinho](https://wordpress.org/support/users/vvtinho/)
 * (@vvtinho)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/wordpress-jquery-shortcodes/)
 * Hi!
 * I have a jquery code with shortcodes from the plugin draw attention, and im struggling
   to try to hide some divs shortcodes, before I use jQuery show.
 *     ```
       <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
       			jQuery( document ).ready(function() {
       			        jQuery('.showSingle').on('click', function() {
       			            jQuery('.targetDiv').hide();
       			            jQuery('#div'+$(this).attr('target')).show();
       			            e.preventDefault();
       			            });
       				});
       			});
   
       			<div class="buttons">
       				<a  class="showSingle" target="1"><button>1</button></a>
       				<a  class="showSingle" target="2"><button>2</button></a>
       				<a  class="showSingle" target="3"><button>3</button></a>
       				<a  class="showSingle" target="4"><button>4</button></a>
       			</div>
   
       			<div id="div1" class="targetDiv"><?php echo do_shortcode( '[drawattention ID="48"]');?></div>
       			<div id="div2" class="targetDiv"><?php echo do_shortcode( '[drawattention ID="87"]');?></div>
       			<div id="div3" class="targetDiv"><?php echo do_shortcode( '[drawattention ID="92"]');?></div>
       			<div id="div4" class="targetDiv"><?php echo do_shortcode( '[drawattention ID="111"]');?></div>
       ```
   
 * How can i hide div2, div3 and div4, before I click on button?

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

 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/wordpress-jquery-shortcodes/#post-7709486)
 * Just set their CSS to `display: none;` initially on style.css or similar. Additionally,
   if you want the currently visible div to go away when another button is clicked,
   you need to first set all element’s styles to `display: none;` before calling`.
   show()`
 * FYI, while it may not be a problem in this context, as a general rule you should
   avoid loading jQuery from external servers, WP has its own version native to 
   the installation. The proper way to get it loaded is to use [wp_enqueue_script()](https://developer.wordpress.org/reference/functions/wp_enqueue_script/).
   When you don’t follow this practice, you risk causing conflicts with other plugins
   or your theme.
 *  Thread Starter [VVTinho](https://wordpress.org/support/users/vvtinho/)
 * (@vvtinho)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/wordpress-jquery-shortcodes/#post-7709563)
 * Hi!
 * You: Additionally, if you want the currently visible div to go away when another
   button is clicked, you need to first set all element’s styles to display: none;
   before calling .show()
 * I have tried to set all elements styles to display:none; before calling .show,
   but Its not working.
    Can you please help me with some code examples, thanks?
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/wordpress-jquery-shortcodes/#post-7709604)
 * It should simply be
    `jQuery('.targetDiv').css('display', 'none');`
 * If you still have trouble, check your browser’s console for JS errors. If you’re
   still loading jQuery from jquery.com, try going the `wp_enqueue_script()` route,
   there might be a conflict loading external jQuery.
 * You might also try setting up a test at jsfiddle.com. If it fails there too, 
   fiddle with it until it works. If it works there, then there’s an issue with 
   your WP implementation somewhere.

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

The topic ‘WordPress jQuery shortcodes’ is closed to new replies.

## Tags

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

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 3 replies
 * 2 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [9 years, 7 months ago](https://wordpress.org/support/topic/wordpress-jquery-shortcodes/#post-7709604)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics