Title: Show dynamic content with button
Last modified: August 31, 2016

---

# Show dynamic content with button

 *  [YOELO](https://wordpress.org/support/users/yoebo/)
 * (@yoebo)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/show-dynamic-content-with-button/)
 * I need to show a button by default and replace/show different html when a user
   either clicks a button or preferably selects from a drop down list.
 * My goal is to have varying prices for a shop item so show the base price then
   change it when a different selection is chosen.
 * If you could show me the code or point me to a resource that would be very helpful.
   Thank you.

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

 *  [ancawonka](https://wordpress.org/support/users/ancawonka/)
 * (@ancawonka)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/show-dynamic-content-with-button/#post-7013980)
 * What level of skill do you have with reading/writing PHP code? How about JavScript?
   Where do you plan to store and retrieve the pricing information/HTML from?
 * The approach you take is going to depend on the tools you are most comfortable
   with.
 * FWIT, you can find this exact scenario in the code for WooCommerce (when choosing
   a variant, the price displayed is updated based on the price of that variant)–
   but this also assumes a certain data model on the back end, and uses jQuery to
   update the displayed information based on the selection in real-time. But this
   may be overkill for your needs.
 *  Thread Starter [YOELO](https://wordpress.org/support/users/yoebo/)
 * (@yoebo)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/show-dynamic-content-with-button/#post-7014013)
 * I wasn’t going to mention price/variation as I didn’t want people to focus on
   that. I just need a way to show a certain div when a button is clicked or drop
   down is selected.
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [10 years, 3 months ago](https://wordpress.org/support/topic/show-dynamic-content-with-button/#post-7014096)
 * If that certain div is not so sensitive you don’t mind it being in the page HTML
   on initial load, then do so with all possible variants. By default they would
   all have the CSS property `display: none;`
 * Then have JavaScript or jQuery script execute on an element’s event such as onchange
   or onclick. The script will change the appropriate CSS property to `display: 
   block;` or `display: inline;`. In the case of a dropdown, to account for the 
   user making another selection, set all other possible variants to `display: none;`
   just in case one of them is already on display from a previous event.
 * If there is only one dropdown on a page, JavaScript is simple enough, you don’t
   need jQuery unless you prefer to work with it. If there’s several on a page, 
   as for a product grid perhaps, jQuery will greatly simplify the required code.
 * If the information is sensitive, you initially load an empty container. Then 
   the on event script, instead of changing CSS, makes an AJAX request to the server
   for the content, then places the response in that empty container. Additionally,
   you would need server side PHP to handle the request.
 * I know you were hoping for code, but I’ve outlined the general approach. If you
   focus on just one step at a time, you should be able to find code examples of
   that step. Piece together the steps and you’ll have it. If you need to use AJAX,
   be sure to use code specifically for WordPress – it’s a bit different than the
   usual AJAX.

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

The topic ‘Show dynamic content with button’ is closed to new replies.

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 3 replies
 * 3 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [10 years, 3 months ago](https://wordpress.org/support/topic/show-dynamic-content-with-button/#post-7014096)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics