Question

I really don’t know what would be the best title for this. Basically, on my page I have a dropdown menu which is implemented by jQuery (.slide). The dropdown appear in both at the top and bottom of the page, so it’s easier for user to scroll down and can still use the dropdown menu. The page to display this I use rail partial so that I can refactor it quite easy.

The problem is, since the two dropdown menus are in the same page, so they can’t not have the same ID but they have the same functionality, when the user click then opens up and show other options. What is the best way to let them use the same logic but different id and less code as possible.

I don’t want to do something like this.

        $('.sub_export_record1').hide();

        $('.export_record_link1').click( function(e) {
            e.preventDefault();
        });

        $('.export_record1').click( function(e) {

            if ( $(".sub_export_record1").is(":hidden") )
            {
                $('.sub_export_record1').slideDown("slow");
            }
            else
            {
                $('.sub_export_record1').hide();
            }
        });

And then the second one

        $('.sub_export_record2').hide();

        $('.export_record_link2').click( function(e) {
            e.preventDefault();
        });

        $('.export_record2').click( function(e) {

            if ( $(".sub_export_record2").is(":hidden") )
            {
                $('.sub_export_record2').slideDown("slow");
            }
            else
            {
                $('.sub_export_record2').hide();
            }
        });

Thanks a lot. 🙂

HTML

<ul>
<li class="export_record">
    <%= link_to "Export this Record"%>
    <ul class="sub_export_record">
        <li><%= link_to "Export to Photo Wall"%></li>
        <li><%= link_to "Export to PDF"%></li>
        <li><%= link_to "Export to CSV"%></li>
    </ul>
</li>
</ul>

Answer 1

There is no need to identify the elements. Give them the same class (as you already have in the snippet):

$('.sub_export_record').hide();

$('.export_record').click( function(event) {
    event.preventDefault();

    var $sub = $(this).children(".sub_export_record");       
    if ( $sub.is(":hidden") ) {
        $sub.slideDown("slow");
    }
    else {
        $sub.hide();
    }
});