One way to do it is to not name the divs div1, div2, … but rather divVendor1, divVendor2, … (assuming "VendorX" is only a placeholder name) and then do
Code:
function hideAllFields () {
// you can implement this yourself
}
function showField (vendorName) {
hideAllFields();
document.getElementById( 'div' + vendorName ).style.display = 'block';
}
Of course there are many (and frankly, better) ways to do it, but this is a way that is similar to yours. As for the hideAllFields function, don't you dare do the same mistake again and write the hiding command out for every vendor. An easy way would be assigning a css class to every div and then find all divs with that class and hide them. Alternatively, wrap all these divs into a parent div and then hide all direct descendants. Whatever you do, just stay flexible – no hardcoding!
As for the other thing: If you really have a lot of vendors, your PHP/MySQL code is, sorry, terribly slow. The simple answer is to create the divs for each vendor in a loop – this will at least save you having to write out the code for every vendor. However, your code will still be slow because you're still querying your database way more often than you have to.
The better way is to improve your SQL statements. The two most important ones being:
1) Do NOT use the * selector. Select only the fields you actually need.
2) Do NOT query the database again and again for every vendor. Select all products at once, sorting them by the vendor and then display the result accordingly. A hint: The sorting can already be done in MySQL.
Keep in mind that the above assumes that vendor names are unique. If they are not, you need to use an abstraction layer and assign unique IDs to each vendor with which you can work then.