Toggle with +/-

Don't use this. It's useless. :)

wine
beer
whisky
Javascript
function pmtoggle(div) {
var option=['wine1','beer1','whisky1'];
var c=0;
for(var i=0; i<option.length; i++) {
var obj=document.getElementById(option[i]);
obj.style.display=(option[i]==div) && !(obj.style.display=="block")? "block" : "none";
if (obj.style.display=="none"){c++;}
if (c==3){document.images['plusminus'].src="plus.gif";}
else {document.images['plusminus'].src="minus.gif";}
}
}
HTML
<h1>Toggle with +/-</h1>
<p>Don't use this. It's useless. :)</p>
<div id="buttons" class="cfix">
<img id="plusminus" src="plus.gif" alt="" />
<button onclick="pmtoggle('wine1')">Wine</button>
<button onclick="pmtoggle('beer1')">Beer</button>
<button onclick="pmtoggle('whisky1')">Whisky</button>
<div id="wine1"><img src="wine1.jpg" alt="wine"></div>
<div id="beer1"><img src="beer1.jpg" alt="beer"></div>
<div id="whisky1"><img src="whisky1.jpg" alt="whisky"></div>
</div>
CSS
#buttons {
height:100px;
text-align:center;
}
#wine1, #beer1, #whisky1{
display:none;
}

Comments

#1
2009-04-03 amohan says :

Its good, and very useful

Thanks

#2
2009-07-26 mattagy says :

dosent work

#3
2010-01-13 Bornholy says :

Hi, I have a Problem here.. i need to change the buttons into html Table ... Can that be done ?

First Row<--- Wine (Click able)(With Icon Plus/Minus)
Second Row<--- Infomations (Collapse/Expand)

Please i really need your help !

#4
2010-06-08 manda says :

Just what I was looking for. Thanks!

#5
2011-01-13 Rico Suave says :

Sloppy code, poorly done.

#6
2011-01-13 BonRouge says :

Rico Suave,
Thanks for your contribution. I welcome better examples, so feel free to post some code in the comments.

#7
2011-01-13 Rico Suave says :

Sorry about my negative comment. I was frustrated when I landed on your page: just too hard to find good code samples on the Internet.
A lot of pages don't show a demo, and in your case I noticed that you don't explain how the code is supposed to be placed inside the files. There are tags that are missing, which is obvious to a more experienced programmer but not so much to a beginner.
Thanks for sharing that, and my apologies again.

#8
2011-01-14 BonRouge says :

Rico Suave,
Thanks for the feedback.
If you look at the menu on the left, there's a button at the bottom that says 'See Demo Only'. Click that and then view the source to see how the code can fit into a page. I would be interested to know which tags you think are obviously missing though.

#9
2012-04-12 Juice says :

You don't comment anything and the code has no organization, which makes it very difficult to read. Also, What is the point of the +/-? It changes when I click on of the button, but clicking on the +/- does nothing. Add some spacing, organization and comments to the code.

#10
2012-04-13 BonRouge says :

Juice,
I agree. This page is useless. I don't know why it's here. Sorry for wasting your time. I'll make a note of your point at the top of the page.

Comment form

Please type the word 'forum' here:

BB code available :

  • [b]...[/b] : bold
  • [it]...[/it] : italic
  • [q]...[/q] : quote
  • [c]...[/c] : code
  • [url=...]...[/url] : url