Question

I have some buttons that, when clicked, slide down a module with some text input fields. I can’t seem to interact with the content within these ‘drawers’. on jsFiddle, I can’t click on the input boxes, and I can’t seem to interact with the (+) Product set. Thoughts?

FIDDLE.

$(".clause").click(function() {
    var $this = $(this);
    $(".clause").css("box-shadow", "none");
    var tmp = $this.next("div.drawer");
    if(tmp.is(":hidden")) {
        tmp.slideDown('2s');
        $this.css("box-shadow", "0px 3px 5px #AAA");
        clicked = true;
    }
    else {
        tmp.slideUp('2s');
        clicked = false;
    }
});

Answer 1

Because you are using z-index: -999;
My Fiddle

Remove z-index else use z-index: 1; or just for demo I’ve used 999

.drawer {
    width:300px;
    padding:10px 6px 3px 6px;
    position:relative;
    margin-top:-3px;
    background:#F4F4F4;
    z-index:999;
    display:none;
    transition: display 2s ease;
    font-size:12px;
    font-family:Helvetica, sans-serif;
    font-weight:light;
}