show/hide jquery script

Question

I have got show|hide script. It work's good but I need to modify html of this script

http://jsfiddle.net/kolxoznik1/nRf5f/

like on my schema

<!--Links-->
<div>link1</div>
<div>link2</div>


<!--Hide divs-->
<div>Show1</div>
<div>Show2</div>

and my goal is that html look like this:

example html what I want to do

    <div class="product_menu_categories">link_1</div>
    <div class="product_menu_categories">link_2</div>


     <div class="copy hide">
            <ul>
                <li><a href="#" id="prod_1" class="product_menu_link">test1</a></li>
                <li><a href="#" id="prod_2" class="product_menu_link">test2</a></li>
            </ul>
        </div>

        <div class="copy hide">
            <ul>
                <li><a href="#" id="prod_6" class="product_menu_link">test4</a></li>
            </ul>
        </div>

Answer 1

Are you saying that you want you page structure to be:

<!-- Top Level Menus/Categories -->
<div>Menu Item #1</div>
<div>Menu Item #2</div>

<!-- Submenu Items -->
<div id="submenu-of-menu-item-1">
    <div>Item A</div>
    <div>Item B</div>
</div>

<div id="submenu-of-menu-item-2">
    <div>Item C</div>
</div>

but yet display the submenus under the correct menu item?

If so, change $("div.copy:eq("+i+")").toggle().siblings("div.copy").hide(); from you JSFiddle code to

$("div.copy:eq("+i+")").insertAfter(this).toggle();
$("div.copy:not(:eq("+i+"))").hide();

Basically what that does is move the submenu to the correct position on first click, and then hide the rest of the div.copy elements.

Here's your modified example on JSFiddle: http://jsfiddle.net/pjHu3/