javascript - jQuery click function firing at the same time -

i have 2 click functions seem firing @ same time. need second happen after first.

so first slidedown working fine once has finished want stop, , slideup happen own .close class clicked.

$(".trigger").click(function() {     $(".mobilewrap").slidedown(500);     $(".maincontentbg").addclass("height", 1000);     $(".trigger").text("read less");     $(".trigger").addclass("close");     $(".close").removeclass("trigger"); }); $("body").on("click", ".close", function() {     $(".maincontentbg").removeclass("height", 1000);     $(".mobilewrap").slideup(1000);     $(".trigger").addclass("trigger");     $(".trigger").text("read more"); }); 

http://jsfiddle.net/6hvzt/648/

thanks

problem code :

as class close being added, delegated click being triggered.

updated fiddle

if wish toggle more-less;you can use toggleclass , slidetoggle instead of 2 different click events,slideup/slidedown , addclass/removeclass.

below shortened code.

$(".trigger").click(function() {     $(".mobilewrap").slidetoggle(500);     $(".maincontentbg").toggleclass("height", 1000);     $(".trigger").text(function(){         return this.innertext === "read less"? "read more":"read less"     }); }); 

also, if have multiple such instances, inside handler better use $(this) instead of $('.trigger')