/    Sign up×
Community /Pin to ProfileBookmark

drop down line(?)

Copy linkTweet thisAlerts:
Oct 05.2005

I have seen this on other sites but not sure what it’s called. I wanted to save space on a web page so what i wanted to do is have a line like;

[COLOR=Indigo]What’s todays date?[/COLOR]
then when you click on it, it would after a line show up under it saying what the date was.

i have found codes for drop down boxes and that isn’t what i’m looking for.

could some steer me to where i could find this code?
or tell me what i’m looking for is called?

thank you

emrald_dragon

to post a comment
HTML

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@MstrBobOct 05.2005 — Hmm, for something like this, I'd use javascript. Now I don't use it very often, but I believe you could do something like this:

<i>
</i>var dateString, dDiv, shown;
function showDateElm()
{
if(!shown)
{
var p = document.createElement('p');
p.appendChild(document.createTextNode(dateString));
dDiv.appendChild(p);
shown=true;
}
}
window.onload=function()
{
var today = new Date();
var days = new Array('Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday');
var months = new Array('January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December');
dateString = days[today.getDay()]+', '+months[today.getMonth()]+' '+today.getDate()+', '+today.getFullYear();

dDiv = document.createElement('div');
var text = document.createTextNode("What's todays date?");
dDiv.appendChild(text);
shown=false;
if(document.addEventListener)
{
dDiv.addEventListener('click',showDateElm,false);
} else if (document.attachEvent) {
dDiv.attachEvent('onclick',showDateElm);
} else if (document.onclick) {
dDiv.onclick='showDateElm';
} else {
showDateElm();
}
document.body.appendChild(dDiv);
}


Now of course you would place the above code in a <script type="text/javascript"> </script> tag, and put all that in your header (or else use an external js file). Basically, we get the date, use two arrays to gather the day of the week and the name of the month, and we create an element. We also create a DIV element, attach an onclick event to it, which triggers the showDateElm() function. This function first checks if the date is already shown, and if not it adds a P element containing the date we constructed, and adds it to the DIV element, then sets the shown variable to false. You might be able to trim that down or something, I dunno, but that should get you what you want.
Copy linkTweet thisAlerts:
@emrald_dragonauthorOct 06.2005 — i thank you but i used the "date as an example.

i was going to use the drop down line for a questions page.

i'm at the beginning level of learning codes (but not a novice).
Copy linkTweet thisAlerts:
@FangOct 06.2005 — &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;Hide and Show&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;script type="text/javascript"&gt;
function hide(obj) {
if(obj) { // open or close one
var sibling=(obj.nextSibling.nodeType==3)? obj.nextSibling.nextSibling : obj.nextSibling; // Moz or IE
sibling.className=(sibling.className=='expanded')? 'collapsed' : 'expanded';
}
else { // close all
var aDD=document.getElementsByTagName('DD');
for (var i=0;i&lt;aDD.length;i++) {
aDD[i].className='collapsed';
}
}
}
if(document.getElementById) {
window.onload=function() {
hide();
var aDT=document.getElementsByTagName('DT');
for (var i=0;i&lt;aDT.length;i++) {
aDT[i].style.cursor=(document.nodeType)? 'pointer' : 'hand'; // DOM or IE5
if (aDT[i].aDTEventListener) {
aDT[i].aDTEventListener('click', function() { hide(this); }, false);
}
else {
aDT[i].onclick=function() {hide(this);}
}
}
};
}
&lt;/script&gt;

&lt;style type="text/css"&gt;
.expanded {display:block;}
.collapsed {display:none;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;

&lt;dl&gt;
&lt;dt&gt;question 1&lt;/dt&gt;
&lt;dd&gt;answer 1&lt;/dd&gt;
&lt;dt&gt;question 2&lt;/dt&gt;
&lt;dd&gt;answer 2&lt;/dd&gt;
&lt;dt&gt;question 3&lt;/dt&gt;
&lt;dd&gt;answer 3&lt;/dd&gt;
&lt;/dl&gt;

&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@emrald_dragonauthorOct 07.2005 — i thank you for that coding. i just wanted to make sure of one thing...

the title and where it says question1 answer 1 to change

is there anything else i need to change?

emrald_dragon
Copy linkTweet thisAlerts:
@konithomimoOct 07.2005 — If you change anything else then you will have faulty code . . . of course unless you change the layout attributes.
Copy linkTweet thisAlerts:
@emrald_dragonauthorOct 10.2005 — okay thank you very much for the help
×

Success!

Help @emrald_dragon 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 6.1,
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: @meenaratha,
tipped: article
amount: 1000 SATS,

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

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