PDA

View Full Version : Simple question



dazd
02-18-2012, 02:13 AM
I am using a show/hide script for my sites FAQs.

This is the code:

However, when you click on one of the Questions it brings you to the top of the page due to the <a href="#"
How do I make it so it doesn't bring you to the top of the page?



<html>
<head>
<title>TEST TEMPLATE</title>

<script type="text/javascript">
function showHide(id)
{
var current = document.getElementById(id);
for ( var f = 1; f < 99999; ++f )
{
var div = document.getElementById("FAQ" + f);
if ( div == null ) return; // quit when we run out of FAQs
if ( div != current )
{
div.style.display = "none"; // zap all others
} else {
// toggle current one
div.style.display = ( div.style.display == "none") ? "block" : "none";
}
}
return false; // IMPORTANT!
}
</script>
</head>
<body>

<!------ QUESTIONS ------>
<p>Change lines <li> to divs or whatever</p>
<li> <a href="#" onclick="return showHide('FAQ1')">FAQ one</a></li>
<li> <a href="#" onclick="return showHide('FAQ2')">FAQ two</a></li>
<li> <a href="#" onclick="return showHide('FAQ3')">FAQ three</a></li>

<!------ ANSWERS ------>
<div id="FAQ1" style="display:none;"><p>Ans one</p></div>
<div id="FAQ2" style="display:none;"><p>Ans two</p></div>
<div id="FAQ3" style="display:none;"><p>Ans three etc etc.</p></div>

</body>
</html>

low tech
02-18-2012, 02:21 AM
HI

try

<a href="#undefined"

It should search for undefined -- not find it -- return undefined and not jump

It's what I use anyway

LT
just tested in chrome and it works -- no jump

xelawho
02-18-2012, 02:35 AM
I like javascript:void(0) I don't know why. It's probably deprecated and highly unhip.

As a side issue, consider what your code is really doing - all you want to do is to hide the div that got shown before and show the div you just clicked on, so why loop through them all?



<html>
<head>
<title>TEST TEMPLATE</title>

<script type="text/javascript">
var shownDiv;
function showHide(id) {
if (shownDiv){ shownDiv.style.display ="none"}
shownDiv=document.getElementById(id);
shownDiv.style.display ="block"
}
</script>
</head>
<body>

<!------ QUESTIONS ------>
<p>Change lines <li> to divs or whatever</p>
<li> <a href="javascript:void(0)" onclick="showHide('FAQ1')">FAQ one</a></li>
<li> <a href="javascript:void(0)" onclick="showHide('FAQ2')">FAQ two</a></li>
<li> <a href="javascript:void(0)" onclick="showHide('FAQ3')">FAQ three</a></li>

<!------ ANSWERS ------>
<div id="FAQ1" style="display:none;"><p>Ans one</p></div>
<div id="FAQ2" style="display:none;"><p>Ans two</p></div>
<div id="FAQ3" style="display:none;"><p>Ans three etc etc.</p></div>

</body>
</html>

jmrker
02-18-2012, 03:28 AM
Why bother with the anchor (<a>) tags altogether? :confused:


<html>
<head>
<title>TEST TEMPLATE</title>
<style type="text/css">
li { list-style-type:none; }
li:hover { text-decoration:underline; }
</style>
<script type="text/javascript">
var shownDiv;
function showHide(id) {
if (shownDiv){ shownDiv.style.display ="none"; }
shownDiv = document.getElementById(id);
shownDiv.style.display ="block"
}
</script>
</head>
<body>

<!------ QUESTIONS ------>
<p>Change lines &lt;li&gt; to divs or whatever</p>
<li onclick="showHide('FAQ1')">FAQ one</a></li><p>
<li onclick="showHide('FAQ2')">FAQ two</a></li><p>
<li onclick="showHide('FAQ3')">FAQ three</a></li>
<hr>
<!------ ANSWERS ------>
<div id="FAQ1" style="display:none;"><p>Ans one</p></div>
<div id="FAQ2" style="display:none;"><p>Ans two</p></div>
<div id="FAQ3" style="display:none;"><p>Ans three etc etc.</p></div>

</body>
</html>

felgall
02-18-2012, 09:42 PM
If you use <a> tags then the href should indicate where people should go who don't have JavaScript enabled.

You should NEVER insert JavaScript in the href because that breaks the page. If you use # in the href whether followed by an id value or not then you have to expect that the page will jump when the link is clicked on (if it can't find the id it will jump to the top).

You can then override that action when you add your JavaScript but you should always test the page BEFORE you start adding the script so as to make sure that it will work for everyone including those without JavaScript.

Anything that you only want to work when JavaScript is enabled should be completely invisible to those without JavaScript who should be able to use the other parts of the page without even being aware that there is JavaScript functioning there.