I am trying to use JS to initially hide a slider question. I have a 2 sec fixation cross which should appear while the slider is hidden, and then the slider and an image appear. 

I have tried various methods to hide the slider question but they are not working. If I use: 

var q1 = jQuery(".QuestionOuter:first"); and q1.hide() and q1.show() the question is hidden/shown as desired but the functionality of the slider is impacted and it cannot be dragged (see image below).

If I use:     

var q=("#"+this.questionId);
jQuery(q).css("content-visibility","hidden"); and jQuery(q).css("content-visibility","visible"); 

The slider does not hide as desired. 

This is my full code: 

Qualtrics.SurveyEngine.addOnload(function() {
  var images = r
      "https://cambridge.eu.qualtrics.com/ControlPanel/Graphic.php?IM=IM_yV5FFwBXvaa9Ju3",
      ];
   

// create fixation cross element     
  var fixationCross = document.createElement("div");
  fixationCross.innerHTML = "+";
  fixationCross.style.fontSize = "48px";
  fixationCross.style.fontWeight = "bold";
  fixationCross.style.position = "fixed";
  fixationCross.style.top = "35%";
  fixationCross.style.left = "50%";
  fixationCross.style.transform = "translate(-50%, -50%)";
  fixationCross.style.color = "black";
  fixationCross.style.zIndex = "9999";

var q=("#"+this.questionId);
   jQuery(q).css("content-visibility","hidden");

  function displayImage() {   
    // Show the fixation cross
    document.body.appendChild(fixationCross);

    // Wait for 2 seconds
    setTimeout(function() {
      // Hide the fixation cross
      document.body.removeChild(fixationCross);

      // Show the current image
      document.getElementById("image").src = images;
      document.getElementById("image").style.display = "block";
// Show the question       

 jQuery(q).css("content-visibility","visible");
          }, 2000); 
  }

  
  displayImage();
});

any help much appreciated!