/    Sign up×
Community /Pin to ProfileBookmark

Make everything visible in one click?

Hi i wonder if there is a way to let the visitor to choose wether he wants to expand all at once?

I have this code and in my real code i have many expand and collapse links, how do i do to let the visitor see everything?

(I hope i explained myself properly, my english is not the best ? )

[CODE]<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN”
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”en”>
<head>
<title>More Or Less</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<script type=”text/javascript”>
//<![CDATA[
<!–
function MoreOrLess(objID) {
var obj=document.getElementById(objID);
obj.className=(obj.className==’more’)? “less” : “more”;
}
//–>
//]]>
</script>

<style type=”text/css”>
<!–
.moreorless {color:#9cf; text-decoration:underline; cursor:help;}
/* can be display:inline */
.more {display:block; border:1px solid blue; background:#9cf;}
.less {display:none;}
–>
</style>

</head>
<body>
<p>The standard chunk of <span onclick=”MoreOrLess(‘span1’);” class=”moreorless”>Lorem Ipsum</span><span id=”span1″ class=”less”>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <a href=”http://www.lipsum.com/”>website</a></span> used since the 1500s is reproduced below for those interested.</p>

</body>
</html>[/CODE]

to post a comment
JavaScript

4 Comments(s)

Copy linkTweet thisAlerts:
@ExuroJul 05.2004 — I think this is what you were asking for:

[size=2]
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;More Or Less&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;
&lt;script type="text/javascript"&gt;
//&lt;![CDATA[
&lt;!--
function MoreOrLess(objID) {
var obj=document.getElementById(objID);
obj.className=(obj.className=='more')? "less" : "more";
}
[color=red]function showAll() {
var spans = document.getElementsByTagName('span');
for (var i=0;i&lt;spans.length;i++) {
if (spans[i].className == "less") {
spans[i].className = "more";
}
}
}
function hideAll() {
var spans = document.getElementsByTagName('span');
for (var i=0;i&lt;spans.length;i++) {
if (spans[i].className == "more") {
spans[i].className = "less";
}
}
}[/color]
//--&gt;
//]]&gt;
&lt;/script&gt;

&lt;style type="text/css"&gt;
&lt;!--
.moreorless {color:#9cf; text-decoration:underline; cursor:help;}
/* can be display:inline */
.more {display:block; border:1px solid blue; background:#9cf;}
.less {display:none;}
--&gt;
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;p&gt;The standard chunk of &lt;span onclick="MoreOrLess('span1');" class="moreorless"&gt;Lorem Ipsum&lt;/span&gt;&lt;span id="span1" class="less"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;a href="http://www.lipsum.com/"&gt;website&lt;/a&gt;&lt;/span&gt; used since the 1500s is reproduced below for those interested.&lt;/p&gt;
&lt;p&gt;The standard chunk of &lt;span onclick="MoreOrLess('span1');" class="moreorless"&gt;Lorem Ipsum&lt;/span&gt;&lt;span id="span2" class="less"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;a href="http://www.lipsum.com/"&gt;website&lt;/a&gt;&lt;/span&gt; used since the 1500s is reproduced below for those interested.&lt;/p&gt;
&lt;p&gt;The standard chunk of &lt;span onclick="MoreOrLess('span1');" class="moreorless"&gt;Lorem Ipsum&lt;/span&gt;&lt;span id="span3" class="less"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;a href="http://www.lipsum.com/"&gt;website&lt;/a&gt;&lt;/span&gt; used since the 1500s is reproduced below for those interested.&lt;/p&gt;
&lt;p&gt;The standard chunk of &lt;span onclick="MoreOrLess('span1');" class="moreorless"&gt;Lorem Ipsum&lt;/span&gt;&lt;span id="span4" class="less"&gt;Lorem Ipsum is simply dummy text of the printing and typesetting industry. &lt;a href="http://www.lipsum.com/"&gt;website&lt;/a&gt;&lt;/span&gt; used since the 1500s is reproduced below for those interested.&lt;/p&gt;
&lt;p&gt;[color=red]&lt;input type="button" onclick="showAll();" value="Show All" /&gt; &lt;input type="button" onclick="hideAll();" value="Hide All" /&gt;[/color]&lt;/p&gt;

&lt;/body&gt;
&lt;/html&gt;
[/size]


I hope that helps!
Copy linkTweet thisAlerts:
@pemanauthorJul 05.2004 — Thank you so much!!! ? this will work great!!!
Copy linkTweet thisAlerts:
@pemanauthorJul 06.2004 — Thank you once more, it worked perfect!!!
Copy linkTweet thisAlerts:
@ExuroJul 06.2004 — You're welcome!
×

Success!

Help @peman 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.18,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

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