How to hide DIVs using a class name?

Question

My code:

var array1 = document.getElementsByClassName("div");
var array2 = document.getElementsByClassName("button");

    for(var i = 0; i < array1.length; i++)
    {
        $(array2[i]).show();
        $(array1[i]).hide();

        $(array2[i]).click(function(){
            $(array1[i]).slideToggle();
        });
    }

Why I got error: Could not convert JavaScript argument arg 0?

Answer 1

var $buttons = $(".button").hide();

$(".div").show().bind("click", function(event) {
    var index = $divs.index(this);

    $buttons.eq(index).slideToggle();
});

OR:

var $buttons = $(".button").hide(),
    $divs = $(".div").show();

$.each($buttons, function(index) {
    var $button = $(this);
    $divs.eq(index).bind("click", function() {
        $button.slideToggle();
    });
});

OR

var $buttons = $(".button").hide(),
    $divs = $(".div").show();

$buttons.each(function(index) {
    var $button = $(this);
    $divs.eq(index).bind("click", function() {
        $button.slideToggle();
    });
});