Title: problem with display:none
Last modified: August 21, 2016

---

# problem with display:none

 *  Resolved [gerard](https://wordpress.org/support/users/charismaarts/)
 * (@charismaarts)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/problem-with-displaynone/)
 * I am running a javascript function on a page to make content appear and disappear
   when you click on buttons. I have the content contained in divs and both divs
   are set to “display: none;” to start…
 * this code has worked on other wordpress sites just fine…
 * on this site – the code makes the whole page disappear…
    I have isolated it to
   the “display:none” css as when i remove that everything is fine…
 * here is the page: [http://draperiesbysandi.com/measure-guide/](http://draperiesbysandi.com/measure-guide/)
 * and the code that runs on page is here:
 *     ```
       function measure_guide() {
       if (is_page(93)) {
   
       ?>
       <h1>Choose a Payment Type:</h1>
   
       <style>
       #container, #container2 {display: none;}
   
         #ebook1 {background-image: url('http://charismaarts.com/wp-content/uploads/2013/09/full_pay_blue.png'); color: transparent; background-repeat: no-repeat;
           border: none; font-size: 35px; line-height: 35px; background-color: transparent;}
   
           #collection {background-image: url('http://charismaarts.com/wp-content/uploads/2013/09/pay_paln_blue.png'); color: transparent; background-repeat: no-repeat;
           border: none; font-size: 35px; line-height: 35px; background-color: transparent;}
   
           #ebook1:hover {cursor: pointer;}
           #ebook1:visited {background-image: url('http://charismaarts.com/wp-content/uploads/2013/09/full_pay_green.png'); }
   
           #collection:hover {background-image: url('http://charismaarts.com/wp-content/uploads/2013/09/pay_plan_green.png'); cursor: pointer;}
   
       </style>
   
       <script>
       function myFunction1c()
       {
   
       x=document.getElementById("container").style.display = "block";
       x=document.getElementById("container2").style.display = "none";
   
       }
       </script>
   
       <script>
       function myFunction1b()
       {
   
       x=document.getElementById("container2").style.display = "block";
       x=document.getElementById("container").style.display = "none";
   
       }
       </script>
   
       <button class="ebook" id="ebook1" type="button" onclick="myFunction1c()">Payment</button>
   
       <button class="collection" id="collection" type="button" onclick="myFunction1b()">Collection</button>
   
       <div id="container">
   
       Measure basic: 
   
       (1) Please review basic information which applies to all window treatments.
   
       *Take accurate measurements, using only a rigid steel tape measure, work in inches
   
        ( insert pic # 568)
   
       * Determine what type of hardware you will be using, crucial factor
   
       * Determine mounting location of your hardware. Ideally hardware should be mounted 3” 
   
       (or more) beyond the windows wood trim or border
   
       * Pay attention to details and identify all structural features that may influence your 
   
       hardware placement , such as extra wall space needed for decorative finials, registers, 
   
       pictures,light switches, etc.
   
       (2) Follow specific measure guide for each type of treatment and/or design you have 
   
       selected
   
       </div>
   
       <div id="container2">
   
       Custom Drapery: 
   
       (1) Please review basic information which applies to all window treatments.
   
       *Take accurate measurements, using only a rigid steel tape measure, work in inches
   
        ( insert pic # 568)
   
       * Determine what type of hardware you will be using, crucial factor
   
       * Determine mounting location of your hardware. Ideally hardware should be mounted 3” 
   
       (or more) beyond the windows wood trim or border
   
       * Pay attention to details and identify all structural features that may influence your 
   
       hardware placement , such as extra wall space needed for decorative finials, registers, 
   
       pictures,light switches, etc.
   
       (2) Follow specific measure guide for each type of treatment and/or design you have 
   
       selected
   
       </div>
   
       <?php
       }
       }
   
       add_action('thesis_hook_after_post','measure_guide');
       ```
   
 * _[Moderator Note: Please post code or markup between backticks (not double quotes)
   or use the code button. Or better still – use a [pastebin](http://pastebin.com/).
   Your posted code may now have been permanently damaged by the forum’s parser.]_
 * for the life of me i cannot figure out why it is making page disappear; the “
   display none” should be confined to the divs only but for some bizarre reason
   is being applied to the whole page…
 * can anyone help?

Viewing 1 replies (of 1 total)

 *  [Peter_L](https://wordpress.org/support/users/peter_l/)
 * (@peter_l)
 * [12 years, 5 months ago](https://wordpress.org/support/topic/problem-with-displaynone/#post-4220448)
 * Place your styles and scripts either in the <head> or just before the ending 
   of the html.

Viewing 1 replies (of 1 total)

The topic ‘problem with display:none’ is closed to new replies.

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 2 participants
 * Last reply from: [Peter_L](https://wordpress.org/support/users/peter_l/)
 * Last activity: [12 years, 5 months ago](https://wordpress.org/support/topic/problem-with-displaynone/#post-4220448)
 * Status: resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics