Showhide javascript in page template

  • boardtc

    (@boardtc)


    17 years, 2 months ago

    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. 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

    (@fwdrew)

    17 years, 2 months ago

    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

    (@t31os)

    17 years, 2 months ago

    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

    (@boardtc)

    17 years, 2 months ago

    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

    (@t31os)

    17 years, 2 months ago

    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

    (@boardtc)

    17 years, 2 months ago

    @t31os – oh yeah! Works like a charm. With the php include as well! Absolutely fab.

    Thanks a lot,

    Tom.

    t31os

    (@t31os)

    17 years, 2 months ago

    You’re welcome.. 😉

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

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