Show/Hide with Button Change

@paradoxperfectJun 28.2005

Hello I am pretty new to javascript and was wondering how I can make a button, that gets clicked and shows/hides a table? But when the button is clicked it changes to a “-” and clicked again to a “+” back and forth. I am using a news system so for the id of the table..it would be {news-id} because it shows the id of the post when it is published. I have gotten some help before about this but it still doesn’t seem to work. The script my friend said to use for the “botton change from + to -” and to show/hide is this:

[CODE]<script type=”text/javascript”> function change(name,was,will,first,second){ if((id = document.getElementById(name))) { if(id.value != was) { id.value = was; showmenu(first); hidemenu(second); } else { id.value = will; showmenu(second); hidemenu(first); } }}function showmenu(elmnt) { document.getElementById(elmnt).style.visibility=”visible” }function hidemenu(elmnt) { document.getElementById(elmnt).style.visibility=”hidden” }</script>[/CODE]

So in my page for the button I would put this:

[CODE]<input type=”button” id=”{news-id}” value=”+ Show” onclick=”change(‘{news-id}’,’+ Show’,’- Hide’,'{news-id}s’,'{news-id}h’);” />[/CODE]

So how could the button be the “initial thing to always show when clicked” and the table below it show and hide when clicked?? Thanks if anyone can help because that one up there didnt really work! ?

to post a comment

JavaScript

14 Comments(s) _↴

@vwphillipsJun 28.2005 — #

[CODE]
 
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 </head>
 
 <body>
 <table id="MyTable" width="200" height="200" border="1">
 <tr>
 <td>.</td>
 <td>.</td>
 </tr>
 <tr>
 <td>.</td>
 <td>.</td>
 </tr>
 </table>
 
 <input type="button" name=""  value="-" onclick="Table(this,'MyTable');" style="width:50px;" >
 <script language="JavaScript" type="text/javascript">
 <!--
 
 function Table(obj,id){
 id=document.getElementById(id).style;
 if (obj.value=='-'){
 id.visibility='hidden';
 obj.value='+';
 }
 else {
 id.visibility='visible';
 obj.value='-'
 }
 }
 
 //-->
 </script>
 
 </body>
 
 </html>
 [/CODE]

@acorbelliJun 28.2005 — #

<i>
 </i>var vis = false;
 function change(table_id, button_id)
 {
 var table = document.getElementById(table_id);
 var button = document.getElementById(button_id);
 if (vis) {table.style.display = "none"; button.value = "+"; vis = false;}
 else {table.style.display = "inline"; button.value = "-"; vis = true;}
 }

And then...

<i>
 </i>&lt;form&gt;
 &lt;input type="button" id="button1" name="switch" value="+" onclick="change('yourid', 'button1');"&gt;
 &lt;/form&gt;
 
 &lt;table id="yourid" display="none"&gt;
 ...sometablestuffhere...
 &lt;/table&gt;

Give that a try and let me know...

@acorbelliJun 28.2005 — #[/QUOTE]

I believe this guys code is fairly equivalent to mine, the only difference being that mine will "remove" it from the page (thus making space for everything else), his way will make it dissapear (the page will be formatted as if it was still there, but it will not be visible).

@paradoxperfectauthorJun 28.2005 — #Awesome man thats f-ing amazing, acorbelli!! The only problem is...when i click the button the first time the page is loaded. It switches from + to - but doesn't remove the table... but once i click it again it works fine from there lol ? I'm really glad i could solve this man...but now just that 1 little error lol!

@vwphillipsJun 28.2005 — #My code met the specification

this frees the space with no display!

the other 'guys' code requires an an initial style display attribute

[CODE]
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
 "http://www.w3.org/TR/html4/loose.dtd">
 
 <html>
 
 <head>
 <title></title>
 </head>
 
 <body>
 <table id="MyTable" width="200" height="200" border="1">
 <tr>
 <td>.</td>
 <td>.</td>
 </tr>
 <tr>
 <td>.</td>
 <td>.</td>
 </tr>
 </table>
 
 <input type="button" name=""  value="-" onclick="Table(this,'MyTable');" style="width:50px;" >
 <script language="JavaScript" type="text/javascript">
 <!--
 
 function Table(obj,id){
 id=document.getElementById(id).style;
 
 if (obj.value=='-'){
 id.position='absolute';
 id.visibility='hidden';
 obj.value='+';
 }
 else {
 id.position='relative';
 id.visibility='visible';
 obj.value='-'
 }
 }
 
 //-->
 </script>
 
 </body>
 
 </html>
 [/CODE]

@paradoxperfectauthorJun 28.2005 — #So does your code sort of "remove" it from the page also or does it just leave a big blank space?

@acorbelliJun 28.2005 — #My code met the specification

this frees the space with no display!

the other 'guys' code requires an an initial style display attribute
[/QUOTE]

Why the quote around guy?

Hmm, I'll have to check out my code and see what's up. I was just putting up something that may work, though untested. Bad Anthony, bad!

But vw's works too!

