How to hide a div on document ready, and then call it dynamically from Javascript?

Question

I'm using this code to hide a div container where I'm placing text dynamically.

$(document).ready(function(){
     $(".slidingDiv").hide(); 
     $(".show_hide").show();

     $('.show_hide').click(function(){
         $(".slidingDiv").slideToggle();
     });
 });

The problem I have is that I want to trigger the show div from a javascript function instead of a predefined click event. I've found this example which mateches the function I want, but I'm not sure how to trigger it from javascript instead of a click function.

JSFiddle Here

Answer 1

just hide the div using css

display:none;

.slidingDiv{
 display:none;
}

and show it when ever you want using

.show()

$(".slidingDiv").show();

edit:

after you question edit, you can always trigger the click event programatically like

function yourFunction(){
  $(".show_hide").click();
}