/    Sign up×
Community /Pin to ProfileBookmark

Simple showing/hiding Table and Text

Copy linkTweet thisAlerts:
Jun 04.2009

hi,
my question is simple, I hope.
Let say you have 2 buttons, if you click button 1, a table will be shown.
If you click button 2, the table will be hidden and a new table will be shown instead.

Table will contain text .. etc

I would be thankful if someone can show me an example, if possible.

thanks

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@Declan1991Jun 04.2009 — Give the table an id.
<input type="button" onclick="document.getElementById('THE ID YOUVE GIVEN').style.display='block';" value="WHATEVER YOU WANT">For the show button
<input type="button" onclick="document.getElementById('THE ID YOUVE GIVEN').style.display='none';" value="WHATEVER YOU WANT">For the hide button.

The onclick is the important thing, it can be in a link, div anything you want.
Copy linkTweet thisAlerts:
@PeritoauthorJun 04.2009 — thanks, i have some questions

1) is there any way that a label (text) would do the same thing instead of button. I tried to but type="text" but it changed into a textbox, I only want to show the text, without any background

2) lets say I have 10 tables, can I create a function to hide them all and onclick invoke this function? if yes, can u please tell me how?
Copy linkTweet thisAlerts:
@criterion9Jun 04.2009 — <a href="return false;" onclick="javascript_function">Link Text</a>
Copy linkTweet thisAlerts:
@PeritoauthorJun 05.2009 — i tried this
[code=html]<a class="langButton" href="return false;" onclick="hideTables()">Test</a>[/code]

when I click on test, a new page is opened with the address .../return false;

what am I doing wrong?
Copy linkTweet thisAlerts:
@criterion9Jun 05.2009 — Sorry I was mind dead from work when I posted that. Should be href="#"
Copy linkTweet thisAlerts:
@PeritoauthorJun 06.2009 — ok now I'm doing this
[code=html]
function hideTables() {
document.getElementById('T1').style.display='none';
document.getElementById('T2').style.display='none';
}

function showPensilPaper() {
hideTables();
document.getElementById('T1').style.display='block';
}
[/code]

Table 1 will show if I remove hideTables();

but when I put it (to hide other tables) it doesnt show the table anymore.

Any ideas?
Copy linkTweet thisAlerts:
@PeritoauthorJun 07.2009 — help ?
×

Success!

Help @Perito 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.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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