I this simple website Im trying to develop, but I have never used Javascript before.
I have a menu that is based on href to div tags on my site to the different agreements with different companies. So when the user click a choice in the menu the right div item fades in.
Now I want to make the site more practical with google maps api for each company.
So I need to <a href> in the menu to display more than just one <div> item. I have tried to solve this by using a <table> inside the <div> item. Since I want to have the company description on the left hand og the google map + short description on the right hand. But now I have decided that I want to use <div> items with display properties instead of a <table> inside a <div> item.
Here is the code just made simple without the php code to gather info from DB: http://jsfiddle.net/nerfux/546Jn/7/
As you see, category2 -> company3, is the messy solution I made. In the HTML code at <div id='com-1'> and <div id='com-2'>, I have commented out the solution I want to use.
So, a short way to say it: When I click a href to a div item, I want also to fadeIn all the <div> items underneath the <div> item I <a href=*div id*> to (regardless if they have an id or not).
If you just want to hide the wrapping container (.content), and not the divs inside, you can just add > to the selector. It will only affect the div directly under .content.
So add > to
$('.content div')
like so
$('.content > div')