Toggle with +/-
Don't use this. It's useless. :)
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 #2dosent work
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 !
Just what I was looking for. Thanks!
Sloppy code, poorly done.
Rico Suave,
Thanks for your contribution. I welcome better examples, so feel free to post some code in the comments.
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.
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.
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.
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.
Its good, and very useful
Thanks