Title: Showhide javascript in page template
Last modified: August 19, 2016

---

# Showhide javascript in page template

 *  [boardtc](https://wordpress.org/support/users/boardtc/)
 * (@boardtc)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/showhide-javascript-in-page-template-1/)
 * I am trying to include some javascript to show/hide a section with code that 
   works fine in a html page. I have added
 * `<script type=”text/javascript” src=”showhide.js”></script>`
 * to the head section of header.php and my page template includes in the pagepost
   div:
 *     ```
       <div id="wrapper">
       <script type=”text/javascript”>
       <!–
       <a onclick=”switchMenu(’showhide’);”>What’s New</a>
       //–></script>
       <div id="showhide">
       <?php include(TEMPLATEPATH  . '/whatsnew.php'); ?>
       </div>
       </div>
       ```
   
 * showhide.js is in my theme directory with my theme style.css having the necessary
   css, #wrapper & #showhide
 * The first thing I see is the include file, I do not see a What’s new anchor to
   toggle the show/hide. Any thoughts?
 * I also want to have the section hidden at startup. In a regularly html page I
   achieve this with
 * `<body onload="switchMenu('showhide');">`
 * Thanks, Tom.
 * ps. A variation of this post is in the How-To and Troubleshooting but has [remained unanswered.](http://wordpress.org/support/topic/244649?replies=1#post-988837)
   I could not find a place to contact the moderators to move it so have reposted
   here.

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

 *  [fwdrew](https://wordpress.org/support/users/fwdrew/)
 * (@fwdrew)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/showhide-javascript-in-page-template-1/#post-992565)
 * I have no idea what your showhide.js file is doing, I’ll also assume you are 
   calling it with the correct paramaters (without seeing it, it is hard to know)
   but try this:
 *     ```
       <div id="wrapper">
       <a onclick=”switchMenu(’showhide’);”>What’s New</a>
       <div id="showhide">
       <?php include(TEMPLATEPATH  . '/whatsnew.php'); ?>
       </div>
       </div>
       ```
   
 * You had regular html inside javascript tags which is why you didnt see the anchor
   text.
 * Hope that gives you some insight.
 * Regards,
 * Drew
 *  [t31os](https://wordpress.org/support/users/t31os/)
 * (@t31os)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/showhide-javascript-in-page-template-1/#post-992569)
 * If you’re using the onclick event on an A tag, you will still need to add a HREF
   onto it…
 * `<a href="#" onclick="switchMenu('showhide');">What’s New</a>`
 * One drawback however is that you have to enter something into the HREF, and using#
   will cause the browser window to shoot to the top…
 * If you don’t want that to happen, attach the onclick event to a different tag,
   an image would be suited.
 * I use a small script for showing and hiding elements to, so i know the above 
   to be true assuming the script works much the same as my own…
 * Of course if you must use a link then you can use an anchor to keep it around
   the same area of the page…
 * `<a name="thisanchor"></a><a href="#thisanchor" onclick="switchMenu('showhide');"
   >What’s New</a>`
 *  Thread Starter [boardtc](https://wordpress.org/support/users/boardtc/)
 * (@boardtc)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/showhide-javascript-in-page-template-1/#post-992591)
 * Thanks guys. t31os, I added href=”#” but did not see the anchor until I removed
   the scrips tag ‘<script type=”text/javascript”>’ as drew suggested. However clicking
   the anchor has no effect 🙁
 * Drew my showhide works fine in normal html and is as follows:
    ` function switchMenu(
   obj) { var el = document.getElementById(obj); if ( el.style.display != "none"){
   el.style.display = 'none'; } else { el.style.display = ''; } }
 *  [t31os](https://wordpress.org/support/users/t31os/)
 * (@t31os)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/showhide-javascript-in-page-template-1/#post-992592)
 * I use…
 *     ```
       function togglebox(id)
       {
         var e = document.getElementById(id);
   
         if (e.style.display == 'block')
         e.style.display = 'none';
         else
         e.style.display = 'block';
       }
       ```
   
 * Then in my HTML i have something like this…
 * `<div class="example" id="hidethis">Some content to be hidden....</div>`
 * `<a href="#" onclick="togglebox('hidethis')">my toggle link</a>`
 * In the CSS..
    `.example {display:none}`
 * Of course this assumes the standard state of the element is hidden, and the onclick
   event shows that hidden element…
 * I also have a second function in that file… like so..
 *     ```
       function togglebox2(id)
       {
         var e = document.getElementById(id);
   
         if(e.style.display == 'inline')
         e.style.display = 'none';
         else
         e.style.display = 'inline';
       }
       ```
   
 * So depending on the type of element i call the relevant inline or block toggle
   function.
 * Like i said, it does work better without using a link to toggle…
 * `<img src="someimage" onclick"togglebox('hidethis')" />`
 * My script is called into my theme via a custom field, which ultimately just does
   an inline include of the JS file which i’ve plonked into my theme folder….
 * Of course make sure the script is run/included.. before the link and element 
   to hide…
 *  Thread Starter [boardtc](https://wordpress.org/support/users/boardtc/)
 * (@boardtc)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/showhide-javascript-in-page-template-1/#post-992598)
 * [@t31os](https://wordpress.org/support/users/t31os/) – oh yeah! Works like a 
   charm. With the php include as well! Absolutely fab.
 * Thanks a lot,
 * Tom.
 *  [t31os](https://wordpress.org/support/users/t31os/)
 * (@t31os)
 * [17 years, 2 months ago](https://wordpress.org/support/topic/showhide-javascript-in-page-template-1/#post-992599)
 * You’re welcome.. 😉

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

The topic ‘Showhide javascript in page template’ is closed to new replies.

## Tags

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

 * 6 replies
 * 3 participants
 * Last reply from: [t31os](https://wordpress.org/support/users/t31os/)
 * Last activity: [17 years, 2 months ago](https://wordpress.org/support/topic/showhide-javascript-in-page-template-1/#post-992599)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics
