Peekaboo Content: href="#" targetting top of page

chicgeek · #1 (**permalink**) 08-29-2008, 05:41 AM

Bonjour!

I'm using a simple JavaScript peekaboo code to allow hiding of content until requested. I've used to code before but this time am encountering a bit of a problem: when the trigger link is clicked, the top of the page is targetted. Each of these links is given href="#". In addition, the section will only expand after the trigger link is clicked once more. The site is based off of a university template, so I have a feeling the issue might be a conflict with other code surrounding the content, but I can't figure it out.

In head:

Code:

<script type="text/javascript">
function toggleview(element1) {

   element1 = document.getElementById(element1);

   if (element1.style.display == 'block' || element1.style.display == '')
      element1.style.display = 'none';
   else
      element1.style.display = 'block';

   return;
}
</script>

In stylesheet:

Code:

.extra {
      display: none;
}

Content code:

Code:

<a href="#" onclick="toggleview('q1')">[show]</a>
<p id="q1" class="extra">
Hide Me
</p>

Example pages:

http://music.york.ac.uk/new/prospect...aduate/faq.php
http://music.york.ac.uk/new/staff/pr...wainwright.php

Any and all help is greatly appreciated!

Costin Trifan · #2 (**permalink**) 08-29-2008, 10:53 AM

your js code is working actually, only that you have to click twice before it will start collapsing/expanding the content.

change it with this:

Code:

function toggleview(element1) {

    element1 = document.getElementById(element1);

    return element1.style.display = (element1.style.display != 'block') ? 'block' : 'none';
}

chicgeek · #3 (**permalink**) 08-29-2008, 12:35 PM

Costin you are wonderful. And yes, the previous code worked, but (as we both indicated) only after two clicks. Thanks for the cleaned up code.

Though the initial problem remains: href="#" still refers to the top of the page. Any idea why...? (More evident in the second example.)

Costin Trifan · #4 (**permalink**) 08-29-2008, 02:56 PM

for that, you need to prevent the default action:

Code:

function preventDefault(evt) {
    if (evt.preventDefault) {
        // FIREFOX
        return evt.preventDefault();
    }
    else {
        // IE
        return evt.returnValue = false;
    }
}

function toggleview(element1, event) {
    preventDefault(event);

    element1 = document.getElementById(element1);

    return element1.style.display = (element1.style.display != 'block') ? 'block' : 'none';
}

And in your html (because you hard-coded everything):

Code:

<div class="peekaboo">
<a href="#" onclick="toggleview('q5', event)">[show]</a>
</div>

chicgeek · #5 (**permalink**) 08-30-2008, 02:37 AM

I tried it on the FAQ page to no avail.. It stops the expansion of the content entirely, in both browsers.

Hmm...

Costin Trifan · #6 (**permalink**) 08-30-2008, 06:45 AM

I said:

Code:

<a href="#" onclick="toggleview('q5', event)">[show]</a>

you did:

Code:

<a href="#" onclick="toggleview('q1, event')">[show]</a>

see the difference?

chicgeek · #7 (**permalink**) 08-30-2008, 09:52 AM

Ah!!

(Though it took me another 45 seconds or so of blank staring.)

THANK YOU.

I should mail you cookies.

chicgeek · #8 (**permalink**) 08-30-2008, 10:06 AM

One last query:

Is there any fairly easy way to toggle it as "hide" when the content is expanded? If it's more complicated than I am hoping, don't worry about it.

Costin Trifan · #9 (**permalink**) 08-30-2008, 10:59 AM

it's not complicated, only that I don't quite understand what you mean by "toggle it as "hide" when the content is expanded" ??

do you want to automatically detect if the content was set to a default state (like none, or block) and the toggleview function should know how to toggle the content, or you want to manually set the display states in the function?

(something like this:

toggleview('q1', 'none', 'block', event) -> which will toggle the content from block to none

or
toggleview('q1', 'block', 'none', event) -> which will toggle the content from none to block

where the first display state is the default state of the content and the second is the state to change to.
)

Costin Trifan · #10 (**permalink**) 08-30-2008, 12:05 PM

I made a page with 4 examples:

Toggle from none to block
Toggle from block to none
Toggle from none to block and also the text
Toggle from block to none and also the text

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TOGGLE :: NONE :: BLOCK :: TEXT</title>

<style type="text/css">

    .extra { display: none; }

    .extra2 { display: block; }

</style>



<script type="text/javascript">

function preventDefault(evt) {
    if (evt.preventDefault) { return evt.preventDefault(); }
    else { return evt.returnValue = false; }
}

// EXAMPLE #1. Toggle from none to block
function toggleview_none(element1,  event) {
    preventDefault(event);
    element1 = document.getElementById(element1);
    element1.style.display = (element1.style.display != 'block') ? 'block' : 'none';
}

// EXAMPLE #2. Toggle from block to none
function toggleview_block(element1,  event) {
    preventDefault(event);
    element1 = document.getElementById(element1);
    element1.style.display = (element1.style.display != 'none') ? 'none' : 'block';
}

// EXAMPLE #3. Toggle from none to block and also the text
function toggleview_none_text(linkID, targetElement, event) {
    preventDefault(event);

    linkID = document.getElementById(linkID);
    targetElement = document.getElementById(targetElement);

    var display = targetElement.style.display;

    if (linkID.innerHTML == '[show]') {
        linkID.innerHTML = '[hide]';
    }
    else { linkID.innerHTML = '[show]'; }
    targetElement.style.display = (display != 'block') ? 'block' : 'none';
}

// EXAMPLE #4. Toggle from block to none and also the text
function toggleview_block_text(linkID, targetElement, event) {
    preventDefault(event);

    linkID = document.getElementById(linkID);
    targetElement = document.getElementById(targetElement);

    var display = targetElement.style.display;

    if (linkID.innerHTML == '[hide]') {
        linkID.innerHTML = '[show]';
    }
    else { linkID.innerHTML = '[hide]'; }
    targetElement.style.display = (display != 'none') ? 'none' : 'block';
}


</script>

</head>
<body>
   
   <!--// EXAMPLE #1. TOGGLE FROM NONE TO BLOCK -->
    <div class="peekaboo">
        <a href="#" onclick="toggleview_none('q1', event)">[show]</a>
    </div>
    <p id="q1" class="extra">
        The department possess a small state-of-the-art electroacoustic studio.
        This is used mainly for creative work (training is provided in the form of a course module in
        Electroacoustic composition), and also for recording concerts. This course, like all courses at
        the York music department, are open to any student.
        <br />
    </p>

<br /><br /><br />

   <!--// EXAMPLE #2. TOGGLE FROM BLOCK TO NONE -->
    <div class="peekaboo">
        <a href="#" onclick="toggleview_block('q2', event)">[hide]</a>
    </div>
    <p id="q2" class="extra2">
        The department possess a small state-of-the-art electroacoustic studio.
        This is used mainly for creative work (training is provided in the form of a course module in
        Electroacoustic composition), and also for recording concerts. This course, like all courses at
        the York music department, are open to any student.
        <br />
    </p>


<br /><br /><br />


   <!--// EXAMPLE #3. TOGGLE FROM NONE TO BLOCK AND ALSO THE TEXT -->
    <div class="peekaboo">
        <a id="a3" href="#" onclick="toggleview_none_text('a3', 'q3', event)">[show]</a>
    </div>
    <p id="q3" class="extra">
        The department possess a small state-of-the-art electroacoustic studio.
        This is used mainly for creative work (training is provided in the form of a course module in
        Electroacoustic composition), and also for recording concerts. This course, like all courses at
        the York music department, are open to any student.
        <br />
    </p>

<br /><br /><br />

   <!--// EXAMPLE #4. TOGGLE FROM BLOCK TO NONE AND ALSO THE TEXT -->
    <div class="peekaboo">
        <a id="a4" href="#" onclick="toggleview_block_text('a4', 'q4', event)">[hide]</a>
    </div>
    <p id="q4" class="extra2">
        The department possess a small state-of-the-art electroacoustic studio.
        This is used mainly for creative work (training is provided in the form of a course module in
        Electroacoustic composition), and also for recording concerts. This course, like all courses at
        the York music department, are open to any student.
        <br />
    </p>

</body>
</html>

hope this is what you wanted

chicgeek · #11 (**permalink**) 08-30-2008, 12:53 PM

Oh, oh, no, that's not what I meant at all. And I feel quite wretched for being the cause of you doing all that work.

What I meant was.. I'm looking for a way to change the actual link text from [show] to [hide]. C'est possible?

Costin Trifan · #12 (**permalink**) 08-30-2008, 01:40 PM

Bien sure!

See example #3 and #4.

(save the code I posted above as an html page

)

NameJunky · #13 (**permalink**) 08-31-2008, 03:28 PM

I was just looking for something like this. I hiope you don't mind but, I have used the codes on my webpage. If you want me to, I will remove it, just let me know.

