show/hide jquery script

Question

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

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>

I have got working jquery script show|hide but I need modify it html structure that all links wil be in the top but in the bottom of my page I will have hide div and clicking on link it show it's div under its link (like now on here : jsfiddle.net/kolxoznik1/nRf5f ) — Viktors
– Viktors, Commented Mar 5, 2012 at 2:34
Still don't understand your question. From your HTML, do you want the product_menu_link links to appear (show/hide) below all the product_menu_categories links? — neo108
– neo108, Commented Mar 5, 2012 at 2:46
I want that script work like now (jquery) but html looks like in my post example (links at the top, hidden field in the bottom) — Viktors
– Viktors, Commented Mar 5, 2012 at 2:54

Raintree · Accepted Answer · 2012-03-05 03:28:25Z

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/

edited Mar 5, 2012 at 3:28

answered Mar 5, 2012 at 3:18

Raintree

2631 silver badge10 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

show/hide jquery script

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related