Adding an onclick function to several similar buttons that shows/hides corresponding element

Question

The html is something like this:

<main class="wrapper">
    <section>
        <div class="card">
            <div class="card-header bg-green">
                <div class="dropdown">
                    <div class="dropbtn">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="" class="fa fa-pencil-square-o">Edit</a>
                        <a href="" class="fa fa-times">Delete</a>
                    </div>
                </div>
                <i class="fa fa-check-circle-o fa-white icon-lg"></i>
                <h2>Line #1</h2>
                <p>Available</p>
            </div>
            <div class="card-content">
                <h3>Lorem Ipsum.</h3>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <button type="button" class="card-btn">Reserve Now!</button>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-green">
                <div class="dropdown">
                    <div class="dropbtn">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="" class="fa fa-pencil-square-o">Edit</a>
                        <a href="" class="fa fa-times">Delete</a>
                    </div>
                </div>
                <i class="fa fa-check-circle-o fa-white icon-lg"></i>
                <h2>Line #2</h2>
                <p>Available</p>
            </div>
            <div class="card-content">
                <h3>Lorem Ipsum.</h3>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <button type="button" class="card-btn">Reserve Now!</button>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-red">
                <div class="dropdown">
                    <div class="dropbtn">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="" class="fa fa-pencil-square-o">Edit</a>
                        <a href="" class="fa fa-times">Delete</a>
                    </div>
                </div>
                <i class="fa fa-times-circle-o fa-white icon-lg"></i>
                <h2>Line #3</h2>
                <p>In Use</p>
            </div>
            <div class="card-content">
                <h3>Lorem Ipsum.</h3>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <button type="button" class="card-btn">Reserve Now!</button>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-red">
                <div class="dropdown">
                    <div class="dropbtn">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="" class="fa fa-pencil-square-o">Edit</a>
                        <a href="" class="fa fa-times">Delete</a>
                    </div>
                </div>
                <i class="fa fa-times-circle-o fa-white icon-lg"></i>
                <h2>Line #4</h2>
                <p>In Use</p>
            </div>
            <div class="card-content">
                <h3>Lorem Ipsum.</h3>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <button type="button" class="card-btn">Reserve Now!</button>
            </div>
        </div>
        <div class="card">
            <div class="card-header bg-red">
                <div class="dropdown">
                    <div class="dropbtn">
                        <i class="fa fa-ellipsis-v"></i>
                    </div>
                    <div class="dropdown-content">
                        <a href="" class="fa fa-pencil-square-o">Edit</a>
                        <a href="" class="fa fa-times">Delete</a>
                    </div>
                </div>
                <i class="fa fa-times-circle-o fa-white icon-lg"></i>
                <h2>Line #5</h2>
                <p>In Use</p>
            </div>
            <div class="card-content">
                <h3>Lorem Ipsum.</h3>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <p class="card-text">Nulla vitae libero, </p>
                <button type="button" class="card-btn">Reserve Now!</button>
            </div>
        </div>
    </section>
</main>

The jquery code is something like this:

for(var i = 0; i < 5; i++){
    var btnSelector = ".dropdown:eq(" + i + ") .dropbtn";
    var drpSelector = ".dropdown:eq(" + i + ") .dropdown-content";

    $(btnSelector).on("click", function(event){
        if($(".dropdown:eq(0) .dropdown-content").is(":visible")){
            $(".dropdown:eq(0) .dropdown-content").hide();
        }
        else{
            $(".dropdown:eq(0) .dropdown-content").show();
        }
    });
}

which is thought to get the nth button with the class ".dropbtn", adding a function to it which shows or hides the nth dropdown-menu container with the class ".dropdown-content". Both of which are in the class ".dropdown" hence why .eq() is used on the dropdown instead of dropdown-content class. But when it is run, only the fifth dropdown-content is shown/hidden using any button. But when hardcoded, meaning something like this:

$(".dropdown:eq(0) .dropbtn").on("click", function(event){
    if($(".dropdown:eq(0) .dropdown-content").css("display") == "none"){
        $(".dropdown:eq(0) .dropdown-content").css("display","block");
    }
    else{
        $(".dropdown:eq(0) .dropdown-content").css("display","none");   
    }
});

$(".dropdown:eq(1) .dropbtn").on("click", function(event){
    if($(".dropdown:eq(1) .dropdown-content").css("display") == "none"){
        $(".dropdown:eq(1) .dropdown-content").css("display","block");
    }
    else{
        $(".dropdown:eq(1) .dropdown-content").css("display","none");   
    }
});

$(".dropdown:eq(2) .dropbtn").on("click", function(event){
    if($(".dropdown:eq(2) .dropdown-content").css("display") == "none"){
        $(".dropdown:eq(2) .dropdown-content").css("display","block");
    }
    else{
        $(".dropdown:eq(2) .dropdown-content").css("display","none");   
    }
});

$(".dropdown:eq(3) .dropbtn").on("click", function(event){
    if($(".dropdown:eq(3) .dropdown-content").css("display") == "none"){
        $(".dropdown:eq(3) .dropdown-content").css("display","block");
    }
    else{
        $(".dropdown:eq(3) .dropdown-content").css("display","none");   
    }
});

$(".dropdown:eq(4) .dropbtn").on("click", function(event){
    if($(".dropdown:eq(4) .dropdown-content").css("display") == "none"){
        $(".dropdown:eq(4) .dropdown-content").css("display","block");
    }
    else{
        $(".dropdown:eq(4) .dropdown-content").css("display","none");   
    }
});

it is properly showing corresponding dropdowns for the specific buttons. Can I ask for help regarding how to fix this? I need this not to be hardcoded since currently it isn't sure how many dropdowns like this is needed for the site.

Your problem is the "infamous loop issue", but the solution is to not use a loop at all, but instead traverse the DOM, however as no markup is posted, we can't help you with that. — adeneo, Jul 12 '17 at 14:56
Traversing the DOM, I see, thank you for the comment, will research on that right now. — Bengemin Uy, Jul 12 '17 at 15:00
Possible duplicate of [How to generate event handlers with loop in Javascript?](https://stackoverflow.com/questions/6487366/how-to-generate-event-handlers-with-loop-in-javascript) — Grimlorn, Jul 12 '17 at 15:05

score 2 · Answer 1 · answered Jul 12 '17 at 15:10

Thanks to everyone here, as someone posted an instance of event handlers with loop, have added another function that handles the said event and it now works.

for(var i = 0; i < 5; i++){
    (function(i){
        var btnSelector = ".dropdown:eq(" + i + ") .dropbtn";
        var drpSelector = ".dropdown:eq(" + i + ") .dropdown-content";

        $(btnSelector).on("click", function(event){
            if($(drpSelector).is(":visible")){
                $(drpSelector).hide();
            }
            else{
                $(drpSelector).show();
            }
        });
    })(i);
}

score 0 · Answer 2 · answered Jul 12 '17 at 15:06

0

you could try something in the lines of:

$(".dropbtn").on("click", function(event){
    $(this).siblings('.dropdown-content').toggle();
});

It would catch a click on any .dropbtn, find the sibling with the class .dropdown-content and show/hide it.

answered Jul 12 '17 at 15:06

Joseph Pernerstorfer

424
4
14

@BengeminUy I tested in a fiddle if what I posted would work, and it did, maybe you want to try it and, if you liked it, accept my answer? :P – Joseph Pernerstorfer Jul 12 '17 at 15:15

Adding an onclick function to several similar buttons that shows/hides corresponding element

2 Answers2