I have a problem with it though. Where do I enter the text that I want shown when the user clicks on the "show" link? This is the code I have now:

In CSS

Code:

.extra { display: none; }

In the head:

Code:

<script type="text/javascript">
function preventDefault(evt) {
    if (evt.preventDefault) {
        // FIREFOX
        return evt.preventDefault();
    }
    else {
        // IE
        return evt.returnValue = false;
    }
}

function toggleview(element1, event) {
    preventDefault(event);

    element1 = document.getElementById(element1);

    return element1.style.display = (element1.style.display != 'block') ? 'block' : 'none';
}
</script>

and on the page:

Code:

<div class="peekaboo">
<a href="#" onclick="toggleview('q5', event)">[show]</a>
</div>

I assume it goes in the code directly above that I have on my page but, I don't see where it should go?

Thanks in advance, this is a gret little trick I've just learned, very helpfull!

Costin Trifan · #14 (**permalink**) 08-31-2008, 03:54 PM

oh, boy...didn't I said that everything is in the code I previously posted?

no problem, let's do it again:

#1 First example: to be used when the content is visible: (Will toggle the content from block to none and the text from [hide] to [show])

In the Head tag:

Code:

<style type="text/css">

    .extra2 { display: block; }

</style>

<script type="text/javascript">

function preventDefault(evt) {
    if (evt.preventDefault) { return evt.preventDefault(); }
    else { return evt.returnValue = false; }
}

// EXAMPLE #4. Toggle from block to none and also the text
function toggleview_block_text(linkID, targetElement, event) {
    preventDefault(event);

    linkID = document.getElementById(linkID);
    targetElement = document.getElementById(targetElement);

    var display = targetElement.style.display;

    if (linkID.innerHTML == '[hide]') {
        linkID.innerHTML = '[show]';
    }
    else { linkID.innerHTML = '[hide]'; }
    targetElement.style.display = (display != 'none') ? 'none' : 'block';
}

</script>

In the Body tag:

Code:

<!--// EXAMPLE #4. TOGGLE FROM BLOCK TO NONE AND ALSO THE TEXT -->
<div class="peekaboo">
    <a id="a4" href="#" onclick="toggleview_block_text('a4', 'q4', event)">[hide]</a>
</div>
<p id="q4" class="extra2">
    The department possess a small state-of-the-art electroacoustic studio.
    This is used mainly for creative work (training is provided in the form of a course module in
    Electroacoustic composition), and also for recording concerts. This course, like all courses at
    the York music department, are open to any student.
    <br />
</p>

#2 Second example: to be used when the content is hidden:(Will toggle the content from none to block and the text from [show] to [hide])

In the Head tag:

Code:

<style type="text/css">

    .extra { display: none; }

</style>

<script type="text/javascript">

function preventDefault(evt) {
    if (evt.preventDefault) { return evt.preventDefault(); }
    else { return evt.returnValue = false; }
}

// EXAMPLE #3. Toggle from none to block and also the text
function toggleview_none_text(linkID, targetElement, event) {
    preventDefault(event);

    linkID = document.getElementById(linkID);
    targetElement = document.getElementById(targetElement);

    var display = targetElement.style.display;

    if (linkID.innerHTML == '[show]') {
        linkID.innerHTML = '[hide]';
    }
    else { linkID.innerHTML = '[show]'; }
    targetElement.style.display = (display != 'block') ? 'block' : 'none';
}

</script>

In the Body tag:

Code:

<!--// EXAMPLE #3. TOGGLE FROM NONE TO BLOCK AND ALSO THE TEXT -->
<div class="peekaboo">
    <a id="a3" href="#" onclick="toggleview_none_text('a3', 'q3', event)">[show]</a>
</div>
<p id="q3" class="extra">
    The department possess a small state-of-the-art electroacoustic studio.
    This is used mainly for creative work (training is provided in the form of a course module in
    Electroacoustic composition), and also for recording concerts. This course, like all courses at
    the York music department, are open to any student.
    <br />
</p>

Hope I've explained myself clear enough now.

NameJunky · #15 (**permalink**) 08-31-2008, 04:03 PM

Great, thanks a million!

Costin Trifan · #16 (**permalink**) 09-01-2008, 06:32 AM

you're welcome!

ps: Laura, you may email me those cookies now, if you please!

chicgeek · #17 (**permalink**) 09-01-2008, 07:30 AM

hahaha, I wonder if I can legally mail cookies from UK to Romania...