/    Sign up×
Community /Pin to ProfileBookmark

How to add a "previous" button to this script?

I’m using the following “text sections” script which is great. But I want to add a “previous” button & cannot figure it out. Any help would be great!

this is in my external .js file:

function toggleMe(a){
var next=document.getElementById(a);
var b=new String();
b= a-1;
var prev=document.getElementById(b);
if(!next)return true;
if(next.style.display==”none”){
next.style.display=”block”
prev.style.display=”none”
window.scrollTo(0,0);
} else {
next.style.display=”none”
}
return true;
}

And this goes in the body of the html page:

<div id=”1″ style=”display: block;”>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat..</p>
<input type=”button” class=”pagebutton button” onclick=”return toggleMe(‘2’)” value=”Go to Section 2″>
</div>

<div id=”2″ style=”display: none;”>
<p>
Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate.</p>
<input type=”button” class=”pagebutton button” onclick=”return toggleMe(‘3’)” value=”Go to Section 3″>
</div>

<div id=”3″ style=”display: none;”>
<p>
Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit?</p>
<input type=”button” class=”pagebutton button” onclick=”return toggleMe(‘4’)” value=”Go to Section 4″>
</div>

<div id=”4″ style=”display: none;”>
<p>
Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
<p>
<strong>Do not put a button on the last section; your page is done, the user can’t go any farther.</strong><p>
<p>
<em>You could always add a button to reload the page:</em></p>
<input type=”button” class=”pagebutton button” onclick=”window.location.reload()” value=”Reload page”>
</div>

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@FangSep 03.2008 — A "previous" what exactly?

Numeric id's are invalid.

Users with JavaScript disbled browsers will never see any content.
Copy linkTweet thisAlerts:
@vwphillipsSep 03.2008 — [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" xml:lang="en" lang="en">

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
function toggleMe(a,b,c){
var next=document.getElementById(a+c);
var prev=document.getElementById(a+b);
if(!next)return true;
if(next.style.display=="none"){
next.style.display="block"
prev.style.display="none"
window.scrollTo(0,0);
}
else {
next.style.display="none"
}
return true;
}

/*]]>*/
</script></head>

<body>
<div id="Test1" style="display: block;">
<p>
1Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat..</p>
<input type="button" class="pagebutton button" onclick="return toggleMe('Test',1,2)" value="Go to Section 2">
</div>

<div id="Test2" style="display: none;">
<p>
2Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum e pluribus unum. Defacto lingo est igpay atinlay. Marquee selectus non provisio incongruous feline nolo contendre. Gratuitous octopus niacin, sodium glutimate.</p>
<input type="button" class="pagebutton button" onclick="return toggleMe('Test',2,3)" value="Go to Section 3">
<input type="button" class="pagebutton button" onclick="return toggleMe('Test',2,1)" value="Go to Section 1">
</div>

<div id="Test3" style="display: none;">
<p>
3Li Europan lingues es membres del sam familie. Lor separat existentie es un myth. Por scientie, musica, sport etc., li tot Europa usa li sam vocabularium. Li lingues differe solmen in li grammatica, li pronunciation e li plu commun vocabules. Omnicos directe al desirabilit?</p>
<input type="button" class="pagebutton button" onclick="return toggleMe('Test',3,4)" value="Go to Section 4">
<input type="button" class="pagebutton button" onclick="return toggleMe('Test',3,2)" value="Go to Section 2">
</div>

<div id="Test4" style="display: none;">
<p>
4Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues. Li nov lingua franca va esser plu simplic e regulari quam li existent Europan lingues.</p>
<p>
<strong>Do not put a button on the last section; your page is done, the user can't go any farther.</strong><p>
<p>
<em>You could always add a button to reload the page:</em></p>
<input type="button" class="pagebutton button" onclick="return toggleMe('Test',4,3)" value="Go to Section 3">
<input type="button" class="pagebutton button" onclick="window.location.reload()" value="Reload page">
</div>
</body>

</html>[/CODE]
Copy linkTweet thisAlerts:
@debbiegauthorSep 03.2008 — Vic, you're awesome, this will work perfectly for what I need. Thanks so much for your help!!!

?
×

Success!

Help @debbieg spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.4,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...