Div dropdown menu show/hide onclick jquery

Question

I'm trying to implement a div dropdown menu.

JQuery here:

<script>
    $(document).ready(function() {
        $('.desplegar').click(function() {
            $(this).next("div.desplegar_fills").show().siblings("div.desplegar_fills").hide();              
        });
    });
</script>

I know this jquery would only work to show Subindex level, but I can't even make it work.

HTML here:

<div class="desplegar">
        <p>Index 1</p>
        <div class="desplegar_fills">
            <p>Subindex 1</p>
            <div class="desplegar_links">
                <a href="#">Enllaç 1</a>
                <a href="#">Enllaç 2</a>
                <a href="#">Enllaç 3</a>
            </div>
        </div>
    </div>
    <div class="desplegar">
        <p>Index 2</p>
        <div class="desplegar_fills">
            <p>Subindex 2</p>       
            <div class="desplegar_links">
                <a href="#">Enllaç 1</a>
                <a href="#">Enllaç 2</a>
                <a href="#">Enllaç 3</a>
            </div>
        </div>      
    </div>
    <div class="desplegar">
        <p>Index 3</p>
        <div class="desplegar_fills">
            <p>Subindex 3</p>       
            <div class="desplegar_links">
                <a href="#">Enllaç 1</a>
                <a href="#">Enllaç 2</a>
                <a href="#">Enllaç 3</a>
            </div>
        </div>      
    </div>

It should look like this:

So, if I click on Index 1 it shows Subindex 1 and if i click on Subindex 1 it shows the links. The thing is, if I click on Index 2 or Index 3, Index 1 should close and just display Subindex 2 or Subindex 3(depending on which clicked). Any sugestions? Thanks to everyone!

You don't appear to have asked a question. Do you have a problem with your code? — Rory McCrossan
– Rory McCrossan, Commented Mar 11, 2016 at 10:02
Yeah, i've tried to implement the dropdown menu and im not able. I've tried many things and I can't get it right.. — xinp4chi
– xinp4chi, Commented Mar 11, 2016 at 10:03

SamGhatak · Accepted Answer · 2016-03-11 10:46:00Z

2

Please Find the answer here.

Basically this script should do the job:

$(document).ready(function() {
    $('.desplegar_fills').hide(0);
    $('.desplegar_links').hide(0);
    $('.desplegar').click(function() {
        $('.desplegar_fills').hide(0);
        $('.desplegar_links').hide(0);
        $(this).find(".desplegar_fills").show(0);
    });
    $('.desplegar_fills').click(function(e){
        $('.desplegar_links').hide(0);
        $(this).find(".desplegar_links").show(0);
        e.stopPropagation();
    })
});

edited Mar 11, 2016 at 10:46

answered Mar 11, 2016 at 10:40

SamGhatak

1,4931 gold badge16 silver badges28 bronze badges

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

Collectives™ on Stack Overflow

Div dropdown menu show/hide onclick jquery

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