@paradoxperfectauthorJun 28.2005 — #Ok well now i'm having trouble... See i'm using "CuteNews"... a news posting system. And in the template for the article itself... i can put {news-id} and it prints the id# of that article when it's published... How can i add this to the table and button. This way it's different EVERY time a news article is posted. This way only ONE article is shown/hidden on the click of one button...but the others will close if their button is clicked also.

Also I'm able to use {title}...and it displays the title of the article...how could i add this to the + and - so when clicked it still displays the {title} like this?

 if (vis) {table.style.display = "none"; button.value = "+ {title}"; vis = false;}
 else {table.style.display = "inline"; button.value = "-  {title}"; vis = true;}

because that doesn't seem to work ?

@acorbelliJun 28.2005 — #I figured it out, I needed to change
<table id="yourid" display="none">
to
<table id="yourid" style="display: none">

whoops.

@acorbelliJun 28.2005 — #Ok well now i'm having trouble... See i'm using "CuteNews"... a news posting system. And in the template for the article itself... i can put {news-id} and it prints the id# of that article when it's published... How can i add this to the table and button. This way it's different EVERY time a news article is posted. This way only ONE article is shown/hidden on the click of one button...but the others will close if their button is clicked also.

Also I'm able to use {title}...and it displays the title of the article...how could i add this to the + and - so when clicked it still displays the {title} like this?

 if (vis) {table.style.display = "none"; button.value = "+ {title}"; vis = false;}
 else {table.style.display = "inline"; button.value = "-  {title}"; vis = true;}

because that doesn't seem to work ?[/QUOTE]

You need a way to grab the news-id of the table and set the id of the button and the function accordingly. I don't know CuteNews, but I am sure it is possible.

Also, you can set the individual cells of the table to have id's, set all of one table to ahve the same id, and instead of using the table's id to the function, use the id from the individual cells. Then yuo can keep the th tag or whatever out.

@paradoxperfectauthorJun 28.2005 — #Ok... it works better now...but when i click on the button the first time it changes the {title} to a totally different article title...:S this is what i have right now:

&lt;script language="JavaScript" type="text/javascript"&gt;
 var vis = false;
 function change(table_id, button_id)
 {
 var table = document.getElementById(table_id);
 var button = document.getElementById(button_id);
 if (vis) {table.style.display = "none"; button.value = "+ {title}"; vis = false;}
 else {table.style.display = "inline"; button.value = "-  {title}"; vis = true;}
 }
 &lt;/script&gt;
 
 &lt;input type="button" id="{news-id}b" name="switch" value="-  {title}" onclick="change('{news-id}s', '{news-id}b');"&gt;
 
 
 &lt;table id="{news-id}s" style="display: inline" width="100%" height="0" border="0" cellspacing="1" cellpadding="0"&gt;
 table stuff is all here...
 &lt;/table&gt;

Also it takes 2 clicks on each button for it to show/hide contents?

@acorbelliJun 28.2005 — #Try this on for size...

<i>
 </i>&lt;script type="text/javascript"&gt;
 function change(table_id, button_id)
 {
 var table = document.getElementById(table_id);
 var button = document.getElementById(button_id);
 if (table.style.display != "none") {table.style.display = "none"; button.value = "+"; vis = false;}
 else {table.style.display = "inline"; button.value = "-"; vis = true;}
 }
 &lt;/script&gt;
 &lt;body&gt;
 
 &lt;form&gt;
 &lt;input type="button" id="button1" name="switch" value="+" onclick="change('yourid', 'button1');"&gt;
 &lt;/form&gt;
 
 &lt;table&gt;
 &lt;caption&gt;Title&lt;/caption&gt;
 &lt;tr&gt;
 &lt;td id="yourid" style="display: none"&gt;HAHAHAHA&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 
 
 &lt;form&gt;
 &lt;input type="button" id="button2" name="switch" value="+" onclick="change('yourid2', 'button2');"&gt;
 &lt;/form&gt;
 
 &lt;table&gt;
 &lt;caption&gt;Title&lt;/caption&gt;
 &lt;tr&gt;
 &lt;td id="yourid2" style="display: none"&gt;Another, HAHAHAHAHA&lt;/td&gt;
 &lt;/tr&gt;
 &lt;/table&gt;
 &lt;/body&gt;

Then change the id's and whatnot to match your needs. It's basically the same script with one modification.

@paradoxperfectauthorJun 29.2005 — #Ok well that works GREAT...but when i click the button it changes the title to the LAST article on the page. I use {news-id}b for the button and {news-id}t for the table that way they EACH get their own ID's different from EACH news article...only problem now is the {title}'s change on the button when clicked. Check it out on my site...

http://paradoxperfect.shroom.net

@acorbelliJul 01.2005 — #You've also got to change the call to the function to pass it the right parameters. This function does not change any text, so if the actual title is being changed then you need to check the CuteNews code to make sure it's giving you the right title and stuff each time.

A good way would be to insert
alert(table_id + "n" + button_id);

anywhere within the function to have it pop up the id name of the table and button it is working with.

Also in #JavaScript _↴

i need help with keeping our frame on top Javascript onClick function Angular vs Angularjs ?

Success!

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

Tweet This

Show/Hide with Button Change

14 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Show/Hide with Button Change

14 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

14 Comments(s) _↴

Also in #JavaScript _↴