Question

ive been working on a javascript slider the past few days and to this moment i have been stuck on how to make the div the slides into the page slide back off the page with a close button… i have found some code which i have tried to make to work but have been extremly unscussful in doing so.. here is the complete code i have put a comment next to the 2 parts of code i was trying to use to slide the div back off the screen..

<script type="text/javascript">
$(function(){
    $(".recordrow").click(function() {
    var divid = "details-" + $(this).attr('id').split("-")[1]; //Create the id of the div
    $("#"+divid).show().animate({ "left": '50.1%'}); //Bring the div from right to left with 200px padding from the screen

});

});
function closeRecord() { // this function
 $('#details').animate({right:-1000}, 500);
}
</script>



<div class="recordrow" id="row-1">
    <p>Matthew Gia </p>
    </div>

<div class="details" id="details-1">
   ... More details of the records
   <a href="#" id="bt-close" onclick="closeRecord(); return false;">Close</a> //this button

</div>
<div class="details" id="details-2">
   ... More details of the records

</div>

there is also this js fiddle

http://jsfiddle.net/matth4ck3r/aWMg6/2/

Answer 1

There is a scope issue in your code, you can remove the onclick attribute and try:

$('#bt-close').click(function(e){
    $('.details').animate({right: "-=1000"}, 500);
    e.preventDefault()
})

http://jsfiddle.net/aWMg6/10/

Also note that there is no element with id of details in your markup, it seems you want to select the elements by class names.